Support » Themes and Templates » My style.css must be retarded (or I am)

  • Resolved Goodvalley

    (@goodvalley)


    …it’s likely that I am.

    Ok, I’m trying to build a simple dropdown menu with css, nothing more. So it should be a piece of cake.

    I am using the SilverOrchid theme. It has a menu, but I need to add another menu which will have different links for every post. So I want to build a css menu which will be embedded in posts.

    I’m no expert nor programmer, but it’s not exactly my first day with WordPress either.

    Well, I’m simply not able to make the first sentence of the code in the style.css to work.

    For example, in the “text” screen of a post I put this code:

    <div id="my-header">
    
       <ul class="my-menu">
          <li><a href="">Item 1</a></li>
          <li><a href="">Item 2</a>
             <ul>
                <li><a href="">Item 2-1</a>
                   <ul>
                      <li><a href="">Item 2-1-1</a></li>
                      <li><a href="">Item 2-1-2</a></li>
                      <li><a href="">Item 2-1-3</a></li>
                      <li><a href="">Item 2-1-4</a></li>
                   </ul>
                </li>
                <li><a href="">Item 2-2</a></li>
                <li><a href="">Item 2-3</a></li>
                <li><a href="">Item 2-4</a></li>
                <li><a href="">Item 2-5</a></li>
             </ul>
             </li>
          <li><a href="">Item 3</a></li>
          <li><a href="">Item 4</a></li>
          <li><a href="">Item 5</a></li>
          <li><a href="">Item 6</a></li>
          <li><a href="">Item 7</a></li>
          <li><a href="">Item 8</a></li>
    	</ul>
    </div>

    Then I go to the style.css and add the following:

    .my-menu ul {
    		list-style:none;
    	}

    And it doesn’t work. I’ve changed everything, from “class” to “div”, adding #my-header and so on, and it simply does nothing. Yes, that is a very small piece of code and it should have a lot more. But I can’t solve the issue with the “list-style:none;” in any way.

    Here is the code in the style.css for the menu in my theme:

    #gazpo-nav {
    	background:#f6f6f6 url("images/nav-bg.png") repeat-x 0 0;
    	border-bottom:2px solid #ccc;
    	border-top:1px solid #ececec;
    	display: block;
    	float: left;
    	margin: 0 auto;
    	width: 100%;
    	position:relative;
    	z-index:4;
    }
    
    #gazpo-nav .main-menu ul,
    div.menu ul {
    	list-style: none;
    	margin: 0;
    	padding-left:0;
    	white-space:nowrap;
    }
    
    #gazpo-nav .main-menu li,
    div.menu li {
        float: left;
        position: relative;
    }
    
    #gazpo-nav a {
    	color:#737373;
        display: block;
        font-family: 'Droid Sans', sans-serif;
    	font-weight: bold;
    	text-shadow: 1px 1px 0px #fff;
      	font-size: 16px;
        line-height: 28px;
        margin-top: 1px;
        padding: 6px 20px;
        text-decoration: none;
    }
    #gazpo-nav .menu ul li.hover,
    #gazpo-nav .menu ul li:hover,
    #gazpo-nav ul.menu li.hover,
    #gazpo-nav ul.menu li:hover {
    	position: relative;
    	z-index: 599;
    	cursor: default;
    }
    #gazpo-nav ul ul {
     float: left;
        left: 0;
        position: absolute;
    	display:none;
        top: 40px;
        width: 180px;
    	z-index: 598;
    }
    #gazpo-nav ul ul li {
    	min-width: 180px;
    }
    #gazpo-nav ul ul ul {
    	left: 100%;
    	top: 0;
    	padding-left:2px;
    }
    
    #gazpo-nav ul ul a {
    	line-height: 1em;
        padding: 10px;
    	width: 180px;
    	height: auto;
    	margin-bottom:-1px;
    	font-size: 14px;
    	background: #f9f9f9;
    	border-bottom: 1px solid #ddd;
    	overflow:hidden;
    }
    
    #gazpo-nav ul ul a:hover {
    	color: #373737;
    }
    
    #gazpo-nav li:hover > a,
    #gazpo-nav ul ul :hover > a {
    	color: #373737;
    }
    #gazpo-nav ul li:hover > ul {
    	display: block;
    }
    #gazpo-nav ul li.current_page_item > a,
    #gazpo-nav ul li.current-menu-ancestor > a,
    #gazpo-nav ul li.current-menu-item > a,
    #gazpo-nav ul li.current-menu-parent > a {
    	color: #373737;
    }
    * html #gazpo-nav ul li.current_page_item a,
    * html #gazpo-nav ul li.current-menu-ancestor a,
    * html #gazpo-nav ul li.current-menu-item a,
    * html #gazpo-nav ul li.current-menu-parent a,
    * html #gazpo-nav ul li a:hover {
    	color: #373737;
    }
    
    #gazpo-nav li.submenu>a{
    	background: url(images/arrow_down.png) no-repeat 98% 50%;
    }
    
    #gazpo-nav li ul li.submenu>a{
    	background:#f9f9f9 url(images/arrow_right.png) no-repeat 98% 50%;
    }
    
    #gazpo-nav li ul li.submenu>a:hover{
    	background:#f9f9f9 url(images/arrow_right.png) no-repeat 98% 50%;
    }

    I’ve tried to copy some pieces of the same code above, but nothing works.

    What am I doing wrong?

