Editing CSS on the twenty eleven theme

  • Author
  • #785634

    I recently purchased the Custom Design upgrade for my blog http://piteiraphotography.com/ and have managed to change a few things with the help of thesacredpath (see this thread from a few months back: https://en.forums.wordpress.com/topic/customising-the-duster-theme?replies=14)

    Now that I have put everything in place there were a few other things I was wondering if I would be able to tweak…

    1. Would it be possible to put a thin black line, or a drop shadow, around the edge of the blog, separating it from the background? I would like to make the background plain white, to keep things clean and simple, but with white on white the structure of the blog seems to disappear a bit… right at the bottom of the page there is a thin horizontal line which looks a bit like its a mid grey colour, would it be possible to continue that line all the way around the whole blog? I’m not sure if I’m using the correct terminology, or if I’m making much sense here… hopefully I am!

    Also, in the main menu area (the black part below the header image) would it be possible to use a bit more of the space on the left and right of the text, so that the last item (Client Area) can fit on the top line with the rest of the menu?

    Hopefully someone will be able to help, thanks so much for your time!

    The blog I need help with is piteiraphotography.com.


    To continue the same mid grey colour border from the bottom all the way around the blog in the Twenty Eleven theme, you can use this:

    #page {
    	border: 1px solid #ddd;

    To add a shadow, you can use a CSS3 rule. It will work in all the latest browsers but not IE8 or below.

    #page {
    	-webkit-box-shadow: 2px 2px 8px -4px #999;
    	box-shadow: 2px 2px 8px -4px #999;

    To adjust the margins inside the top navigation menu in the Twenty Eleven theme, try adding a rule like this:

    .menu-menu-container {
    	margin: 0 0 0 1.6%;

    Hi designsimply!

    Thanks so much for your fast reply! The border works perfectly, that was exactly what I was going for, thank you. I didn’t end up using the shadow since I liked the border better, and the incompatibility with older browsers also made me think its better to stick to the border.

    The menu adjustment doesn’t seem to be working though, I tried messing around and changing the figures but it didn’t seem to make any difference… my CSS knowledge leaves a lot to be desired, but from what I understand, the 3 zeros are the left, top, and right hand side dimensions? Or maybe not… either way, it doesn’t seem to be working… what have I done wrong?

    Also one other thing that I forgot to ask earlier (sorry for being such a nuisance)

    Is there any way to hide the featured post from showing up on the posts page (blog) and just being visible on the static landing page? It kindof looks a little bit lost stuck at the top of the blog page and I would prefer for the latest post to be the first thing veiwers see when the click through to the blog.

    Thanks so much for your help!


    The best practice when using advanced CSS3 rules is to make the site look good without them and then add on things (like box-shadow) for people who are using the latest browsers. The site doesn’t have to look exactly the same in every single browser. :) But if you personally like it better without a shadow anyway, then that’s the best choice for you.

    In a margin rule, the values correspond to the edges like this: margin: top right bottom left. So the rule I suggested before should make all of the margins 0 except for the left one which is set to 1.6%. I picked that number because I thought it looked good in my test, but you can pick a different number.

    Try this to start:

    .menu-menu-container {
    	margin: 0;

    Then try updating the last number to see the difference:

    .menu-menu-container {
    	margin: 0 0 0 15px;

    I looked at the Imbalance2 theme, and it’s designed to display a featured posts section on single posts and there isn’t an option to move them to a different page like a static front page. But you can turn the featured posts on or off from the Appearance → Theme Options page by changing the option that says, “Show sticky posts below a single post.”



    I’m still not having any luck with the menu margins… I have the code in place and have tried different numbers but its not making any difference.

    Also, the blog I am referring to is this one: http://piteiraphotography.com/ which is using the twenty eleven theme, not the blog attached to my avatar, sorry for the confusion! (Could that perhaps be the reason why the menu code isn’t working?) Twenty Eleven doesn’t have the “Show sticky posts below a single post.” option under Theme Options.

    Thanks again for your time, I really appreciate it.


    The left and right margin was originally set at 7.6%. Give this a try and adjust the 2.6% I’ve put in for the left/right margin as desired.

    #access div {
    margin: 0 2.6%;

    The first “0” is top/bottom and the second number (2.6%) is the left/right.


    Thank you thesacredpath, that worked perfectly. I changed it to 1.5% and it’s a little bit off centre, but not hugely, and it certainly looks much better than having the menu on 2 lines, so thanks a million!


    Oops… I’ve just noticed something while clicking through the site. The menu adjustments only work on the homepage, if I click through to any other page or post the menu goes back to being on 2 lines instead of one… Any idea what I did wrong?


    Ok, so I went back and fiddled some more with the numbers, ended up with 0.8% and then that way no matter which menu item is selected they all stay on the same line.


    At 1.5% you were on the ragged edge, and when you click on another tab, then that tab will go bold to show that it is the current page. On longer titles it is enough to push things to another line. What you can do is to slightly reduce the right padding on the tabs to give a little more cushion, but do realize that if someone has the zoom level on their browser set on the + side, or they have set a larger minimum font size, that things will again go to two lines. There is only so much you can do really since you are not in control of the user’s browser settings. Add this to your CSS and then you can tweak the right padding on the tabs a little if you wish (2.2125em is the original value).

    #access a {
    padding-right: 1.2125em;

    Ah, the .menu-menu-container I used was less specific than #access div which is used by the theme stylesheet and that’s why the margin I posted didn’t work for you. Sorry about that!

    I agree about adjusting the right padding. As soon as you do that, it might make the menu look offset. It might look better at that point if you also center it:

    #access div.menu-menu-container {
    	margin: 0;
    	text-align: center;
    #access ul {
    	margin: 0 auto;
    	display: inline-block;

    +1 on centering.


    Thank you both, that all worked perfectly, at least on my browser!

    Now the only thing that I stll haven’t managed to resolve is the question about the featured post:

    Is there any way to hide the featured post from showing up on the posts page (blog) and just being visible on the static landing page? It kindof looks a little bit lost stuck at the top of the blog page and I would prefer for the latest post to be the first thing veiwers see when the click through to the blog.

    This is the page I am referring to: http://piteiraphotography.com/blog/
    Is there any way to hide that sticky post at the top? I love it on the static landing page (home), but to have it again on the blog isn’t ideal… Is this possible?

    Thanks again to both of you for all your help, and Happy New Year (almost!)


    The following will hide it from the blog page.

    .blog .sticky {
    display: none;

    Awesome! Thanks so so much, it looks fantastic! I promise to wait a week or 2 before I bombard you with any more questions, you have been so helpful, I don’t want to wear out your generosity. :)

    Thanks again and have a great weekend.


    You are welcome, and little chance of wearing that out.



    P.S. You were right about the menu not looking the same on all browsers, I had a look at it on a friends laptop and its back to 2 lines again… Its a pity, but like you said, there not much I can do about other peoples browsers. Thanks again!


    You are welcome.


    Ok, I am back with more questions! This time courtesy of my business partner/husband/wanter-of-complicated-things…

    On this blog: http://piteiraphotography.wordpress.com
    Would it be possible to replace the title text with our logo? I have experimented with taking the title away altogether, but don’t like the look of the blog with the header image all the way at the top and also don’t like how the search bar then pops into the menu area below the header image. So we were wondering if we could “hide” the text and insert our logo in the same place?

    Is this just ridiculously complicated? I hope not… thanks again, in advance, for your help and patience!


    To replace the title with an image in the Twenty Eleven theme, try this:

    #site-title {
    text-indent: -9999px;
    #site-title a {
    url(http://piteiraphotography.files.wordpress.com/2011/12/piteira200x300.jpg?w=150&h=100) no-repeat;
    display: block;
    height: 100px;
    width: 150px;

    In the future, could you start a new thread in the forums when you have new questions? It will help keep everything readable and similar topics together which is helpful. :)

The topic ‘Editing CSS on the twenty eleven theme’ is closed to new replies.