WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Centering the site-title - clean-retina theme (14 posts)

  1. PierreB.
    Member
    Posted 10 months ago #

    Hi folks,

    I am really sorry to bring such a 'anything-but-new" thread, but i couldn't find a tweak that works for me.

    So i am really looking forward to move my site title (and slogan) in the center of the page.

    Here is the site : http://cavepopo.hd.free.fr/wordpress/

    I've been trying to check the firefox dev tools, but even if i am kind of understanding the code, i cannot find the good place and the good piece of code to achieve my goal.

    I am using a child theme by the way.

    Thanks for your time supporting me (and other!)

  2. core-basic
    Blocked
    Posted 10 months ago #

    h1 {
      text-align: center;
    }
  3. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 10 months ago #

    In conjunction with:

    #site-logo {
     width: 100%;
    }
  4. PierreB.
    Member
    Posted 10 months ago #

    Thanks you for being so quick !

    I almost tried to do that (the <h1> rule) before posting, but i thought this would affect every <h1> text, and that what happened when i follow your suggestion core-basic.

    I am sure there is a way to have only the site-title centered, and i am also almost sure i did it the wrong, and that's why it affect all the site.

    Here is the code i put in my child-theme style.css

    /* Center the main navigation bar text */
    #access ul{margin: 0 auto; width: 669px; }
    
    /* Adjust the Site logo to my taste */
    #site-logo {
    /* The following line can be use to center the site slogan par rapport au site-title*/
    	text-align: left;
            float: left;
    	width: 100%;
            margin-top: 33px;
            margin-bottom: 3px;
    }
    h1 {
      	text-align: center;
    }
    
    #site-title {
            font: 95px 'Gentium Basic', serif;
            line-height:50px;
    }
    #site-title a {
            color: #5f85b0;
    }
    #site-title a img {
            vertical-align: inherit;
    }
    #site-title a span, #site-title a:hover, #site-title a:focus, #site-title a:active {
            color: #7A8FBA;
    }
    #site-description {
             font-size: 16px;
             color: #344465;
    }
  5. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 10 months ago #

    You need to clear your browser's cache if you want to see immediate changes.

  6. PierreB.
    Member
    Posted 10 months ago #

    Thanks you Andrew.

    I did not have any trouble checking the results, my only trouble are in the fact that every <h1> title is affected by the <center> declaration.
    At least that what i can see in my browsers (tried chrome and firefox).

    Do you think that clearing my browser cache would change this behaviour ?

    Thanks again for helping a php newbie (i really have to take the time to learn the basics...)

  7. core-basic
    Blocked
    Posted 10 months ago #

    You could do

    #site-logo {
    margin: 0 auto;
    }

    That will put the entire logo in the center butkeep the about text on the left hand bottom side of the title text.

    I was sad to see you didn't have Debian listed under your Linux menu. Lol

  8. PierreB.
    Member
    Posted 10 months ago #

    Hey core-basic,

    Yeah i just installed my first debain on my laptop 2 weeks ago, and the debian wiki is just perfect so i do not think i can add any value to this, i don't think i will be adding it to my Linux menu.

    Regarding my issue, does the last piece of code you provided is supposed to fix the fact that the <h1> <center> declaration has a site-wide effect ? (i don't think so).
    I tried this way (the margin: 0 auto) before posting but it did not work : is it supposed to work by itself ? I mean if it's alone (without the other statement you offers, you and Andrew) is it supposed to work ?

    Thank you both.

  9. WPyogi
    Volunteer Moderator
    Posted 10 months ago #

    <center> is deprecated code - don't use it.

  10. core-basic
    Blocked
    Posted 10 months ago #

    You site-logo div is floated left. Do you want everything in the header centered? If so add text-align to the site-logo div

    #site-logo {
        float: left;
        margin-bottom: 13px;
        margin-top: 39px;
        text-align: center;
    }

    Yogi is right as usual, don't use <center> It is a type of hack, and very old.

    If you don't want the about text centered, you'll have to make a few extra changes. You can't use margin: 0 auto if the width is too big.

    Might try

    #site-logo {
        margin-bottom: 13px;
        margin-top: 39px;
        margin: 0 auto;
    }
  11. PierreB.
    Member
    Posted 10 months ago #

    Ok, so i replace my whole '#site-logo' block by the one you provided core-basic, and the result is that only the site slogan is now centered (in regards to the site-title).

    To make thing clearer, what i want is to put the group ["site-title" + "site-description"] at the center of the header.

    Thank for all your support, again.

  12. core-basic
    Blocked
    Posted 10 months ago #

    Try making the site-logos width 100%

    #site-logo {
        width: 100%;
        float: left;
        margin-bottom: 13px;
        margin-top: 39px;
        text-align: center;
    }
  13. core-basic
    Blocked
    Posted 10 months ago #

    Oh I see. I just looked back at your site in firebug. Do this.

    #site-logo {
       margin: 0 auto;
        margin-bottom: 13px;
        margin-top: 39px;
        text-align: center;
    }

    The 100% width should work but I like this better. Whichever you like best though is what matters.

  14. PierreB.
    Member
    Posted 10 months ago #

    Looks like it does the trick !

    Thank you (marking the thread as resolved)

    By the way, your comment makes me realize there was an old page (the "news" page) that was lying into the darkness of the blog, i removed it, and i could not find a way to move your comment to the home page.

    Did you have the time to check my answer ? (Just in case : Yes you can add myblog to your network)

    just for the records, the code that fix my issue is :

    #site-logo {
    	margin: 0 auto;
    	margin-bottom: 13px;
    	margin-top: 39px;
    	text-align: center;
    }

Reply

You must log in to post.

About this Topic