- This topic has 5 replies, 2 voices, and was last updated 3 years, 10 months ago by Leo.
-
AuthorPosts
-
May 14, 2020 at 11:49 am #1284728Ravi Dixit
I am using this code to customize the link, added border at the bottom and changed the colour.
/* Links Formatting*/ .single .entry-content a, .single .entry-content a:visited, .single .entry-content a:hover, .page .entry-content a, .page .entry-content a:visited, .page .entry-content a:hover { border-bottom: 2px solid #2b60de; color: #2b60de; font-weight:bold; }
This code is getting apply on all links, but I want it to apply on the single blog post and page only and in the only content area.
Can you help with this?
May 14, 2020 at 3:09 pm #1284906LeoStaffCustomer SupportHi there,
but I want it to apply on the single blog post and page only and in the only content area.
That’s what the code should already be doing.
Can you link me to the page/post and guide me to the element where the border should not be applied?
May 14, 2020 at 3:23 pm #1284913Ravi DixitHey, Leo!
It should be working as you said but it is not… Whenever I add post-show through Elementor, it is underlining the title, even images and buttons.
And on every link, that’s why I added these lines of codes to remove from where I don’t want it…
.single .entry-content a, .single .entry-content a:visited, .single .entry-content a:hover, .page .entry-content a, .page .entry-content a:visited, .page .entry-content a:hover { border-bottom: 2px solid #2b60de; color: #2b60de; font-weight:bold; } /*no underlink in toolkit page*/ .elementor-widget-heading .elementor-heading-title>a { border-bottom: none; } .elementor-widget-heading .elementor-heading-title>a:hover { border-bottom: none; } .elementor-icon i, .elementor-icon svg { width: 0em } /*no underlink in toolkit page*/ /*no underline in headings*/ .single .entry-content h2 a, .single .entry-content h3 a, .single .entry-content h4 a { border-bottom: none; } .single .entry-content h2 a:hover, .single .entry-content h3 a:hover, .single .entry-content h4 a:hover { border-bottom: none; } .single .entry-content h3 a:hover { border-bottom: none; } .entry-content .wp-show-posts a, .entry-content .wp-show-posts a:visited, .entry-content .wp-show-posts a:hover { border-bottom: 0px; color: black; } .abh_tab_content .abh_text a { border-bottom: 0 !important; } .page-numbers { border-bottom: 0 !important; color: black; }
You can check the current example on our blog page: staymeonline.com/blog
Can you provide me one code that works on links only in blog post and page under the content area only?
May 14, 2020 at 6:45 pm #1284998LeoStaffCustomer SupportCan you provide me one code that works on links only in blog post and page under the content area only?
The CSS we provided does exactly that – The issue here is that Elementor is used and post title links are added in static pages which don’t normally happen by default.
The page you’ve linked is indeed a static page – you’ve just used Elementor to insert posts in them, but it’s still a static page.
The solution you are using to overwrite them is actually correct as there is no way to include all the conditions in one CSS.
Another solution is that we can exclude the CSS when Elementor is activated so the CSS will only work on pages that are built with GP:
body.single:not(.elementor-default) .entry-content a, body.single:not(.elementor-default) .entry-content a:visited, body.single:not(.elementor-default) .entry-content a:hover, body.page:not(.elementor-default) .entry-content a, body.page:not(.elementor-default) .entry-content a:visited, body.page:not(.elementor-default) .entry-content a:hover { border-bottom: 2px solid #2b60de; color: #2b60de; font-weight:bold; }
May 15, 2020 at 1:56 am #1285280Ravi DixitI have pasted the code you shared… And now it is working good.
I am seeing the bottom border only on single post and page.
Thanks
May 15, 2020 at 8:58 am #1285914LeoStaffCustomer SupportNo problem 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.