Need help? Check out our Support site, then

Adelle Theme: Centering the Site Title & Tagline

  1. cassandramae90

    Hello! Trying to center my site title and tagline. I am currently using the Adelle theme and have no clue how to go about this since I'm not familiar with CCS.

    My blog is Cassandra Mae Designs

    The blog I need help with is

  2. cassandramae90

    Also, I should have stated this earlier, but I would like to know how to accomplish the following:
    - How to know how to add an image to the header. I am thinking of keeping it to the left of the site title and tagline.
    - Customizing the sidebar widget titles.
    - Edit the main body and sidebar page breaks.
    - Customizing the navigation bar to where it will have drop down menus for my different categories and pages.

    I know this looks like a lot, but I don't expect all my questions to be answered. I've been looking for answers throughout the forums and have not been very successful. :/

  3. You have centered the title and tagline, added a header image, and created a custom menu with dropdowns etc. So we're left with these two:

    - Customizing the sidebar widget titles.

    What exactly would you like to change?

    - Edit the main body and sidebar page breaks.

    Page breaks? You probably mean something else.

  4. cassandramae90

    I'm hoping to change them all to a different color and font. I finally realized how to utilize the "Inspect Element" option through my browser, but I wasn't sure how to find the code for this specific one.

    Sorry about that! I was talking about the lines that separated the posts and the zigzag elements in the sidebar that separated my widgets.

  5. a) Add this:

    .widget-title {
    color: #D62A04;
    font-family: ambroise-std-1,ambroise-std-2,Lora,Georgia,"Times New Roman",serif;

    b) The lines are two separate bottom borders to each post, and the zigzag element is a background image to each widget. Once again, what exactly would you like to change? Please be precise when asking CSS questions!

  6. cassandramae90

    I want to change the colors and, if possible, change the style or look to them. :)

  7. cassandramae90

    Also, the code that you listed did not work for me.

  8. a) I'm not seeing the code I suggested in your custom CSS, so try it again please (it worked fine in my test blog).

    b) To change the color of the borders below the posts, add this (and replace 456789 with the hex for the color you prefer):

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

    If you want some other change, specify please: "style or look" is vague.

    c) For the same reason, I still don't know what you want to do with the zigzag lines. If you want a plain border, add this:

    .widget {
    background-image: none;
    border-bottom: 1px solid #456789;

    If you want a different image, you need to replace the original with your own. This is the original:
    Copy it to your computer, modify it in Photoshop or other image editing application, upload it to your blog via Media > Add New, click Edit, copy the complete image URL from the File URL field of the Save module, then add this CSS:

    .widget {
    background-image: url("IMAGE URL HERE");
  9. cassandramae90

    a) So, I tried it again and it worked about 90%. It didn't work for the Facebook & Tags widget.

    b) The first code you posted was perfect! Worked amazingly. :)

    As far as the second code, that actually was exactly what I was talking about. I didn't realize that is called a "border."

    I know you are frustrated with me, but thank you for your help! :)

  10. You're welcome!

    If I was frustrated I would have stopped helping you! (Unlike thesacredpath I'm a volunteer, so I'm not obliged to help if I don't feel like it.) I'm just trying to emphasize the importance of being precise: we both lose time when your questions don't describe what you want as exactly as possible (for instance: I want the zigzag but I want it orange instead of grey, or I want a different shape, or I want a straight thin yellow line instead of the zigzag, and so on).

    The code for the widget titles didn't work for the Tags and the FB widget because these two are links instead of plain text, and I hadn't noticed that. Turn this:

    .widget-title {
    color: #FF7150;
    font-family: [ETC]

    to this:

    .widget-title, .widget-title a {
    color: #FF7150 !important;
    font-family: [ETC]
  11. cassandramae90

    Understandable! I will make sure to be more specific next time. :)
    Thank you again! It worked perfectly.

  12. You're welcome.
    I'm seeing you changed the widget border: nice! I was going to suggest something like this, as the thin orange line was too harsh in relation to the rest.

Topic Closed

This topic has been closed to new replies.

About this Topic