Need help? Check out our Support site, then


Adelle CSS- quite a few questions

  1. rebeccajeanwurm
    Member

    Hey all,

    I have a couple questions regarding how to change the Adelle theme to fit my tastes.

    1. Can I remove the black ribbon bar on the top and have the menu items titles changed to the dark gray that is used in the text on the side bar?
    2. Can I change the background of the post dates from the black to the same light grey that appears in the side bar widgets?
    3. Can I also change the background of the social media buttons on the widget area so they are dark gray and not black?

    Thank you all for any help you can offer!

    Blog: heybeccajean.com

    The blog I need help with is heybeccajean.com.

  2. Hi there, it looks like you have these under control.

    If you wish to change the background on the social media icons to a darker grey you can add this and then adjust as desired.

    #social-networks a {
        background: #CCCCCC;
    }

    If you wish to change the hover background color on the social icons, add this and adjust.

    #social-networks a:hover {
        background: #CC0000;
    }
  3. rebeccajeanwurm
    Member

    Hi there,

    I changed the color of the banner to white but I actually was wondering if there was a way to remove it altogether? The reason being that I still would ideally like the circles around the post date to be colored but in the theme if you change the color of the banner then you also change the color of the post date circle and the background for the social media icons. Is there a way to change those colors independently of one another?

  4. Hi there,

    Just to be sure, with 'banner' did you mean the ribbon bar (that used to be black)?

  5. rebeccajeanwurm
    Member

    Yes! It would probably help if I learned to call things the proper names. :)

  6. I see!

    As you've experienced, the theme was coded so that when changing the ribbon color, the date and social icons background color get changed as well.

    But with custom CSS you can override that! This means you can alter the three items above separately. Thesacredpath already gave you the CSS for the social icons color above:

    #social-networks a {
        background: #CCCCCC;
    }
    #social-networks a:hover {
        background: #CC0000;
    }

    For the ribbon bar, you can use this:

    .navigation-main, .navigation-main ul ul, .menu-toggle, .main-small-navigation ul.nav-menu.toggled-on {
        background: #ffffff;
    }
    .navigation-main:before, .navigation-main:after {
        border-color: #ffffff; /* Needs to be the same color with background color above */
    }

    You can use this for the circular post date's background color:

    .post-date {
        background: #ffffff;
    }

    Finally, you might want to modify the ribbon bar at the footer area of the site as well:

    .site-footer {
        background: #ffffff;
    }
    .site-footer:before, .site-footer:after {
        border-color: #ffffff; /* Needs to be the same with the background color above */
    }
  7. rebeccajeanwurm
    Member

    Thank you so much for all of these!!

    Is there a way I can also change the colors of the post titles, the color of the words in the posts, and the color of the month and year that shows up for each post?

  8. To change the color of post and page titles, add the following CSS and adjust the color as desired.

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

    You currently have the following in your custom CSS, which adjusts the initial base color for all text in your site:

    * {
        color: #000000;
    }

    If you want to change the post/page body text color only, add the following CSS at the end of your existing CSS:

    .entry-content p, .entry-summary p {
        color: #FF0000;
    }

    To change the color of the month and year for posts, add the following and adjust as desired.

    .entry-month, .entry-year {
        color: #66ff55;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic