[Support request] Hyperlink styling: apply only to content, not to navmenu?

Home Forums Support Hyperlink styling: apply only to content, not to navmenu?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #892176
    Daniel

    I’ve read through a lot of the helpful tips about styling only the links within the content field on my Elementor template, but I’ve been unable to apply the style to “only” on the content. Note how the logo and navmenu have the same link characteristics on the webpage?

    #892287
    Leo
    Staff
    Customer Support

    Hi there,

    Have you checked with Elementor on this?

    They should be able to help you out better as everything in your site is coming from Elementor.

    Let me know πŸ™‚

    #892290
    Daniel

    Thanks, Leo. I’ll reach out to them.

    #892291
    Leo
    Staff
    Customer Support

    Let me know if they aren’t able to help πŸ™‚

    #892733
    Daniel

    I heard from Usman at Elementor. I prolly didn’t explain my concern well enough.

    ====

    Hi Daniel,

    Thank you for reaching out to us.

    If you see at the homepage which is https://culturefeed.com/, there is no underline which means you’re using custom styles which is not an elementor’s issue. However, see this file
    https://culturefeed.com/wp-content/cache/autoptimize/css/autoptimize_f80995542931e551ab9363765e43230d.css

    Autooptimize is generating a css which has this code

    a:link {
    color: #000;
    border-bottom: 5px solid Red;
    }

    You don’t need that code since that is filling the header with an underline. Rest looks good. Also, we don’t provide support for the custom code and still wanted to help the best I could. This css can be added by 3rd party plugin as well so please make sure to contact the according authors so they can help you with that and we do LOVE helping customers.

    Have a good day!

    ====

    That’s a fine and nice answer, but, unfortunately I’m a hack at most of this.

    I did, indeed, insert custom css (that bit about the 5px solid red underline), onto a template page, but I guess I still don’t know if I need to insert additional css on the page to define which areas I specifically need to not be underlined. Can you point me to some place where I can research what I need to do? Here’s a brief action-shot of where I’m putting the code. https://drive.google.com/file/d/1kz3AULXTBPMEGDFC9j40YVZpALWSSTS2/view

    #892917
    David
    Staff
    Customer Support

    Hi there,

    is the CSS being added to the widget or the page in Elementor?

    #892926
    Daniel

    Directly onto the “Custom CSS” panel on the page in an Elementor template. https://drive.google.com/open?id=1kz3AULXTBPMEGDFC9j40YVZpALWSSTS2

    #892933
    David
    Staff
    Customer Support

    So on that section/page you had selected in the video – on the advanced tab you can add a CSS Class – give it one e.g post-template then change your CSS to this:

    .post-template a:link {
        color: #000;
        border-bottom: 5px solid Red;
    }
    #892944
    Daniel

    Awesome! It worked beautifully! I sure am learning a lot from you guys.

    Thank you!

    #892950
    David
    Staff
    Customer Support

    Awesome glad to be of help. When adding CSS to any specific part of the elementor sections / templates / columns ( or whatever ) its always best to add a CSS Class. It will keep it specific to only those elements that have that class. You can then move the CSS to your Child Theme Style Sheet or Customizer > Additional CSS. Its much easier to keep track of it all and make changes to it from one place.

    #893031
    Daniel

    I guess it’s a related issue, but the underlines are back, but only at the bottom of the page. https://culturefeed.com/beyond-good-intentions/

    #893033
    David
    Staff
    Customer Support

    If you move the class and that CSS to the specific section that holds your content then it should only apply to that.

    #893054
    Daniel

    Ok. I’ll keep tinkering with it.

    #893076
    David
    Staff
    Customer Support

    Also try changing the class post-template to something else, it was a bad choice as i think its being used elsewhere on the template itself. Name it something unique and relevant, i generally prefix my css with my initials eg. db-post-template-style

    #893228
    Daniel

    That worked like a charm!

    Thanks!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.