WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Twenty eleven child: how to put site title and site description on same line (14 posts)

  1. kubegusa
    Member
    Posted 1 year ago #

    Hi

    I have a twenty eleven child theme. http://www.sparklynx.be/preview/bric_consult/

    I want the site title and site description to be on the same line, in 2 different colors. The easiest way I can think of is to tell the CSS to put those two on the same line.

    But because they are positioned in different ways, I'm struggling to make that happen... Any pointers would be greatly appreciated!

    This is my code:

    /*style and position site description*/
    #site-description {
    color: #b9b9b9;
    font-size: 60px;
    text-align:right;
    font-family: Rockwell Extra Bold;
    margin: 0 0 0 0;
    
    }
    
    /*style and position site title*/
    #site-title {
    font-family: Rockwell Extra Bold;
    text-align:left;
    padding: 3em 0 0;
    
    }
    
    #site-title a  {
        color: #7A7A7A;
        font-size: 60px;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;
        float: right;
    }
  2. paulwpxp
    Font hero
    Posted 1 year ago #

    First of all, reset everything to default (meaning disregard any modifications you've made.)

    then assign this to #site-title and #site-description

    #site-title, #site-description{ display:inline-block; clear:none;}
    
    #site-title {/* font-size and font-color margin padding  */}
    
    #site-description {/* font-size and font-color margin padding  */}

    Basically the header tag <h1> <h2> .. <h6> are block element so it's display:block by default so we have to make it inline and also to keep the block level properties like margin that is why the display:inline-block is needed.

    Edit: changed class to id ( thanks to @alchymyth )

  3. alchymyth
    Forum Moderator
    Posted 1 year ago #

    @paulwp
    you seem to be referring to Twenty Twelve with the css classes;
    this is about Twenty Eleven which does use css ids.

    the 'clear: none;' and 'display: inline-block;' are good recommendations.

    as a pure formatting issue, this question might rather belong into a css forum like http://csscreator.com/forum

    edit:
    thanks ;-)

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    @alchymyth

    Thanks, you are right, edited my comment above already.

    and yes, i need more coffee :)

  5. kubegusa
    Member
    Posted 1 year ago #

    ok was confused for a moment, trying that now. thanks for both your replies!

  6. kubegusa
    Member
    Posted 1 year ago #

    hm.. when I add your code, it works BUT:
    font color and size for the site title are defined through #site-title a{} and when I add that, it messes it up again...

    my current code:

    #site-title, #site-description, #site-title a { display:inline-block; clear:none;font-family: Rockwell Extra Bold;}
    
    #site-description{font-size: 50px; color: #5f82ab; margin: 0 0 0 0; padding: 0 0 0; }
    
    #site-title a  {
        color: #5f82ab;
        font-size: 70px;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
        margin-top: 0;}
  7. paulwpxp
    Font hero
    Posted 1 year ago #

    It's the margin and padding of #site-title assigned in parent theme that need to be adjusted. Use the code below, it resets everything first then the rest is the details adjustments which depend on the design - how you like the text to be placed.

    /* reset all parent's  */
    #site-title, #site-description, site-title a
    {display:inline-block; clear:none; margin:0; padding:0;}
    
    /* detail adjustments */
    #site-title a
    {color:steelblue; font-size:64px; line-height:1; margin-right:16px;}
    
    /*  detail adjustments  */
    #site-description
    {color:skyblue; font-size:32px; line-height:1;}
    
    /* adjust top padding here */
    #branding hgroup
    {padding-top:48px;}
  8. kubegusa
    Member
    Posted 1 year ago #

    Oh thank you so much! That worked wonderfully!

    I wanted to align the text from the right, but the text align: right; didn't work, so I added:

    #site-title, #site-description, site-title a
    {display:inline-block; clear:none; margin:0; padding:0; float: right;}
    .

    The new issue that arises is that the site title and description are now 'glued' together. I've been researching how to get a space between the words but haven't found it so far. Any ideas?

  9. Andrew
    Forum Moderator
    Posted 1 year ago #

    Look up the CSS property margin. This level of CSS support can be provided through CSS-specific forums.

  10. kubegusa
    Member
    Posted 1 year ago #

    Thank you for that. Yes, I'm finding it difficult to figure out what the right code is to play with. Like, I don't understand what the 'margin-right:16px;' is doing in the code above. To me, it looks like it's not doing anything. I will look into the CSS specific forums for more info and post my solution here before closing.

  11. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    It looks like the problem here is the "cascade" of CSS -- later styles take precedence -- and the last style for that element is this:

    #site-description {
        color: #B9B9B9;
        font-family: Rockwell Extra Bold;
        font-size: 50px;
        line-height: 1;
        margin-right: 10px;
    }

    Adding a margin there works fine in Firebug.

  12. kubegusa
    Member
    Posted 1 year ago #

    Yess.. that worked. Thank you. I've been looking for the right CSS beginners course, but what I've found so far doesn't really explain the basic concepts enough for me to really grasp it. I'll keep looking though. And thank you all for your support in the meantime! Much appreciated.

  13. paulwpxp
    Font hero
    Posted 1 year ago #

    @kubegusa

    I noticed you switch Site Title and Tagline ?

    If you love your client, don't do that.

    Site Title is used site wide for <title> tag. This is important, you can't switch its place with Tagline. Use sitename for sitename and use tagline for tagline, it's wrong to switch them for the sake of aligning text.

    The last code I gave you work, to align the whole thing to the right just add float:right to the last selector.

    /* adjust top padding here */
    #branding hgroup
    {padding-top:48px;float:right;}

    So, same code from my previous but with last selector added float:right; that's it.

    and yes, Andrew is right, this belongs to CSS-specific forum, but well we've come this far now, so let's just get it done (the right way) and move on.

  14. kubegusa
    Member
    Posted 1 year ago #

    Gosh thanks, that is a much better solution. This community is so great. Gratitude!

Topic Closed

This topic has been closed to new replies.

About this Topic