WordPress.org

1. miscellaneajones
   Member
   Posted 1 year ago #
   

   Hi and thanks in advance for any help you can provide.

   I'm very new to CSS and am pulling my hair out trying to figure this out. I want to change the link colors from #1c9bdc to #000080 (for now -- just trying to learn the process -- there's a lot I'd like to change).

   I have created a child theme and uploaded the required style.css per WP Codex, including adding the @import rule.

   I have tried adding the following after the @import:

   a:link {
   color: #000080 !important;
   text-decoration: none;
   }

   ...as well as variations including .widget, .widget-area, etc, based on posts I've found in the Forum, but no luck -- nothing changes.

   Am I completely overlooking something?

   BTW, the site in question is http://serialjones.com

   Thanks again.

2. Good Guy
   Member
   Posted 1 year ago #
   

   I have created a child theme and uploaded the required style.css per WP Codex, including adding the @import rule.

   What does this mean? Have you created a special folder for it at the same level as Pilcrow in the wp-content/themes folder? This is the most basic requirements. then you create a style.css in the new folder and YOU must activate that theme even if there is only one file called style.css.

   I checked your site and its source and it looks like you haven't done this yet. Your theme is still the original pilcrow (NOT its child).

   Please also post the code of your style here for us to see AFTER you have created the necessary folders and activated them.

   hth

3. Amy Hendrix (sabreuse)
   Moderator
   Posted 1 year ago #
   

   Try it with just a {color: #000080;}. a:link actually does something subtly different: it only styles links you haven't visited before, and the problem may be that you simply don't have any of those on your own site.

   Start with just that. You don't need text-decoration:none, as that's already in the parent theme. And 99% of the time, you don't need !important. Once you know what element you need to play with, you can start building up other properties.

   I also suggest that you learn to use Firebug (it's a Firefox extension) or the Dev Tools in Chrome or Safari. Any of those will let you isolate the element you want to change on the page and play around with it until you figure out what you need to do to it.

4. miscellaneajones
   Member
   Posted 1 year ago #
   

   Excellent, and thanks to you both for the very prompt replies. I'll give these a try and will post an update.

   (And yes, I remembered later that I had neglected to reactivate the child theme after experimenting with the style sheet, but prior to that I had been toggling back and forth to check results.)

   Thanks for the great and very specific suggestions. I've encountered Firebug and devt tools in my reading but have not yet explored those.

5. miscellaneajones
   Member
   Posted 1 year ago #
   

   Finally! Thank you! I have been inundated with other tasks this week but finally had a chance to try this, Amy, and hooray it's working. (Thanks again to HTH, as well -- because I had indeed -- once again -- neglected to activate the child theme.)

   Following is what I've used:

   @import url('../pilcrow/style.css');
   a { color: #000080;}

   This will give me something to work with, at least for now. Thanks again.

6. DavidHass
   Member
   Posted 1 year ago #
   

   it helped me too! thanks! :)

Topic Closed

This topic has been closed to new replies.