Support » Theme: Customizr » Change "back to top" link colour?

  • Resolved ElectricFeet

    (@electricfeet)


    Can anyone tell me how I make the “Back to top” link match my theme colours (in my case orange, the colour of all the clickable text on the site) without changing the copyright links as well? They seem to share the same class, so I suspect I’ll have to modify code somehow.

    It’s completely stumped me: I’m still only just over a month into learning CSS.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Andrew Nevins

    (@anevins)

    Can you provide a link to the webpage in question?

    ElectricFeet

    (@electricfeet)

    Mine is darioalfonsi.com but demo.themesandco.com is just as good an example. Thanks!

    ElectricFeet

    (@electricfeet)

    Oops, forgot that I had removed it from the English site. Try http://alfonsidario.it/ where it is translated to “Inizio pagina”.

    rdellconsulting

    (@rdellconsulting)

    Try:

    footer#footer .colophon a, footer#footer .colophon p {
      color: red;
    }

    Change red to the color you need.

    Moderator Andrew Nevins

    (@anevins)

    You can target that particular anchor tag with the class applied to the <p> element surrounding it:

    footer#footer .colophon .pull-right a {
     color: red;
    }

    ElectricFeet

    (@electricfeet)

    Thanks Andrew! That worked a treat 🙂

    @rdellconsulting I had tried that and it turned the copyright notice’s colour too … so I had given up. Andrew’s .pull-right suggestion was also needed (something I wouldn’t have expected in general, but it seems to be the only way to differentiate this element from the rest).

    If I may ask a further question of you both (as I’m still a CSS newb): Am I right in learning from this:

    1. That the colour-change “fires” only if an element contains all the classes that you list; and
    2. That the order in which you list the classes really matters (changing the order stopped it working)

    If I’m right on these (I think I’m not!), why are the “>”s needed in some cases?

    Thanks for your help!

    Moderator Andrew Nevins

    (@anevins)

    The ‘>’ character in CSS will apply classes to elements that first precede them. For example, if you want to change the colour of only the top level items in a navigation menu, you could apply:

    #main-menu > li

    That will only apply CSS to the <li> elements that directly precede this element:

    <ul id="menu-main" class="nav">

    Meaning your submenus won’t be affected.

    Moderator Andrew Nevins

    (@anevins)

    It may be worth exploring CSS forums too http://csscreator.com/forum

    ElectricFeet

    (@electricfeet)

    It may be worth exploring CSS forums too http://csscreator.com/forum

    Just what I need! Thanks 🙂

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Change "back to top" link colour?’ is closed to new replies.