[Resolved] How To Underline links only in single post and page?

Home Forums Support How To Underline links only in single post and page?

This topic contains 5 replies, has 2 voices, and was last updated by  Leo 1 week, 6 days ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1284728

    Ravi 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?

    #1284906

    Leo Customer Support

    Hi 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?

    #1284913

    Ravi Dixit

    Hey, 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?

    #1284998

    Leo Customer Support

    Can 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;
    }
    #1285280

    Ravi Dixit

    I 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

    #1285914

    Leo Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.