• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Making the titles a different color

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Making the titles a different color

This topic is: not resolved

Tagged: change, color, plugins, text

  • This topic has 14 replies, 2 voices, and was last updated 7 years, 7 months ago by designerwriter.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • October 8, 2015 at 11:54 pm #167711
    designerwriter
    Member

    I want to add color to the titles on this page. I was initially going to use the <font> tag but when I checked on W3Schools, it stated that it was not compatible with HTML5. So then I downloaded the Text Selection Color plugin, selected the text, but couldn’t find the icon where I change the color. I went into settings to change the color to what I wanted. That worked. But I couldn’t change the color of the title along with the publication. Is there a simpler way to change it besides CSS? That’s why I retrieved the plugin.

    Please advise. Thanks in Advance.

    http://magazinepro.eagleheartdynamic.com/writing-print-5/
    October 9, 2015 at 1:33 pm #167754
    designerwriter
    Member

    Not sure how long it will take to get an answer but if I find out before I get an answer, I will post it here. I would use the <font> tag but it’s not visible or compatible with HTML5 so not sure what to do now. That’s why I posted this question.

    October 10, 2015 at 9:22 am #167796
    designerwriter
    Member

    Can anyone answer this question?

    October 11, 2015 at 12:03 am #167844
    designerwriter
    Member

    I didn’t know that about bumping my own thread thanks for letting me know and thank you for the answer. However, regarding this answer...the heading is just part of the body copy bold and italicized but I don’t like how bold it is. I would rather bold it through the heading family since I can use numbers.

    My question is, how would I apply say a heading about the size of the body copy and make it a different color without changing the other heading colors? I just want the headings of the article titles and the publication blue in the writing section. Thank you.

    October 11, 2015 at 7:52 am #167850
    IDX Leads
    Member

    Titles should be wrapped in h tags. Remove the strong tags and replace them with your choice of h1 through h6. Then style heading the way you want it. If you don't want to change the size and color of the headings across your entire site place the content of the page in a unique div class and style the heading in that unique class only.

    .unquedivclass h3 {
    	color: #333;
    	font-family: 'Helvetica', sans-serif;
    	font-weight: 500;
    	line-height: 1.2;
    	margin: 0 0 16px;
    }
    

    Esse quam videri

    October 11, 2015 at 9:55 am #167853
    designerwriter
    Member

    Great thanks! So do I place this at the bottom of the CSS page to override the original code for this heading? Thanks.

    Grace

    October 11, 2015 at 11:37 pm #167889
    designerwriter
    Member

    Well, that didn’t work. I am using the h5 heading. I wasn’t sure where to place it. I put it at the end of the CSS document before the last bracket then I tried to put it after the last bracket. I even placed it after the original code similar to this under the h1-h6 headings. I changed the 333 color to #002f87 as a test but it did not change. Can you please tell me why? Thank you.

    October 12, 2015 at 6:32 am #167905
    IDX Leads
    Member

    OK, I am going to give this one more shot, and I am going to keep it as simple as possible. This will change all of your h5 titles to #002f87 across your entire site. The rest of the h titles will remain the color they currently are. In your style sheet where you see this

    h5 {
    	font-size: 18px;
    }
    

    make it look like this

    h5 {
    	font-size: 18px;
            color: #002f87;
    }
    

    You will then need to finish adding h5 titles to the content of the page, and change the one below the entry title from h6 to h5.


    Esse quam videri

    October 12, 2015 at 9:04 am #167923
    designerwriter
    Member

    That’s a lot simpler. So what happens with this code then?

    .unquedivclass h3 {
    color: #333;
    font-family: 'Helvetica', sans-serif;
    font-weight: 500;
    line-height: 1.2;
    margin: 0 0 16px;
    }

    Where does it go or is your new instruction an easier way to do it?

    So what if on another page, I want h5 the same color as the body copy and only want the blue for the titles in this section. Then what do I do?

    October 12, 2015 at 10:28 am #167929
    IDX Leads
    Member

    Just ignore everything in this thread prior to my post number 167905.

    Yes, as stated this is the simplest way to change the color of your h5 titles to the color you want them to be.

    For any concerns you may have beyond the scope of simplest approach this is an excellent resource.

    http://www.w3schools.com/html/html_classes.asp


    Esse quam videri

    October 12, 2015 at 10:58 am #167931
    designerwriter
    Member

    But what about this question that was not answered?

    So what if on another page, I want h5 the same color as the body copy and only want the blue for the titles in this section. Then what do I do?

    Yes I use W3Schools..but I wanted to get another opinion since I can’t use the font function because it is not compatible with HTML5.

    October 12, 2015 at 11:26 am #167933
    IDX Leads
    Member

    I can't open that link for you.


    Esse quam videri

    October 12, 2015 at 1:36 pm #167943
    designerwriter
    Member

    So no answer to this question?

    October 12, 2015 at 2:03 pm #167949
    IDX Leads
    Member

    Prior to this, you have been provided 5 answers, 1 of which I did not provide and has now disappeared, and another that I did provide that appears to be beyond the scope of your CSS skill set at this point in time. That's OK. Subsequently I provided a simpler solution so that you can style your page they way you want it styled. Assuming you don't want to pay anyone to teach you CSS, or pay anyone to do the work for you, you will need to continue relying on the generosity of this community's members, or learn using the same tools and techniques most here used to improve their own CSS skills.

    Alternatively, I suggest you go back to exploring plugin options, but I don't have suggestion with regard to that.


    Esse quam videri

    October 12, 2015 at 2:54 pm #167955
    designerwriter
    Member

    Can someone else answer my question please?

    So what if on another page, I want h5 the same color as the body copy and only want the blue for the titles in this section. Then what do I do?

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble