Styling Hyperlinks within Content area on Blog

[eknudhol]

Whenever I attempt to change the hyperlink styling for the content, it appears to also change links on the navbar at the top of the page. I have been able to manage the content styling with the following, but struggling with the embedded hyperlinks that are part of the content.

because the page (Blog vs. Rest of site) styles are different I have to use a different hyperlink colors inside the article content.

I have tried .single-post .a:hover, for example and even tried applying a class to the content but at a loss so far.

How do I apply hyperlink styling, but only to content without impacting rest of page and nav bar?

.single-post p {
font-family: “Roboto”,“Work Sans”,sans-serif;
font-size: 18px;
line-height: 1.625;
font-weight: 300;
color: black;
overflow-x: hidden;
}

/* Single Blog Posts */
.single-post h3 {
font-weight: 300;
color: #003366;
}

/* A link that has not been visited /
el$:link {
color: blue;
text-decoration: underline;
}
/ A link that has been visited */
$el:visited {
color: blue;
text-decoration: underline;
background-color: yellow;

}

[marc_a]

Hey @eknudhol,

Thanks for reaching out!

To access the content link, you need to target the main content. See the example CSS selector below.

.single-post .x-main a:hover {
 //your CSS code
} 

.single-post .x-main p {
 //your CSS code
}

.single-post .x-main h3 {
 //your CSS code
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps.

[eknudhol]

I removed all other CSS related to the blog page / Layout and tried this but it has not affect no matter were I placed the CSS.

I did do some more investigation and noticed that .x-section was defining the content area and when I applied that to the CSS, it worked. At least I haven’t yet seen any issues on other content or other pages or posts.

Would appreciate your input as to if this is incorrect use of .x-section and why .x-main doesn’t appear on the blog page - Thanks.

.x-section p {
font-family: “Roboto”,“Work Sans”,sans-serif;
font-size: 18px;
line-height: 1.625;
font-weight: 300;
color: black;
overflow-x: hidden;
}

/* Single Blog Posts */
.x-section h3 {
font-weight: 300;
color: #003366;
}

/* A link that has not been visited /
.x-section a:link {
color: blue;
text-decoration: underline;
}
/ A link that has been visited */
.x-section a:visited {
color: blue;
text-decoration: underline;
background-color: yellow;

}

[ruenel]

Hello @eknudhol,

The x-main is the container of the page/post content area. Using the .x-section is appropriate because you only wanted to change the color of the links inside the sections.

Best Regards.