CSS custom page template doesnet overite global CSS

  • Resolved deterius

    (@deterius)


    15 years, 1 month ago

    Hello!
    I have a question, I have a menu on my website and it’s a bit old-school. In terms that the sub-menus are hidden until you click on the page, then a sub-menu appears.

    So on the home page I have the style.css

    #main .widget-area .sub-menu li {
display:none;
}

    Then when you browse to, ex: about us I have the following code:

    <?php if ( is_page('51') ) { // Load special CSS for "About us" category ?>
  <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/SECabouttivoli.css" type="text/css" media="screen" />;
<?php } else { ?>
   <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php } ?>

    And that custom css is as follows:

    #main .widget-area .sub-menu li {
	color:#333333;
	display:block;
	text-decoration:none;
	background-color:#E09173;

}

    The problem: the custom CSS doesn’t override display:none and the submenu is still hidden!

    Any ideas!?
    Thanks!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Avnish Awasthi

    (@avnish-awasthi)

    15 years, 1 month ago

    Can you give me your website url? this will be easy for me to solve your problem.

    Michael

    (@alchymyth)

    15 years, 1 month ago

    your browser might be holding on to the old css; try to clear the browser cache (‘CTRL F5’ or ‘reload’).

    a link to your site might help to illustrate the problem.

    is there any other linking of a stylesheet before or after your conditional stylesheet links?

    Thread Starter deterius

    (@deterius)

    15 years, 1 month ago

    err its on local host so far- I don’t have it up.
    Anything you can help so far?

    Avnish Awasthi

    (@avnish-awasthi)

    15 years, 1 month ago

    #main .widget-area .sub-menu li {
    color:#333333;
    display:block !important;
    text-decoration:none;
    background-color:#E09173;
    }

    try this otherwise use inline css.

    Thread Starter deterius

    (@deterius)

    15 years, 1 month ago

    Okay, its kind of funky but here it is, click about us:

    http://dacityswing.barchdesign.com/

    Notice how there are orange bars, these are from the custom CSS but the sub-menu is still hidden. (you can see it if you look at the source of the “About us” button).

    Avnish, I’ve tried changing it- but not working yet.
    Thanks guys!

    Chip Bennett

    (@chipbennett)

    15 years, 1 month ago

    Have you inspected the rendered page using Firefox Firebug or Chrome Developer Tools? Either one will tell you:

    1) What style declarations target a given element
    2) What style declarations are being applied

    Thread Starter deterius

    (@deterius)

    15 years, 1 month ago

    @chip: I did look at that, at the same time the problem persist- the fact that custom CSS doesn’t override the original CSS.

    Fixed: Sort of, I created a custom template for each template (each sub menu was of a different template) So I had them call a custom CSS, at the same time I had .sub-menu {display:hidden} while for the active submenu I had display:block. Ex:

    .sub-menu {
	display:none;

}
.menu-item-2 .sub-menu {
	display:block;

}
    Chip Bennett

    (@chipbennett)

    15 years, 1 month ago

    What is the declaration being applied, and what is the declaration in your custom CSS?

    Michael

    (@alchymyth)

    15 years, 1 month ago

    the fact that custom CSS doesn’t override the original CSS.

    have you adapted to the fact that ‘about us’ page now has the page_id=8 ?

    btw:
    your theme is calling the stylesheet (style.css of the schild theme) four times. although this should not interfere with your custom css.

    Thread Starter deterius

    (@deterius)

    15 years, 1 month ago

    Thanks guys SOLVED!
    !important;
    Is awesome!

    Chip Bennett

    (@chipbennett)

    15 years, 1 month ago

    !important is actually terrible as anything other than a last resort.

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘CSS custom page template doesnet overite global CSS’ is closed to new replies.