Easy way to change hyperlink colors in Genesis framework

In our genesis framework tutorial series, here is a step by step guide to change link colors in the child theme with very few changes in the stylesheet.

Many Genesis themes give you color style selection inbuilt but serenity, lifestyle themes, News child themes and other studiopress themes don’t give any of this options.

Step by step guide to change link color in Genesis framework child themes:

  1. From your left sidebar menu of the wordpress dashboard, go to “Appearance”.
  2. Select last option “Editor”
  3. In your right hand side you can see
  4. go to the last edit option: style.css
  5. By pressing CTRL+F, search for “Hyperlink”. Same as seen in the image below. You can see visited color: #8B0000; ..and hoover color#. Change it according to your wish. You can find color number HERE
  6. Genesis hyperlinks change tutorial
  7. You can change Navbar link by searching  ”#nav li a” and
    “#nav li li a, #nav li li a:link, #nav li li a:visited ” and change color#. It will help you to change navbar link color and navigation dropdown links color.
  8. To change sub nav bar (subnavigation bar) link search for”#subnav li a” and
    “subnav li li a, #subnav li li a:link, #subnav li li a:visited ” and change the color.
  9. Nav.li is homelinks. Nac.li li is dropdown links of the navigation bar. Same as in subnav.li is subnavigation bar links and subnav.li li is dropdown links of the sunavigation bar links.
  10. To change sidebar links, search for “#sidebar li a,” code and change color: #
  11. You can change Website’s title links directly from the “Appearance”

New genesis framework themes have different code for links:

For hexadecimal code (#000000; etc)..menu-primary li a,

.menu-primary li a:active,
.menu-primary li a:hover {
color: #000;
}.menu-secondary li a,
.menu-secondary li a:active,
.menu-secondary li a:hover {
color: #000;

Check our other genesis tutorials:

  1. Change genesis footer links with simple edits plugin.
  2. Change genesis footer links with Simple hook plugin.
  3. Genesis theme option disappeared from dashboard? get solution.

Isn’t it fun to learn how to customize your website and make it catchy with this tutorials.

Stay tuned for my next tutorial about how to change fonts size in genesis and other wp themes.

 

Pin It

Get Latest Tutorials and News straight into your inbox. Enter your email address, hit "Subscribe" button and confirm your email:

Delivered by FeedBurner

Speak Your Mind

*