Community Forums › Forums › Archived Forums › Design Tips and Tricks › Problem with changing the font color in the Stylesheet of Sample
Tagged: font color, footer, nav, sample
- This topic has 3 replies, 2 voices, and was last updated 10 years, 9 months ago by
StephanieTreasure.
-
AuthorPosts
-
May 8, 2014 at 5:00 pm #104207
StephanieTreasure
MemberHello - The font for my site which seems to be set at #333 (I think) is
http://hairlossclinic.stephanietreasure.com
> 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
> SampleMay 8, 2014 at 11:23 pm #104255Tom
ParticipantHi 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 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]May 8, 2014 at 11:30 pm #104256Tom
Participant... 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 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]May 9, 2014 at 7:37 am #104278StephanieTreasure
MemberHi 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.