Viewing 15 replies - 1 through 15 (of 77 total)
  • .my-menu is the class of the first ul (and is equal to ul.my-menu), so the css starts here, then…

    .my-menu ul is looking for the second ul in the element with class .my-menu; hence the first ul is not targeted.

    try:

    #my-header ul {
    list-style: none;
    }

    or even

    .my-menu {
    list-style: none;
    }

    The css (for #gazpo-nav) you posted above is not related to the ul in the “text” of your post(s). It will not affect the styling of your post list.

    Thread Starter Goodvalley

    (@goodvalley)

    Yes, I tried these two before and nothing happens. I’ve tried again, but nothing.

    And yes, I know that those code lines for the Silverorchid theme should not affect anything, but I posted them for everyone to see them, just in case.

    I have no troubles when I copy your code and insert as “text” to a post and then add your css to the style sheet. The bullets do not show. Are you working on a test site or a live site? Would it be possible to view your website?

    Thread Starter Goodvalley

    (@goodvalley)

    yes, it’s http://www.drumscult.com/es.

    All posts are private except that one, so you should be able to see it. It’s called “Menu Drummers”.

    Thanks for your help.

    Your stylesheet has no selector for #my-header or .my-menu

    Just a thought…
    I sometimes get to working on my test server, then look at my live server and wonder why the changes are not working. Are you sure you have added/uploaded your css to the right place?

    Thread Starter Goodvalley

    (@goodvalley)

    Not really… not at all.

    what should I be adding?

    I mean, I put what you told me, but I deleted it since it didn’t work. That’s why you don’t find it.

    One more thing…

    Yo no hablo español, señor. La versión Inglés no muestra un mensaje público para la “Drummers menú” ¿Está seguro de que está editando la hoja de estilo correcto?
    [I do not speak Spanish, sir. The English version does not show a public message for the “Drummers menu” Are you sure you are editing the correct style sheet?]

    Do both language versions site use the same style sheet? They apparently do not check the same place to see if a post is public or private…

    Your style sheet is in English, so I have no problem reading that one.

    Thread Starter Goodvalley

    (@goodvalley)

    Yes, both versions use the same style sheet.

    I’mm adding again the code lines you told me, just look for “#my-header”

    Oh, and all this:

    /*add_filter('the_excerpt', 'remove_shortcode_from_excerpt');
    
    function remove_shortcode_from_excerpt($excerpt) {
      if ( is_search() ) {
        $excerpt = strip_shortcodes( $excerpt );
      }
      return $excerpt;
    }*/
    
    /*add_filter('the_content', 'strip_shortcodes');
    
    function remove_shortcode_from_index($content) {
      if ( is_search() ) {
        $content = strip_shortcodes( $content );
      }
      return $content;
    }*/
    
    /*function remove_shortcode_from_index($content) {
      if ( is_home() ) {
        $content = strip_shortcodes( $content );
      }
      return $content;
    }
    add_filter('the_content', 'remove_shortcode_from_index');*/
    
    function remove_shortcode_from_index($excerpt) {
      if ( is_home() ) {
        $excerpt = strip_shortcodes( $excerpt );
      }
      return $excerpt;
    }
    add_filter('the_excerpt', 'remove_shortcode_from_index');

    goes in your functions.php file, NOT your stylesheet. If you added any styling after this code, it will not work as the above breaks your style sheet.

    And, one more thing I neglected, for you and anybody else reading this post. Before adding/changing any code or css in your theme, it is highly advisable that you create and activate a child theme.

    And do not worry, adding and activating a child theme, when done correctly, is seemless – nobody will notice a change. It simply protects all your hard work if the theme author makes an update.

    And on that topic, all the above code that I told you needed to be moved would be added to a new functions.php file in your child theme folder. The css you are adding will be added to the child theme style sheet.

    Thread Starter Goodvalley

    (@goodvalley)

    Ooops…

    That code you’re mentioning was from another problem, and it was solved. I didn’t know it should go into the functions.php file. I will change it. It may sound strange, but I have had no problem with that.

    But the code for the dropdown menu goes before those lines.

    Thread Starter Goodvalley

    (@goodvalley)

    I’ve removed that code you mentioned from the style.css

    The issue with the list is still happening.

    Ok, so your style sheet is just confused.

    First, always add any custom css to the bottom of a stylesheet. Where you placed your styling was being overridden by a later selector. However, moving it to the bottom does not remove the bullets because the selector from the theme author and your selector do not exactly match. Move your style to the bottom of your [child] theme style sheet and change it to:

    #content .entry #my-header ul {
    list-style: none;
    }

    And then of course continue styling your drop down at the bottom of your style sheet.

    Keep on rockin!

    Thread Starter Goodvalley

    (@goodvalley)

    YES!

    It worked!

    How can a so simple thing become such a big problem???

    Thanks very much DMBarber, you made my day and also my entire week!

    Can I ask you another question?

    I removed that code from the style.css and added it to the functions.php, but it broke everything. When it was in the style.css, it seemed to work.

    This was added due to an issue with the Tablepress plugin. The author told me to put it in the functions.php, but it broke everything, so I put it in the style.css and it seemed to work. Any advice?

    Thank you very much!

    Try adding

    <?php

    on the line before the code you moved and

    ?>

    on the line after.

Viewing 15 replies - 1 through 15 (of 77 total)
  • The topic ‘My style.css must be retarded (or I am)’ is closed to new replies.