Changing the link colour in Edin theme

  • Unknown's avatar

    sorry, sacred path, i was in error in referring to the titles i want to change as widgets — in fact they are “featured pages” on the front page, accessed via Appearances / Customizing / Theme Options. (i.e. the section immediately above the two widget areas).

    on my existing page, those titles currently say “spring 2018 shoe arrivals / join our running clinics / running shoes”. they currently display in black with a rollover colour blue — it’s that rollover colour i want to change to maroon.

    ideas? thanks in advance for your help.

  • Unknown's avatar

    Hi, I just put the first code I gave you directly into your customizer and it turned the titles you mention to the maroon color when I hover over them. I’ve left that in your customizer and published it and it’s commented with my username.

  • Unknown's avatar

    fantastic!

    but just wondering: how do you get into my admin without a password?

    a.

  • Unknown's avatar

    sacred path: since you solved that little issue for me, can you solve this one as well?

    i want to change the colour of the vertical rule in the standard block quote from blue to maroon. like here:
    https://therunningworks.ca/clinics/

    but i want the block quote in the feature image on the home page to remain as is, i.e. white with a white rule.

    is that possible?

  • Unknown's avatar

    Hooray!

    For the borderline on the blockquote, this would do it. What I’ve done is to use the :not() conditional to exclude the home page from the borderline change. It will change everywhere except on your home page.

    body:not(.home) blockquote {
      border-left-color: #921a1d;
    }
  • Unknown's avatar

    wow, you’re good. that did it.

    tx. muchly!

  • Unknown's avatar

    one more, and i know this one is pretty easy:

    can i change the colour of the shortcode CTA button from blue to maroon? like the one at the bottom of this page?

    https://therunningworks.ca/contact/

  • Unknown's avatar

    This should do it for you for the contact page for the hover color.

    input[type="submit"] {
      background: #921a1d;
      border-color: #921a1d;
    }

    If you wish to change the hover color, you can add this as well and then adjust the colors as desired. I just lightened the maroon a bit in this example.

    input[type="submit"]:hover {
      background: #994444;
      border-color: #994444;
    }
  • Unknown's avatar

    great. that works.

    one last vestige of the blue: the background colour you get when you click the menu or search buttons — and also the colour you get when you hover over those buttons.

    priority is to fix the menu things — the search is less important.

    tx.

  • Unknown's avatar

    Cool.

    For the blue background on the search and menu, this would do it.

    .search-wrapper, .navigation-wrapper {
      background: #921a1d;
    }

    For the hover color on the menu and search icon, this.

    @media screen and (min-width: 600px) {
      .search-toggle:hover:before, .menu-toggle:hover:before {
        border-color: #921a1d !important;
        color: #921a1d !important;
      }
    }
  • Unknown's avatar

    oh, so close. these fixes both work, but leave little issues:

    * when you click into the menu area (maroon background) you lose the little X in a circle if you hover over it — presumably because it’s also maroon — i need the code to control that colour

    * much smaller issue: the hover colour of the word “menu” is still blue (the icon is maroon)

    tx.

  • Unknown's avatar

    Let’s try this instead of what I had given you before.

    .search-wrapper, .navigation-wrapper {
      background: #921a1d;
    }
    @media screen and (min-width: 600px) {
      .search-toggle:not(.open):before, .menu-toggle:not(.open):before {
        border-color: #921a1d !important;
        color: #921a1d !important;
      }
      .search-toggle:not(.open):hover:before, .menu-toggle:not(.open):hover:before {
        border-color: #921a1d !important;
        color: #921a1d !important;
      }
      .search-toggle.open:before {
        border-color: #921a1d !important;
        color: #921a1d !important;
      }
    }
  • Unknown's avatar

    that’s awesome. thanks for all your help. everything working great now.

    a.

  • Unknown's avatar

    Hooray and you are welcome!

  • The topic ‘Changing the link colour in Edin theme’ is closed to new replies.