Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Editing CSS on the twenty eleven theme

  1. kerrymurrayphotography
    Member

    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: http://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.

  2. designsimply
    Staff

    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%;
}

  3. kerrymurrayphotography
    Member

    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!

  4. designsimply
    Staff

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

  5. kerrymurrayphotography
    Member

    Hi,

    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.

  6. thesacredpath
    Staff

    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.

  7. kerrymurrayphotography
    Member

    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!

  8. kerrymurrayphotography
    Member

    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?

  9. kerrymurrayphotography
    Member

    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.

  10. thesacredpath
    Staff

    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;
}

  11. designsimply
    Staff

    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;
}

  12. thesacredpath
    Staff

    +1 on centering.

  13. kerrymurrayphotography
    Member

    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!)

  14. thesacredpath
    Staff

    The following will hide it from the blog page.

    .blog .sticky {
display: none;
}

  15. kerrymurrayphotography
    Member

    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.

  16. thesacredpath
    Staff

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

    :-)

  17. kerrymurrayphotography
    Member

    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!

  18. thesacredpath
    Staff

    You are welcome.

  19. kerrymurrayphotography
    Member

    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!

  20. designsimply
    Staff

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

  21. kerrymurrayphotography
    Member

    Hi designsimply

    Thanks so much, and sorry about not starting a new thread, I will do that next time.

    So I've put the code in and it takes away the Title but doesn't actually show the image... when you hover the mouse over the area it shows as a link so there is something there, but you can't see what it is... any ideas what I've done wrong?

    Thanks again!

  22. designsimply
    Staff

    It's because of a mistake in my code. :)

    Instead of this:

    url(http://piteiraphotography.files.wordpress.com/2011/12/piteira200x300.jpg?w=150&h=100) no-repeat;

    Use this:

    background: url(http://piteiraphotography.files.wordpress.com/2011/12/piteira200x300.jpg?w=150&h=100) no-repeat;

  23. kerrymurrayphotography
    Member

    Fabulous! Thank you! And then if I wanted to change the image dimensions I would just adjust the height and width accordingly?

    Thanks so much, it looks great!

  24. designsimply
    Staff

    Yay! :)

    Exactly right about adjusting the height and width. You'd want to adjust the query string (this part "?w=150&h=100") as well as the separate height and width settings.

  25. kerrymurrayphotography
    Member

    Ok, so I've made the logo a bit bigger, but now would I be able to reduce the amount of white space above the logo, maybe bring the search bar down a bit, to the same level as the logo, and have less white above?

    Thank you so much for your help!

  26. designsimply
    Staff

    On http://piteiraphotography.com/ right now, the search bar and the logo are actually lined up, however it looks like they aren't because there's extra white space in the logo itself. You should create an update a logo without the extra white space and use that in your CSS.

    Use this to see what I mean about the white space in the image:

    #site-title a {
border: 1px solid red;
}

    Use this to adjust where on the page the site title and search form appear:

    #site-title {
padding-top: 2em;
}
#branding #searchform {
top: 2em;
}

  27. kerrymurrayphotography
    Member

    You are a star, designsimply I could kiss you, thanks so much for all your help! And I promise I will start a new thread for any new questions... ;)

    Yay, I'm so happy! xxx

  28. designsimply
    Staff

    Cheers! :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags