Problem with changing the font color in the Stylesheet of Sample

Community Forums Forums Design Tips and Tricks Problem with changing the font color in the Stylesheet of Sample

This topic is: not resolved

This topic contains 3 replies, has 2 voices, and was last updated by  StephanieTreasure 3 months, 3 weeks ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #104207

    StephanieTreasure
    Member
    Post count: 1

    Hello – The font for my site which seems to be set at #333 (I think) is
    > not what I want for certain areas like the Primary Navigation and the
    > Primary footer. However, even though I have put #ffffff in those areas my
    > stylesheet does not seem to be taking it.
    >
    > The code I have in the Primary navigation area is:
    >
    > /* Primary Navigation
    > ——————————————— */
    >
    > .nav-primary {
    > background-color: /* IE10 Consumer Preview */
    > background-image: -ms-radial-gradient(center, ellipse farthest-corner,
    > #FFFFFF 0%, #E46203 100%);
    >
    > /* Mozilla Firefox */
    > background-image: -moz-radial-gradient(center, ellipse farthest-corner,
    > #FFFFFF 0%, #E46203 100%);
    >
    > /* Opera */
    > background-image: -o-radial-gradient(center, ellipse farthest-corner,
    > #FFFFFF 0%, #E46203 100%);
    >
    > /* Webkit (Safari/Chrome 10) */
    > background-image: -webkit-gradient(radial, center center, 0, center
    > center, 506, color-stop(0, #FFFFFF), color-stop(1, #E46203));
    >
    > /* Webkit (Chrome 11+) */
    > background-image: -webkit-radial-gradient(center, ellipse farthest-corner,
    > #FFFFFF 0%, #E46203 100%);
    >
    > /* W3C Markup, IE10 Release Preview */
    > background-image: radial-gradient(ellipse farthest-corner at center,
    > #FFFFFF 0%, #E46203 100%); color: #ffffff;
    > }
    >
    > The code I have for the footer is:
    >
    > /*
    > Site Footer
    > ————————————————————————–
    > ————————– */
    >
    > .site-footer {
    > background-color:
    > /* IE10 Consumer Preview */
    > background-image: -ms-linear-gradient(top, #FFFFFF 0%, #E46203 100%);
    >
    > /* Mozilla Firefox */
    > background-image: -moz-linear-gradient(top, #FFFFFF 0%, #E46203 100%);
    >
    > /* Opera */
    > background-image: -o-linear-gradient(top, #FFFFFF 0%, #E46203 100%);
    >
    > /* Webkit (Safari/Chrome 10) */
    > background-image: -webkit-gradient(linear, left top, left bottom,
    > color-stop(0, #FFFFFF), color-stop(1, #E46203));
    >
    > /* Webkit (Chrome 11+) */
    > background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E46203 100%);
    >
    > /* W3C Markup, IE10 Release Preview */
    > background-image: linear-gradient(to bottom, #FFFFFF 0%, #E46203 100%);
    > color: #fff;
    > font-size: 14px;
    > font-size: 1.4rem;
    > padding: 40px 0;
    > padding: 4rem 0;
    > text-align: center;
    > }
    >
    > .site-footer a {
    > border-bottom: 1px solid #ddd;
    > }
    >
    > .site-footer p {
    > margin-bottom: 0;
    > }
    >
    > URL
    > http://hairlossclinic.stephanietreasure.com/
    >
    > Child Theme
    > Sample

    http://hairlossclinic.stephanietreasure.com
    #104255

    Tom
    Participant
    Post count: 870

    Hi Stephanie,

    The primary navigation and footer text are already displaying in color #ffffff (white) That makes it difficult to read against the white background gradient. Also, most of the code you posted will not affect those text items so you may have some code cleanup to do :) .

    To change the text color of the primary navigation:

    .nav-primary a {
        color: #000;
    }
    
    .nav-primary a:hover {
        color: blue;
    }

    To change the color of the footer text and links:

    .site-footer,
    .site-footer a {
        color: #000;
    }
    
    .site-footer a:hover {
        color: blue;
    }

    (when you post code please paste it, then format it by selecting it and clicking the “code” button – thanks!)


    Choose your next site design from over 300 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #104256

    Tom
    Participant
    Post count: 870

    … and I missed the sub-menu items that can’t be read on hover, so …

    .genesis-nav-menu .sub-menu a:hover {
        color: blue;
    }

    Choose your next site design from over 300 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #104278

    StephanieTreasure
    Member
    Post count: 1

    Hi Tom,

    Thanks so much for your reply / help.
    I have saved the stylesheet in the original state before I started making changes so I can always go back to that. I find though that the way the Stylesheet is written, is a little cumbersome. Too many uniform commands. The way it was written a few years ago when I purchased my first Studiopress theme made it easier to edit specific sections.

    I will look into your suggestions.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.