Archived topic
Need to customize Links within content of posts and pages
10 replies · Started by Amit on April 27, 2021
I need the following css to the links within content:
1. Bold
2. Add border-bottom:1px
But I don't want it to apply on:
1. Wp show post blocks
2. Few Specific Pages
Also, the bold attribute applies to the headings tag as well which makes the appearance a little weird.
Here is the code I've been using -
/* Underline and bold the Links inside Content */
.single-post .inside-article a {
font-weight:600;
}
.single-post .inside-article a:hover {
border-bottom:1px solid #007ac7;
}
You should be able to use a Hook element for this.
You can place something like this within its code area:
<style>
.inside-article a:not(.wp-show-posts-inner a){}{
font-weight:600;
}
.inside-article a:not(.wp-show-posts-inner a):hover {
border-bottom:1px solid #007ac7;
}
</style>
And set the display rule location to the pages where you want this applied.
This way, the CSS only applies on pages where you set the display rule location on.
Note: I didn't see any WP Show posts list on any of the pages you've linked. Perhaps you're using another post list(Ultimate Addons for Gutenberg).
I will use it.
I mean link styling only in blog entries. I want to change the color and make it bold.
What kind of hook to choose and some simple CSS for that?
Wp Show posts is used for related post block at the end of each post. But this code
/* Underline and bold the Links inside Content */
.single-post .inside-article a {
font-weight:600;
}
.single-post .inside-article a:hover {
border-bottom:1px solid #007ac7;
}
doesn't applies on the pages. I need the links within the content to reflect the changes. But on a few pages, I use H3 headings as links (I made some category pages which have these), so don't want to apply on that too.
Hi Amit,
The CSS you added is limited to single post page, you'll need to remove the .single-post selector.
https://www.screencast.com/t/80DispViLE
Have you tried Elvin's CSS and solution? You can exclude the CSS from applying to some specific pages by adding them to the excludes list under location.
Hi Ying, got it!
About the plugin, I am not in favor of adding more as our GP theme has many functionalities, just have to explore.
Now my question I guess is a little solved but can be stated as:
I want to Bold and Underline(border-bottom:1px solid #007ac7;) in all posts and pages, but want to exclude certain pages from that.
I have added 'Element Controls'https://generatepress.com/forums/topic/header-layout-control-for-client/#post-1421567
and it would be great if I can add CSS for this customization via Hook and exclude the ones that I choose in 'Element Controls'.
I have added ‘Element Controls’https://generatepress.com/forums/topic/header-layout-control-for-client/#post-1421567
and it would be great if I can add CSS for this customization via Hook and exclude the ones that I choose in ‘Element Controls’.
Assuming you've added the code David provided, there should be extra display rule options on the dropdown.
You'll see "Page Element Controls" and "Post element controls". You should be able to use this for the display rule exclusion.
Can i simply add css to the hook?
Also, which hook should I use?
Hi there,
1. Yes - you add your CSS within <style></style> tags in your hook content:
<style>
/* Your CSS rules here */
</style>
2. The wp_head hook
On a genreal not for styling links within your content - if you want to avoid adding styles to non-text content links then target links that are inside a paragraph:
.inside-article p a {
/* Styles here */
}
This rule styles any <a> thats inside a <p> thats inside the inside-article container
This will avoid styling any links that are NOT within a paragraph.
Done. Thanks guys.
Glad we could be of help