WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] My style.css must be retarded (or I am) (78 posts)

  1. Goodvalley
    Member
    Posted 6 months ago #

    ...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?

  2. DMBarber
    Member
    Posted 6 months ago #

    .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.

  3. Goodvalley
    Member
    Posted 6 months ago #

    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.

  4. DMBarber
    Member
    Posted 6 months ago #

    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?

  5. Goodvalley
    Member
    Posted 6 months ago #

    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.

  6. DMBarber
    Member
    Posted 6 months ago #

    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?

  7. Goodvalley
    Member
    Posted 6 months ago #

    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.

  8. DMBarber
    Member
    Posted 6 months ago #

    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.

  9. Goodvalley
    Member
    Posted 6 months ago #

    Yes, both versions use the same style sheet.

    I'mm adding again the code lines you told me, just look for "#my-header"

  10. DMBarber
    Member
    Posted 6 months ago #

    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.

  11. DMBarber
    Member
    Posted 6 months ago #

    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.

  12. Goodvalley
    Member
    Posted 6 months ago #

    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.

  13. Goodvalley
    Member
    Posted 6 months ago #

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

    The issue with the list is still happening.

  14. DMBarber
    Member
    Posted 6 months ago #

    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!

  15. Goodvalley
    Member
    Posted 6 months ago #

    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!

  16. DMBarber
    Member
    Posted 6 months ago #

    Try adding

    <?php

    on the line before the code you moved and

    ?>

    on the line after.

  17. Goodvalley
    Member
    Posted 6 months ago #

    Hahaha, good one!

    You see? Not even the tiniest skill for coding anything...

    DMBarber, a big thank you!

  18. DMBarber
    Member
    Posted 6 months ago #

    Glad I could help.

  19. Goodvalley
    Member
    Posted 6 months ago #

    DMBarber, still here?

    I'm coping the code for the menu styling from a video, and the author puts this code:

    * {
         padding:0px;
         margin:0px;
       }

    I want to substitute "*" by the proper word, but I don't know how to do it.

    Should I put

    .my-menu ul {
    padding:0px;
    margin:0px;
    }

    or shoul I put ".my-menu ul"?

    Thanks, promise not to bother you again, hehe.

  20. Goodvalley
    Member
    Posted 6 months ago #

    OK, I put it in the same place you told me, so it is:

    #content .entry #my-header ul {
    list-style: none;
    padding:0px;
    margin:0px;
    }

    As far I understand, this is the place to put all styling that will affect all the menu, right?

    Thanks

  21. DMBarber
    Member
    Posted 6 months ago #

    No bother. When writing css a * is used as a wild card. This means it will automatically substitute for any selector. When used by itself, it means "everything" which in this case makes padding and margins for everything a value of 0. Sidenote: 0 can be used alone, you do not need px.

    To target your specific list, you should use the selector:

    #content .entry #my-header ul

    to avoid confusing the style sheet (actually the browsers interpretation of the style sheet). So it will be:

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

    Hope that helps.

  22. DMBarber
    Member
    Posted 6 months ago #

    You got it right. Good job!

  23. Goodvalley
    Member
    Posted 6 months ago #

    Ooops

    That was intended to center the list in the post, but it remains on the left side... mmmm, why is that?

  24. DMBarber
    Member
    Posted 6 months ago #

    You simply removed the "space" around your list. To center it, you need to define its width as less than its parent container and add 'auto' to the left and right margin. Try this (this is untested, but should work. 80% means 80% of the parent container, you make it more or less to suit your needs):

    #content .entry #my-header ul {
    display: block;
    width: 80%;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    }
  25. Goodvalley
    Member
    Posted 6 months ago #

    Thanks DMBarber, I owe you a beer or two!

  26. DMBarber
    Member
    Posted 6 months ago #

    Happy to help.

  27. Goodvalley
    Member
    Posted 6 months ago #

    Um, it's not working.

    Anyway, I will finish all design and details, after that I will post if there is still that issue or another. I want to try to solve it myself, I'm asking too much and that's not fair.

    See you later!

  28. DMBarber
    Member
    Posted 6 months ago #

    You will need to seperate your list styling from the "centering" styling and be very specific about it. In Firebug, this works:

    #content .entry #my-header ul {
    list-style: none;
    }
    
    #content .entry #my-header ul.my-menu {
    padding: 0;
    margin: 0 auto;
    display: block;
    width: 80%;
    }

    No bullets and centered.

  29. Goodvalley
    Member
    Posted 6 months ago #

    Aaah, that was what I was thinking...

    I'm finishing the whole thing, now I'm adding my own designing details, let's see if I can get it right.

    Thanks, I will post the final code.

  30. Goodvalley
    Member
    Posted 6 months ago #

    Yeah, it's working...

    Now I'm fighting with borders and some other details, let's see if I'm done within an hour...

Reply »

You must log in to post.

About this Topic