Need help? Check out our Support site, then


Adelle CSS questions

  1. impromptugourmand
    Member

    Hi there,

    I'm a CSS Luddite so please excuse the rudimentary questions.

    1) How do I centre the blog title?
    2) How do I customize it to look like what this lady did:
    http://helloladyblog.com/
    I imagine it has something to do with creating my own image but I have no idea what to do with it after that.
    3) How do I get rid of the squiggly lines in the sidebar? I already found code for making a solid line, just haven't figured out how to remove the squiggles.
    4) How do I centre the menu in the ribbons at the top and bottom of the site (although I suppose if I have it on continuous feed there will never be a bottom ribbon)?

    Thanks for your help!

    The blog I need help with is breedingchaos.com.

  2. Hi there,

    1) How do I centre the blog title?

    To center the text based title, add the following CSS.

    .site-title {
        text-align: center;
    }

    2) How do I customize it to look like what this lady did:
    helloladyblog.com/

    That is a header image. Go to Appearance > Customize > Site Title and deselect "Display Header Text" and save.

    Next go to Appearance > Customize > Header and upload your header image and save. The image should be 1040px wide x 250px high.

    3 & 4: I see you figured out how to remove the squiggly line and center the top menu. I'm not seeing a menu on the bottom of your site. The bottom ribbon is centered on the overall content area (post area + sidebar) right now, it is just that the sidebar doesn't go down that far and it appears like it isn't centered.

    If you want the bottom ribbon to be the width of the posting area, you can add the following media query CSS rule. What it does is to set the ribbon width the same as the content area down to the width where the sidebar moves to the bottom of the page and then reverts back to the original 100% width setting.

    @media screen and (min-width: 680px) {
    .site-footer {
        max-width: 65%;
    }
    }
  3. impromptugourmand
    Member

    Thank you so much for your help! Sadly, I don't think I have figured out how to remove the squiggly lines or centre the menu on the top ribbon. Maybe you're seeing something I'm not. I tried to wing it on the code and from what I'm seeing, it didn't work.

  4. impromptugourmand
    Member

    OK, I figured out how to centre the menu in the ribbon but still working on the squiggles. I've also been trying to remove the all caps from the heading titles of the sidebar with little success.

  5. Hmmm, sorry, when I first looked at your site, I was sure the lines were gone. The squiggly line is a background image set in .widget. Add the following CSS to remove the squiggly lines.

    .widget {
        background: none;
    }

    To get rid of the upper case on the widget titles, add the following CSS.

    .widget-title, .widgettitle, h2.widgettitle {
        text-transform: none;
    }

    Sorry for missing things the first time. :)

  6. impromptugourmand
    Member

    Thank you so much! And please don't apologize. You've been a huge help.

  7. impromptugourmand
    Member

    Hello again,

    I have a couple more questions regarding fonts and colours.

    How do I change the font colour for post titles. It seems to be green and I don't know how it got that way.

    Also, at the end of the about and contact pages, for example, there's a double green line. Is there anyway to change the colour of that or eliminate it all together?

    Lastly, how do I change the colour of the font for the sidebar titles?

    Thanks again for all your help!

  8. How do I change the font colour for post titles. It seems to be green and I don't know how it got that way.

    I don't see any code that would make your post titles green - did you figure this one out or do you still need help with it?

    You can change the default grey colour of post titles in Adelle by using this CSS:

    .entry-title, .entry-title a {
     color: #xxxxxx;
    }

    Just change xxxxxx to whatever hex colour code you like.

  9. Lastly, how do I change the colour of the font for the sidebar titles?

    You can do that by adding a colour to your existing widget-title CSS.

    Current:

    .widget-title, .widgettitle, h2.widgettitle {
         text-transform: none;
    }

    Change to:

    .widget-title, .widgettitle, h2.widgettitle {
         text-transform: none;
         color: #xxxxxx;
    }

    Again, change xxxxxx to your desired hex code.

  10. Also, at the end of the about and contact pages, for example, there's a double green line. Is there anyway to change the colour of that or eliminate it all together?

    To eliminate that double line, add:

    .hentry:after, body.single .content-area:after, .hentry footer:after, body.single .site-content:after {
        border-color: #ffffff;
    }

    To change the colour, replace ffffff (white) with a different hex code instead.

    This will also affect the lines below each post on your blog, so everything matches.

    If you have any new CSS questions, could you please start a new thread? Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic