title/tagline color

  • raisedwellpdx · Member ·

    Hi! I’m completely illiterate on CSS. I just want to change the opacity and/or color on my site’s title/tagline. How can I do this?

    The blog I need help with is: (visible only to logged in users)

  • dannywellman · Member ·

    Hello there!

    You should be able to switch it up a bit if you want. If you want to change the background color and/or opacity, you’ll need to manipulate the background property of the site-branding element.

    The default CSS for it is:

    .site-branding {
    background: rgba(12,12,12,0.67);
    }

    If you aren’t familiar with what that all means, hopefully I can explain it. I’m going to try to explain it like you’ve never heard of CSS or RGB colors before. If I’m telling you something you already know, I apologize. :)

    The .site-branding is the class of the element that holds the title and tagline of your blog’s theme. The background is the property that controls the background of that element. The rgba is a value you can change for the background property.

    The rgba property in this case is split in to 4 sections separated by commas. The first number is the value of red, the second is for green and the third is for blue. (RGB for red, green,blue). The numbers represent how much of each color there is present, from 0 to 255. 0 meaning that there is none of that particular color present, 255 means that the value of that color is maxed out.

    The 4th set of numbers of for the opacity of the element. The range is from 0 to 1. 0 means it’s completely clear. 1 means it’s completely solid/opaque. 0.5 would be right in the middle.

    For example, if you wanted a green background that is screened at 30 percent visible, you could use:

    .site-branding {
    background: rgba(0,255,0,0.3);
    }

    If you don’t want to manually figure out a color, you can use sites like this one to help you pick out the rgb value. Just click on the color picker to find the color you want and it will display the RGB values you can use.

    I hope this helps out! Please let me know if you need anything explained more of need any other assistance. Hopefully what I said makes sense!

    Have a good evening!

  • raisedwellpdx · Member ·

    Thank you Danny! The rgb and opacity I’ve got down, but it was trying to figure out where to find the CSS info for the title page and how/where to apply the changes that had me in a tail spin. I’ve figured it out and made the changes. The only think I can’t figure out not is how to find the html for the horizontal bar between my title and tagline (raisedwellpdx.com). When I right click on it to get the “inspect element” info it pulls up the html for everything around it, but I can’t seem to figure out where the line is so I can find the CSS. Any suggestions would be appreciated.

    -Aurora

  • dannywellman · Member ·

    Groovy! I’m glad it worked.

    I think I found the place to manipulate the little bar properties!

    .site-description:before {
    background: rgba(255,255,255,0.1) !important;
    }

    I’m not sure if you’ll need to throw in the !important at the end, but you may need it to override the site CSS for that element since it’s already set.

    The full CSS for that property appears to be the following if you’re interested:

    .site-description:before {
    content: “”;
    display: block;
    width: 100px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin: .85em auto;
    }

    You could change the width and height I guess if you wanted to!

    I hope that works for you!

  • raisedwellpdx · Member ·

    Hi Danny!

    I have a CSS questions I’m hoping you can help me with. I’m trying to remove or fade out the Page Title (which is created from a “category”) so it doesn’t appear above a post’s title and appear as a duplicate to the “menu” tab name. I can’t seem to fade the color w/o it also changing the date and comment below the post title. Am I not select the right html line (<h1 class=”page-title”> earth </h1>)?

    Thanks!
    Aurora

  • dannywellman · Member ·

    Hello again, Aurora!
    It looks like you’ve found the right line for the title.
    Have you tried to just hide it?

    Maybe this?:

    .page-title {
display:none;
}

    Give that a shot and let me know if that’s what you’re trying to do.

    Have a good evening!
    -Danny

  • The topic ‘title/tagline color’ is closed to new replies.