Need help? Check out our Support site, then


Changing the Site Title Size and Color

  1. I have the expound theme and have purchased the Custom Design upgrade. I want to change my site title to at least 50px and it's color to #ffffff. I would also like to change my tagline(site description) to #ffffff and increase it's size and make it italicized. Also - i would like to add a bit of extra space between the two so they won't be written on top of each other. I am a CSS/HTML n00b and am not exactly sure where to paste the code. I went to Customize and tried to paste there:

    #site-title a {
    color:#ffffff;
    }

    But nothing changed. I can mess around under the Chrome browser developer tools and made it work but can't seem to figure out how to make it have a lasting effect. Could someone please help me so my site will actually have a title?

    Thanks!!

    The blog I need help with is http://www.libertytn.wordpress.com.

    The blog I need help with is libertytn.wordpress.com.

  2. Hello,

    right now your actual site title and description are hidden (replaced by the banner image). Instead, there's also the "tn liberty: where the liberty-minded go for news" text inside a post.

    Which one do you want to style? The former or the latter? Where do you want to display the title and tagline?

  3. I have the site title hidden because it shows up as the red color and the description as a gray color which doesn't show up and even if it did, it is way too small. You can't really read either. If you are talking about the tn liberty - where the liberty-minded go for news in the red box on the left sidebar - I was able to do that with HTML in the text widget.

    I am interested in making the actual Site Title (currently hidden but it shows up on the left on top of the header when i check the box to display site title and description) and the description larger and white. So it is readable. If you can tell me how to make the actual Site title #ffffff and at least 50px - along with the other questions - that would be awesome!

    Thanks

  4. I checked the box to let it show up so that you could see what i'm talking about. It's on the left and very small and unreadable but its there so you can see it.

  5. I want the Site Title and Tagline (description) to appear on the red brick wall portion of the header on the left (which is where it is now). But want the size and color changed along with some spacing between the title and the description.

    Then, I want to add a 2-4px border around the header image and the menu - I was able to do this in the Chrome developer tools but as I said before, I wasn't a permanent fix. I was just able to see that it looked awesome.

    Thanks.

  6. Here you go:

    .wf-active h1.site-title a {
    	color: #ffffff;
    	font-size: 50px;
    	margin-bottom: 20px;
    }
    
    .wf-active h2.site-description {
    	color: #ffffff;
    	font-style: italic;
    	font-size: 30px;
    }

    Tweak the CSS values to match your need.

  7. Thank you but here's the super important part - WHERE do I paste those values? I tried in the CSS box under Customization but it did nothing. Where do I put that to just tweak that part of the CSS stylesheets? Maybe I'm acting like a super n00b here but I can't figure it out.

    *hides face*

  8. That's the right place. Appearance -> Customize, then choose the CSS option to the lower right.

    If you have saved it, then it will apply to your site right away. If you can't seem to see the changes, it's probably something to do with your browser cache. A quick way to test this is to open an incognito window if you're using Chrome, then open the site there. Any changes to CSS should show up correctly there.

  9. So - I just copy the code above (with or without any tweaks I would like to make) and then paste it in the CSS customize box after erasing all the words describing what the box is for, right? Then hit save and it should publish my changes and not mess up anything else, correct?

    I appreciate your help so so much! I hate when I don't know how to do something. Drives me crazy. lol

  10. OMG! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! Worked like a charm! I even figured out how to change the side margin and push it closer to the left side of the header! You're a lifesaver - kept me from going completely insane!

    I would like to know two more things if you have the chance and don't mind.

    1. Changing the font - can you just type:

    font-family: Ubuntu (or whatever font you want it to be) right under the font-style in the code above?

    Or does it have to go in a specific place - before or after font-style or color, etc?

    And I know the names of specific fonts - can you use any font?

    How do you know what family it is in?

    2. How could I add a 2px or 4px white border around my header?

    I know that when I tested it under the Chrome developer tools, I was able to add a 2px white border and it showed around the header and between the header and the menu. I thought it looked pretty good but of course, I don't know the CSS coding to add it in the Customization box. Do you?

    Thanks again! I am loving actually learning this stuff. The problems of a print designer in a web world. Grins.

  11. We can't just add any font to CSS, because it depends on whether the visitors's computers contain that font or not. If they don't have "Ubuntu" font in their computer, for instance, then they won't see the font applied on your site.

    Here's a good site that shows you a list of "web-safe" fonts, fonts that are available on the majority of computers out there:

    http://cssfontstack.com/

    If you use their copy to clipboard feature, you can then paste the correct CSS to display the font of your choosing.

    More explanation about CSS font families here:

    http://stackoverflow.com/questions/15695893/understanding-font-families

    The Custom Fonts upgrade gives you more fonts to choose; this upgrade essentially sents custom fonts to visitors's browsers, so "rare" fonts can now show up on their computer. If you do have this upgrade and want to use the font on various places on your site, ask here again.

    Regarding the border, if you can add it via the Developer Tools, then you can add it to the Custom CSS box. How did you do it in Developer Tools?

  12. I did purchase the Custom Upgrade for Fonts, Colors, CSS etc - but I will ask about specifics when I come to it.

    As for the border, well...good question. I was in the developer tools and there was a box on the right side. In the box, there was something that said border and had a checkbox beside it. I clicked in the checkbox and then in the text next to it and changed the px from zero to 2px and then to 4px. The problem here is that there is nothing like that on the stylesheet on the CSS Customization page - or are you saying that should I just copy exactly what it says on the Developer tools into the CSS Customization form?

    Or is there specific code? For adding borders to headers, etc?

    Thanks!

  13. Right, you can copy the code from the right side box on the Dev tools, straight to the CSS Customization box. If you're unsure, just try copying it and paste it here, we'll see if you have copied it correctly.

  14. So - that's what I just went back to try and I can't find it again. I have NO clue how i was able to do it the first time. I changed now, what I thought I changed then, and nothing happened. So - I will continue to mess around with it tomorrow. I've got to complete other grad school stuff or i'll never get it all done. Lol. If you happen to have any suggestions - I'd love to hear them! Thanks for all your help!!!

  15. Let's see here. This one adds a border to your header image:

    .site-header .site-branding {
    	border: 2px solid #fff;
    }

    while this one adds a border that encompasses both the header image and menu area:

    #masthead {
    	border: 2px solid #fff;
    }

    Pick one that best matches your need.

Topic Closed

This topic has been closed to new replies.

About this Topic