Custom links class

Support
#1

Hi X,

I’m attempting to make a custom link style for hyperlinks inside an accordion. I’ve tried to do this with a class but I’m missing the mark. Can you please help out?

You can see the hyperlink styling here: Purple with Yellow underline


but only in the accordion like this:

I can change all links with global css like this (please suggest a correction if this is incorrect)
p a{
border-bottom:2px solid rgba(253, 181, 21, 0.5);
}
}
p a:hover{
border-bottom:2px solid rgba(253, 181, 21, 0.75);
transition: all 0.25s;
}

p{
line-height:1.5em;
margin-bottom: 1em;

then to make a class, I do this:
text link here

.my-link {
border-bottom:2px solid rgba(253, 181, 21, 0.5);
line-height:1.5em;
margin-bottom: 1em;
}

.my-link:hover {
border-bottom:2px solid rgba(253, 181, 21, 0.75);
transition: all 0.25s;
}

#2

Hi There,

Please don’t use general CSS like this:

p a{
border-bottom:2px solid rgba(253, 181, 21, 0.5);
}
}
p a:hover{
border-bottom:2px solid rgba(253, 181, 21, 0.75);
transition: all 0.25s;
}

p{
line-height:1.5em;
margin-bottom: 1em;
}

That is too general and it will make all your links on content area underlined. We have to use more specific selector. On accordion element class field, add accordion-links. Then let’s declare it like this:

.accordion-links .x-accordion-body a {
    border-bottom: 2px solid rgba(253, 181, 21, 0.5);
    line-height: 1.5em;
    margin-bottom: 1em;
}

Hope this helps.

#3

I’m trying to modify the attributes of the hyperlinks in blog posts on the site linked below. As you can see they are hard to spot on the page. I would like to modify them so they pop a little more and perhaps change from the dotted lines.

What would be the CSS class field I need for this?

I apologize if this was discussed somewhere else.

http://martyintheusa.com/start-spreading-newsmartys-guide-ny/

#4

I was able to adjust the hover properties of them, but not the normal ones. The code I used is listed below. What am I doing wrong that it’s not editing the non-hover setting?

.format-standard .entry-content a{
text-decoration: underline 5px #a6808c;
color: white;
font-size: 100%;
font-weight: bold;
}

.format-standard .entry-content a:hover{
background-color: #a6808c;
color: #fff;
padding: 5px;
border-radius: 8px;
font-size: 105%;
font-weight: bold;
}

#5

Hi again,

Please use the following code instead:

.format-standard .entry-content a:not(.x-btn):not(.x-img-thumbnail) {
    border-bottom: 5px #a6808c solid !important;
    text-decoration: none !important;
    color: white !important;
    font-size: 100% !important;
    font-weight: bold !important;
}

Cheers!