WordPress.org

Ready to get started?Download WordPress

Forums

Styling Links (19 posts)

  1. osceoladesign@gmail.com
    Member
    Posted 1 year ago #

    I am using a child theme derived from twenty eleven, and want to make a separate menu on the left hand side of the home page, and I do not mean the sidebar. I have been trying to add a custom vertical menu for the links my client wants for the training that they are going to be doing in the next couple of years. I added the css it into the style sheet, and uploaded the images, and nothing that I do seems to be able to implement the menu. Is there something in twenty eleven that over rides what I am trying to do here? I don't want to change the main menu, and the custom menu in the theme is not what I am looking for either. This is the link: http://aiafs.net and the links are on the left hand side.

  2. J
    Member
    Posted 1 year ago #

    Hi,

    The style of the links is been picked up by the usual default colors in a stylesheet. You would be best defining the links to there parent div. As I have noticed you have wrapped your required link items in there own divs #cssmenu. So for instance to change the links from Blue to Black you would use the following code

    #cssmenu a { color:#000}

    hope this helps
    Cheers
    J

  3. osceoladesign@gmail.com
    Member
    Posted 1 year ago #

    This is what I put in the style sheet, but when I inspect the elements it is not there:

    #cssmenu {
    	width: 100%;
    	margin: 0;
    	padding: 0;
    	display: block;
    text-decoration: none;
    list-style-type: none;
    }
    #cssmenu ul {
    	display: block;
    	list-style: none;
    	margin: 0;
    	padding: 0;
    text-decoration: none;
    list-style-type: none;
    }
    #cssmenu ul li {
    	display: block;
    	float: left;
    	width: 100%;
    	margin: 0;
    	padding: 0;
    	background: transparent url(http://aiafs.net/images/bg-bubplastic-button.gif) top left no-repeat;
    text-decoration: none;
    list-style-type: none;
    }
    
    #cssmenu ul li a {
    	display: block;
    	margin: 0;
    	width: 100%;
    	padding-left: 35px;
    	text-transform: uppercase;
    	font-family: 'Helvetica Neue',helvetica,'microsoft sans serif',arial,sans-serif;
    	font-size: 70%;
    	color: #FFFFFF;
    text-decoration: none;
    list-style-type: none;
    	background: transparent url(http://aiafs.net/images/bg-bubplastic-button.gif) top left no-repeat;
    }
    
    #cssmenu ul li a span {
    	display: block;
    	margin: 0;
    	width: 100%;
    	height: 22px;
    	padding-top: 5px;
    	padding-right: 35px;
    	background: transparent url(http://aiafs.net/images/bg-bubplastic-button.gif) top right no-repeat;
    	cursor: pointer;
    }
    
    #cssmenu ul li a:hover,
    .cssmenu ul li.active a {
    	background: transparent url(http://aiafs.net/images/bg-bubplastic-h-gray.gif) top left no-repeat;
    color: red;
    font-weight: bold;
    }
    #cssmenu ul li a:hover span,
    #cssmenu ul li.active a span {
    	background: transparent url(http://aiafs.net/images/bg-bubplastic-h-gray.gif) top right no-repeat;
    }

    [there is actually no need to post css when you have a link to your site - general, please mark any posted code - http://codex.wordpress.org/Forum_Welcome#Posting_Code

  4. J
    Member
    Posted 1 year ago #

    Ok cool,

    Think I may have spotted the problem. At the bottom of your stylesheet you have

    a {
    color: #1982d1;
    font-weight: bold;
    }
    a:focus,
    a:active,
    a:hover {
    text-decoration: none;
    color: red;
    font-weight: bold;
    }

    this is overriding the styles you have defined above, trying moving the code I referenced above your custom stylings and that should work.

  5. osceoladesign@gmail.com
    Member
    Posted 1 year ago #

    I moved it over it and then deleted it, and no change. It is being imported from the twenty eleven style sheet. I do want the rest of the links that way, but just want the cssmenu on the vertical training links to show up the way I want it to.

  6. J
    Member
    Posted 1 year ago #

    Ok just noticed you have duplicated #cssmenu . Duplicating the IDs is probably your problem here. I noticed this when validating the site this can sometimes pick out the problems for you.

    Try changing them to classes that should crack it.

  7. osceoladesign@gmail.com
    Member
    Posted 1 year ago #

    changed it to class, and there is no change.

  8. J
    Member
    Posted 1 year ago #

    You also need to change all the references in your stylesheet from #cssmenu to .cssmenu

  9. J
    Member
    Posted 1 year ago #

    Sorry just realised half my post is missing. The stylesheet is still applying the styles as if the div was an ID ie - #cssmenu .

    It needs to apply the styles you wrote to a class ie - .cssmenu .

    At the minute there technically is no style to the div class cssmenu

  10. osceoladesign@gmail.com
    Member
    Posted 1 year ago #

    Did that, and still no change.

    [please do not bump]

  11. alchymyth
    Forum Moderator
    Posted 1 year ago #

    for fundamental formatting problems, consider to ask at a dedicated css forum http://csscreator.com/forum

    or try working with a browser inspection tool such as Firebug to find out what you need to change.

    right now, the menu styles are within an @media query and only get applied in browers below 800px width.

  12. osceoladesign@gmail.com
    Member
    Posted 1 year ago #

    I am asking here because he @media query or something else in the twenty eleven theme is not allowing me to format the links that I want formatted. Twenty eleven is a basic Word Press theme that comes in Word Press. I have tried the inspect tool within Chrome. It is not telling me anything.

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    Google Chrome's Inspect Element tool reveals Alchymyth's media query point.

    Revise the tool's documentation, then resize the browser to confirm.

    Although the issue is within WordPress, the underlying issue is fundamentally concerned with CSS.

  14. osceoladesign@gmail.com
    Member
    Posted 1 year ago #

    I found a way to do this. I put a link to an external style sheet in the head section, and now it is recognising the rules. It is not the media query thing.

  15. alchymyth
    Forum Moderator
    Posted 1 year ago #

    I am asking here because he @media query or something else in the twenty eleven theme is not allowing me to format the links that I want formatted.

    nothing to do with Twenty Eleven or WordPress - this is lack of understanding css

    - and this forum is not to place to teach those basics.

    what I was pointing out is that you started a @media query in your style.css and added your menu styles into the open media query, instead of closing the media query first.

  16. osceoladesign@gmail.com
    Member
    Posted 1 year ago #

    As I said, I found my solution on my own. No thanks to you. And I don't like your attitude. I am not a beginner when it comes to css. I might not know everything but I do know some things. This forum on WordPress.org has been a place where newbies and everyone has been able to ask questions about anything related to WordPress. Evidently it is no longer so. Now we have "the Sweeper" to sweep any questions under the rug. :(

  17. esmi
    Forum Moderator
    Posted 1 year ago #

    This forum on WordPress.org has been a place where newbies and everyone has been able to ask questions about anything related to WordPress.

    Actually, that's not the case at all. It is beyond the scope of these forums to deal with general CSS issues. Far better to use a dedicated CSS resource such as http://www.css-discuss.org/ instead - as was originally suggested.

    Furthermore, personal comments aimed at forum volunteers are not welcome here. There was nothing untoward in any of the responses that you received.

  18. alchymyth
    Forum Moderator
    Posted 1 year ago #

    Now we have "the Sweeper" to sweep any questions under the rug.

    :-)

  19. osceoladesign@gmail.com
    Member
    Posted 1 year ago #

    Whatever... As I said, I found my solution on my own. Won't ask for help again. I found the attitude in here offensive.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.