Overriding link styles?

  • Foliferous

    (@revs)


    10 years, 5 months ago

    Hello!

    A few infos first. I’m using the latest WordPress, my client’s site is in localhost so I can’t show it to you, and I am using a child theme of the 2012 theme.

    So: I want to have a menu at the right hand side of the page. I could go to “Widgets” and enable the custom menu. But the menu I’m doing for my client is quite complex, and it would be even more complicated using this menu widget. So I decided I’ll do it with the “Text” widget, where I can also insert HTML, because basically every link has a different size and a different colour.

    Alright, now comes the problem. In the style.css file of my child-theme, I inserted all needed stuff that should make the menu look the way it should look. But it doesn’t work, because it seems like this won’t override WordPress’ default settings for links.

    I do not want to change any of the settings for links, however. It’s really just for this menu I’m doing. All other links should stay the way they are.

    Does anyone have an idea how I could do this? It doesn’t seem to be really easy. I don’t get why it won’t override the default settings…

    All help is appreciated!
    Mr. DeeGee (DG, Default Gravatar)

Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • Michael

    (@alchymyth)

    10 years, 5 months ago

    without seeing the problem live, there is not much this forum here can do to help.
    make sure your styles are specific enough to overwrite the theme’s styles; for instance, try working with a browser inspection tool like Firebug or the ‘inspect element’ feature of many browsers to check which styles are finally applied to your links.

    Thread Starter Foliferous

    (@revs)

    10 years, 5 months ago

    Well, maybe this will help, this is my CSS for the links. As you can see, there’s 4 different styles for the links:

    .link-style-1 {
    text-decoration: none;
    color: #5894A6;
    font-size: 22px;
    }

.link-style-1:hover {
    text-decoration: none;
    color: #505050;
    }

.link-style-2 {
    text-decoration: none;
    color: #505050;
    font-size: 15px;
    }

.link-style-2:hover {
    text-decoration: none;
    color: #5894A6;
    }

.link-style-3 {
    text-decoration: none;
    color: #505050;
    font-size: 17px;
    }

.link-style-3:hover {
    text-decoration: none;
    color: #5894A6;
    }

.link-style-4 {
    text-decoration: none;
    color: #5894A6;
    font-size: 15px;
    }

.link-style-4:hover {
    text-decoration: none;
    color: #505050;
    }

    Are “colour”, “text-decoration”, “:hover”, “font-size” perhaps not enough to overwrite the default settings?

    Thread Starter Foliferous

    (@revs)

    10 years, 5 months ago

    Okay, forget the post above.

    Basically, everything (more or less I think) works as long as it isn’t in the <a> tag. The problem are links therefore.

    What exactly can I do here, without affecting all the other, normal links? Anyone know?
    I have already set a .class, but it doesn’t change anything at all. Really frustrating 🙁

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    Have you checked Firebug for the correct classes to use?

    Thread Starter Foliferous

    (@revs)

    10 years, 5 months ago

    I just downloaded it, but I’m unsure, what exactly do I have to inspect? I can inspect the links of my menu, it will just show me the code that I typed myself.

    Should I inspect other links perhaps? Because I tried to do so, but nothing moves when I’m on the CSS tab.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    If it’s the menu links you want to style, right click on one of them and press “Inspect element”.

    When the toolbar pops up look along the right-hand side for the CSS that is currently used to style it. Do you see that?

    Thread Starter Foliferous

    (@revs)

    10 years, 5 months ago

    Yeah I see it now! There’s a ton of stuff, a million words… I could paste it all in here, but it will probably be useless?

    Thread Starter Foliferous

    (@revs)

    10 years, 5 months ago

    Excuse-me, I don’t think I got it right actually. I realised the thing with the right-click didn’t work properly, I’m on Mac on Safari and Safari apparently has its own Firebug-like thing. So as I right-clicked the element, it opened it in Safari’s “Firebug”.

    What I’m unsure is what to look out for. I know that it’s <a>, but is that all? It’s all it seems to show me, or I don’t know how to use it. I know that if I change this tag, it will work, but it won’t leave the other links of the site unaffected, sadly.

    Michael

    (@alchymyth)

    10 years, 5 months ago

    what is the exact html code of the link section in the textwidget (or at least part of it)?

    Thread Starter Foliferous

    (@revs)

    10 years, 5 months ago

    This is the HTML code:

    <a href="random-page" class="link-style-1">LINK</a>

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    10 years, 5 months ago

    Do you need to override these styles outlined in red: http://snag.gy/b8YQI.jpg ?

    Thread Starter Foliferous

    (@revs)

    10 years, 5 months ago

    I think those are only for the navigation, no?

    My “menu” isn’t really a menu as defined in the WordPress world. It’s just links and HTML in the “Text” widget.

    Michael

    (@alchymyth)

    10 years, 5 months ago

    try to make the styles more specific like:

    .widget-area .widget .link-style-1 {
    text-decoration: none;
    color: #505050;
    font-size: 17px;
    }

.widget-area .widget .link-style-1:hover {
    text-decoration: none;
    color: #5894A6;
    }
    Thread Starter Foliferous

    (@revs)

    10 years, 5 months ago

    Thanks, that’s kind of what I was looking for! 🙂

    It does work better now. text-decoration and font-size work, color still doesn’t however. What other attributes can I use? And where do you find these?

    Thanks again, it was a big step forward.

    Michael

    (@alchymyth)

    10 years, 5 months ago

    color still doesn’t however.

    maybe the :visited style of the parent theme is still overwriting your link color;
    try for example:

    .widget-area .widget .link-style-1:visited {
    color: green;
    }
Viewing 15 replies - 1 through 15 (of 16 total)
1 2
  • The topic ‘Overriding link styles?’ is closed to new replies.