Custom CSS problems

  • Resolved Julie Herold

    (@julie-herold)


    8 years, 10 months ago

    Hi!

    I am having a bit of trouble with some CSS changes to the theme. My website is https://julieherold.dk/.

    I have installed a plugin to add custom CSS and with some things it works really fine. And with other’s I can’t figure ut what the problem is…

    I want my links to be the following colors:
    a:link{
    color: #FFB200;
    }
    a:visited{
    color: #FFB200;
    }
    a:hover{
    color: #FFB200;
    }
    a:active{
    color: #FFFFFF;
    }
    a:hover{
    color: #FFB200;
    }
    .post-edit-link {
    color: #FFB200;
    }
    , and I have added all these lines to the CSS. But despite this, the visited links turn dark. How do I correct this?

    Also, I would like to change the previous and next buttons to have the translucent background, a yellow border and then maybe swap colors at hover (https://julieherold.dk/blog/2015/12/31/2015-2/)… Which code do I use? I have so far added this, which achieves some of what I want, but I can’t find the rest:
    .nav-previous {
    background: rgb(255, 255, 255) transparent;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid #ffb200;
    }

    And then I wish the heading under the thumbnails in the widgets to be bigger. Where do I change this? The widget is a plugin called recent posts extended and it has a CSS feature built in, but changing text-size in that one doesn’t change anything. And the plugin for CSS should override anything anyway…

Viewing 5 replies - 1 through 5 (of 5 total)

  • To resolve the problem you are facing with visited links replace the code with:

    a:visited {
    color: #FFB200 !important;
}

    And to change pagination and widgets CSS style use following code:

    .nav-previous {
    background: #fff !important;
    opacity: 0.9;
    border: 2px solid #FFFF00 !important;
}

.post-navigation .nav-previous a {
    border: 0 !important;
}

.post-navigation .nav-previous a:hover {
    background: #FFFF00;
    border: 2px solid #E2E2E2;
    opacity: 0.8;
    color: #000;
}

.nav-next {
    background: #fff !important;
    opacity: 0.9;
    border: 2px solid #FFFF00 !important;
}

.post-navigation .nav-next a {
    border: 0 !important;
}

.rpwe-block a {
    font-size: 16px;
}

    Thanks.

    Thread Starter Julie Herold

    (@julie-herold)

    Thanks, that worked ??

    How does the !important work?

    Now my links in the footer have turned yellow as well – is there a way to turn these back to white? Otherwise I will just make the footer-background white..

    Use following CSS to fix footer link color:

    .credits a {
    color: #fff !important;
}

    In CSS declaration appended with the ! operator followed by important, is said to be an important declaration, rather than a normal declaration. It says ‘this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’.

    Thanks.

    Thread Starter Julie Herold

    (@julie-herold)

    Thanks, it works now ??

    Thread Starter Julie Herold

    (@julie-herold)

    All figured out ??

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Custom CSS problems’ is closed to new replies.