Need help? Check out our Support site, then


Changing menu design on Twenty Eleven

  1. kerrymurrayphotography
    Member

    Hi there

    I have the Custom Design upgrade on this blog: http://piteiraphotography.com/ and so far I am loving the little tweaks and changes I have been able to make to the CSS, with the help of this forum. I recently came across another blog using the same theme and really like the way they have the menu laid out. (http://www.florencefinds.com/)

    I am aware that the blog I am referring to is not a wordpress.com blog and I am also aware of the differences between wordpress.com and .org. My question is how would I be able to achieve a similar look on my blog with the custom design upgrade? I am not looking to made an identical copy but I particularly like that the black boxy effect is gone, and the fact that the font is larger than the default.

    Any help or tips would be hugely appreciated! Thanks so much.

    The blog I need help with is piteiraphotography.com.

  2. You can view the styles the http://www.florencefinds.com site is using here:
    http://www.florencefinds.com/wp-content/themes/twentyeleven/style.css

    However, instead of using the same CSS they have, I would recommend copying the "=Menu" section of the stylesheet for your http://piteiraphotography.com/ blog and then adjusting all of the colors and removing lines you didn't modify. Also note that you can adjust fonts on the Appearance → Custom Design → Fonts page.

    Here is an example you can start with:

    #access {
    	background: white;
    	-webkit-box-shadow: none;
    	-moz-box-shadow: none;
    	box-shadow: none;
    	border-left: 1px solid #f9f9f9;
    	border-right: 1px solid #f9f9f9;
    }
    #access a {
    	color: black;
    	font-family: “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, sans-serif;
    
    }
    #access li:hover > a,
    #access ul ul :hover > a,
    #access a:focus {
    	background: white;
    }
    #access li:hover > a,
    #access a:focus {
    	background: white;
    	color: black;
    }

    Adjust the colors and font stack as necessary.

  3. kerrymurrayphotography
    Member

    Thanks so much, designsimply, and sorry for the delayed reply. I also see that wordpress has recently introduced customs colours, whcih is fantastic, so I will play around a bit with that too. Thank you!!

Topic Closed

This topic has been closed to new replies.

About this Topic