Support » Themes and Templates » How to add hover effect to links

  • I am designing my blog and want to add hover effect to links, so when someone hovers over it with courser it changes it colour.
    I dont think my template have this.
    How to do this manually?
    my site is

Viewing 3 replies - 1 through 3 (of 3 total)
  • There is a style rule like this in your theme:

    #rt-mainbody-bg a, #rt-mainbody-bg .title span, #rt-mainbody-bg .rt-article-title span, #rt-variation .bg4 a, #rt-variation .bg4 .title span, #rt-variation .bg4 .button, #rt-variation .title4 .title span {
      color: #0051C9;

    and another like this:

    a {
      -moz-text-blink: none;
      -moz-text-decoration-color: -moz-use-text-color;
      -moz-text-decoration-line: none;
      -moz-text-decoration-style: solid;
      outline-color: -moz-use-text-color;
      outline-style: none;
      outline-width: medium;

    The former is in a style sheet called gantry.css, whilst the latter is in a style block in the head section of your pages.

    I’m assuming that you want to be fairly specific about your new rule and have it only apply to links that are blog post titles. That being the case, you need a new rule:

    h1#title a:hover {
      /* your rules in here */

    I can’t test this, unfortunately. Your page contains more nested divs than I’ve ever seen. I’m sure there are good reasons for that, but it looks like the worst case of ‘divitis’ I’ve ever seen. So you’ll just have to give it a go.

    As usual, I would advise you to only make changes in a Child Theme. It only takes a few minutes to do and can save you hours of trouble later.

    That being the case, just add your new rule into your child theme’s style sheet.

    When you’ve done that, if it doesn’t work exactly how you want, leave your changes and post again so we can look at it.



    I am newbie and not good in coding.
    can you explain me steps details further.
    I want every link to change colour

    First create a minimal child theme, following these instructions.

    In your child theme’s style sheet add a rule like this:

    a:hover {
      /* your rules here */

    Obviously you substitute the rules you want for the comment, “/* your rules here */”

    If that doesn’t work we’ll have to get more specific, but we should try that first.



Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to add hover effect to links’ is closed to new replies.