Need help? Check out our Support site, then


Twenty Twelve Theme customization

  1. Hello,
    I have several questions using CSS in my blog zlatamai.com
    1. How can move navigation bar under my header picture?
    2. Is it possible to align navigation menu to the center of the navigation bar?
    3. Can CSS widen the main column?
    4. Is it possible to remove Reply section, that is just after the post title?
    5. Can I center the post title?
    Wow, so many questions!!! Hope, you'll help me, guys!
    Thank you in advance!

    The blog I need help with is zlatamai.com.

  2. Hi there, I think this will take care of everything you have asked. #3 will take a little playing as I explain below.

    Add the following CSS to your custom CSS by going to Appearance > Custom Design in your dashboard. Delete the informational text and add the following code.

    1. Moving nav below the header image:

    .site {
        position: relative;
    }
    
    .main-navigation {
        position: absolute;
        top: 330px;
        width: 960px;
    }
    
    .wrapper {
        margin-top: 60px;
    }

    2. Center navigation menu items:

    .main-navigation ul.nav-menu {
        text-align: center;
    }
    
    .main-navigation div.nav-menu > ul {
        display: inline-block;
    }

    3. The maximum width of the main content area is set in rem and the width of the post content area as a percentage, so it takes a little playing. Increase the .site max-width as you desire, and then start increasing the % width for .site-content until the sidebar disappears in the preview, and then back off till it comes back.

    .site {
        max-width: 68.5714rem;
    }
    
    .site-content {
        width: 65.1042%;
    }

    4. To remove the comment reply link below the post titles, add this:

    .entry-header .comments-link {
        display: none;
    }

    5. This will center the post and page titles for you.

    .entry-header .entry-title {
        text-align: center;
    }

    Let us know if you have any problems or further questions.

  3. Wow, you are my hero!
    Thank you so much for explaining everything so simple!

    I have another question. I use some color spots in my header picture. Is it possible to implement them in my topic. For example, to change ordinary posts separator (which is two narrow lines) to my color spots line? Or to add a spot (blur) to a post title?

    Sincerely,
    Zlata

  4. Zlata, you are welcome. You can add an image to the bottom of your posts easily with the following. Create the image you wish to use, upload it to your media library, get the URL of that image and replace URL OF IMAGE between the double quote marks with the URL of the image you wish to use. I've include a bottom margin declaration with an arbitrary 60px value, which you can edit to space things they way you want them.

    .site-content article {
    background: url("URL OF IMAGE") no-repeat scroll center bottom transparent;
    border-bottom: medium none;
    padding-bottom: 60px;
    }

    If you have any problems, or further questions, please let us know.

  5. This really works!!!
    I have to take several days off to try everything I learned from you. And then maybe some questions will appear again)))
    Thank you, thesacredpath)

  6. Hooray! Glad to have been of help, and do let us know if you have any further questions.

Topic Closed

This topic has been closed to new replies.

About this Topic