how to create a one off set of link states in Home page. Swell theme

• 

  laurapalmerwp · Member · Dec 21, 2015 at 3:12 pm

  • Copy link
  • Add topic to favorites

  In the purple block area, of my Home page, I’d like to make the link states different from the rest of the site’s states. Where it says, ‘your own piece of digital heaven… the ‘come on up’ link.

  I’d like the link #fd0000 on upload and #C0A02F on hover.

  I’m guessing I have to hard code that into the Home page but unsure how to write the css. Can anyone help?

  The blog I need help with is: (visible only to logged in users)

• 

  kathrynwp · Staff · Dec 23, 2015 at 9:02 pm

  • Copy link

  To do that, first remove the bits of inline CSS you’ve added with a class. So replace this:

  <span style="color:#ff0000;">
  <a href="https://palmerowen.wordpress.com/digital-talk/" style="color:#fd0000;">Come on up.</a>
  </span>

  With this:

  <a class="cta-link" href="https://palmerowen.wordpress.com/digital-talk/">Come on up.</a>

  Now that you’ve added a class, you can target its colours in your custom CSS:

  a.cta-link {
    color: #fd0000;
  }
  a.cta-link:hover {
    color: #C0A02F;
  }

  Learning how to target your site’s CSS will help you make certain design and layout changes. Here are some very helpful posts that will help you customize your site with CSS:

  An Intro to CSS: Finding CSS Selectors

  An Intro to CSS, or How to Make Things Look Like You Like

  Intro to CSS: Previewing Changes with the Matched Rule Pane

  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  https://thewc.co/articles/view/web-inspector-tutorial

  https://cssworkshop.wordpress.com/