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

Viewing 15 replies - 1 through 15 (of 18 total)
  • 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

    Thread Starter osceoladesign@gmail.com

    (@osceoladesigngmailcom)

    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%5D

    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.

    Thread Starter osceoladesign@gmail.com

    (@osceoladesigngmailcom)

    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.

    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.

    Thread Starter osceoladesign@gmail.com

    (@osceoladesigngmailcom)

    changed it to class, and there is no change.

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

    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

    Thread Starter osceoladesign@gmail.com

    (@osceoladesigngmailcom)

    Did that, and still no change.

    [please do not bump]

    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.

    Thread Starter osceoladesign@gmail.com

    (@osceoladesigngmailcom)

    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.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    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.

    Thread Starter osceoladesign@gmail.com

    (@osceoladesigngmailcom)

    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.

    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.

    Thread Starter osceoladesign@gmail.com

    (@osceoladesigngmailcom)

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

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Styling Links’ is closed to new replies.