Need help? Check out our Support site, then


Need help with css customization

  1. Hi,

    I am having some difficulty customizing the twenty twelve theme (I did purchase the upgrade). I'm trying to do a few things and thought I'd just list all of them at once. I'm not a complete computer novice but am not versed in CSS either...so, really need some help please.

    FONTS - how do I: 1) Change the color of the site title 2) Change the font size of the site subtitle without it effecting the body text font size or the body titles 3) Change the font size of the body titles without it effecting the body text font size or the site subtitle.

    IMAGES: When I insert an image onto a page (aligned to the left), it automatically includes a border and padding around the image...it's actually fine except that the padding around the bottom of the image is twice as thick as the side, which prevents the text to wrap uniformly around the right and bottom of the image. How do I change the padding size around the bottom of the image?

    TEMPLATE DESIGN: This template has a line of color underneath the header image, where the page links are embedded. Is it possible to make that line thicker?

    Thanks in advance...hope not too much trouble...I did search for this info first.

    The blog I need help with is vtcounseling.com.

  2. You're using Twenty Eleven, not Twenty Twelve.

    To change the color of the blog title, add this and replace 456789 with the hex for the color you prefer:

    #site-title a {
        color: #456789;
    }

    To change the font size of the tagline, add this and change the value:

    #site-description {
        font-size: 14px;
    }

    To decrease the space below images, add this and decrease the value:

    img.alignleft, img.alignright, img.aligncenter {
        margin-bottom: 1.625em;
    }

    To increase the height of the nav bar, add this and increase the value:

    #access a {
        line-height: 3.333em;
    }
  3. austincouplescounseling
    Member

    ugh...twenty eleven, I knew that. thanks so much for your time and help.

  4. oh, and the above member is me too...thanks again Justpi!

  5. Hi again...one more css help question with twenty eleven theme...Is there a way to decrease the margins, especially the side margins of the main context section?

  6. You're welcome.

    To decrease the side margins of the page content, add this and increase the percentage:

    .singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
        width: 68.9%;
    }
  7. wow...fabulous...once again, thanks!

  8. Hi there yet again! The help I've been receiving here has been so useful so thanks again upfront!

    I'm wondering now....is there a way to insert an image (a logo) into the site title section (to the left of the title) in the twenty eleven theme? If so, can you point me in the right direction?

  9. Yes, it's possible: you can insert it as a background to one of the elements of the section.
    But please start a new thread about this: the whole point of this forum is that Q&As should be available to others too, so a different question requires a different thread, with a characteristic title.
    Make sure you clarify a couple of things: a) Does "to the left of the title" mean you want to displace the title and the tagline to make room for the logo? b) Should the logo be a link to your homepage like the title is?

    In the meantime, a few remarks on the CSS you've added:

    You've added this:

    #site-title {
        margin-right: 270px;
        padding: 8.65625em 0.1px 0.1px;
    }

    That margin is the original one, so you don't need to specify it; and 0.1px is practically nothing, so turn it to real nothing. That is, change the above to this:

    #site-title {
        padding: 8.65625em 0 0;
    }

    You've added this:

    #site-title a {
        font-size: 25px;
    }
    #site-title a {
        line-height: 0.01em;
    }
    #site-title a {
        color: #753023;
    }

    You don't need to use the same selector three times for three changes. Also, your font-size rule has no effect, because there's another rule in the CSS of the theme that overrides yours: at the moment the font size of your title is 39px. If you want it 25, you need to force it by adding the "!important" tag. In all, replace the above with this:

    #site-title a {
        color: #753023;
        font-size: 25px !important;
        line-height: 0.01em;
    }
  10. You could add a background image to your header.

    #banner {
    background: url('logo url') no-repeat;
    background-position-x: -15px;
    background-position-y: 15px;
    }

    Depending on the size and shape of your logo use background-position to place it.

  11. Thanks mrdirby...I'll give it a try.

    justpi...thanks for the information about what I've done so far. I'm learning a lot. I will start a new thread about the image and the title page as you requested. thanks again for your time.

  12. @mrdirby:
    a) There's no "#banner" selector on Twenty Eleven.
    b) The properties you suggest aren't standard CSS. If you position the image that way, then instead of this:
    background-position-x: -15px;
    background-position-y: 15px;

    you should write:
    background-position: -15px 15px;

  13. @justpi

    Sorry I meant to type #branding.

  14. Hello!

    Your help has been very useful. I was wondering if you could help me figure out one small thing. How do I change the body font of my blog? I've picked the "apolline-sc" font to use but can't figure out how to write it out. Thanks!

  15. Thanks mrdirby. It does help for some stuff. There are others things I wante to do with the site that I think can only be done with more thorough knowledge of html and CSS, which is where this forum comes in. Been invaluable to me! Thanks for your help.

Topic Closed

This topic has been closed to new replies.

About this Topic