Support » Theme: Blask » Custom CSS link styles aren’t working reliably

  • Hi Everyone!

    I have a front page with a bunch of links in the content pane, they’re written to look like a simple continuous paragraph, and designed so that when you hover over specific phrases they highlight black. I was able to do this using the Additional CSS field by introducing an a:hover override.

    Furthermore, these links all fall into one of three categories of projects, and each has a specific link color. I introduced 3 link classes – ‘academic’, ‘professional’ and ‘indie’. The intent is for the actual links to show up on the page in either Blue, Red, or Green. I did this in Additional CSS field as well.

    The issue is this – For some reason depending on where you view the page – phone, pc, different browser, you’ll see some of the styles showing up and some not – for instance on Chrome, only the green-styled links show up proper, same for iphone, meanwhile on MS Edge, I get all – green, blue, red.

    My gut feeling is that I shouldn’t be using Additional CSS to do these style overrides and it’s just creating some sort of a clash, but then I have no idea where or how to put this CSS code in the actual theme stylesheets.

    I hope this makes sense. Any idea on how I could address this?
    Thanks so much!!

    P.S.
    My entire ‘Additional CSS’ code for the page right now is this:

    .main-navigation li {
    border: none !important;

    }

    .site-header a:hover {background-color: white;}

    .main-navigation a {
    font-size: 13px !important;
    font-family: Courier New
    !important;
    font-weight: bold;
    padding-top: 0em;
    padding-bottom: 0em;
    padding-left: 6.5em;
    }

    .main-navigation a:hover {
    color: black !important;
    text-decoration: none !important;
    }

    body {
    background: #ffffff !important;
    font-family: arial;
    font-size: 20px !important;
    letter-spacing: 0px;
    color: black;

    line-height: 22px
    }

    a:link {
    color: black;
    text-decoration: none !important;
    border:none;
    }

    a:hover {
    color: WHITE !important;
    text-decoration: none !important;
    background-color: BLACK;
    border:none;
    }

    a.academic:link {
    color: #becf00;
    text-decoration: none !important;
    border:none;
    }

    a.professional:link {
    color: #6bbcff;
    text-decoration: none !important;
    border:none;
    }

    a.indie:link {
    color: #b81200;
    text-decoration: none !important;
    border:none;
    }

    .site-info{
    display:none;
    }

    #masthead > a {
    display: flex;
    align-items: center;
    justify-content: center;
    }

    figcaption {
    font-size: small;
    }

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Hi! It’s outside the scope of the support we can offer here, but for what it’s worth I’m seeing the black backgrounds here on chrome/mac. I’m guessing you’ve sorted this out?

Viewing 1 replies (of 1 total)
  • The topic ‘Custom CSS link styles aren’t working reliably’ is closed to new replies.