Tagged: ,

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • July 30, 2020 at 7:14 pm #1234201
    orthodrone_gmbh

    It appears there is a line or bottom border beneath all tab sections, which is also shown on the documentation page (https://kriesi.at/themes/enfold-2017/elements/tab-section/). How can this be removed? Please let me know. Thanks!

    July 31, 2020 at 3:56 am #1234274
    Jordan Shannon

    Hey orthodrone_gmbh,

    Add this to quick css:

    .main_color div{
border:none!important;
}

    Best regards,
    Jordan Shannon

    September 4, 2022 at 10:11 pm #1363839
    4ndreaux

    Hi,

    I just ran into the same issue. Now this snippet doesn’t remove the bottom border from the tabbed section, but removes all the borders from headings. I can’t pinpoint which element in the DOM has the border actually :(

    Any ideas?

    Thanks,

    Gabriel

    September 4, 2022 at 10:16 pm #1363842
    Mike

    Hi,
    Please link directly to the page with the issue so we can examine it.
    If the border is not clearly seen, please include a screenshot and paste the image URL in your post.

    Best regards,
    Mike

    September 4, 2022 at 10:31 pm #1363845
    4ndreaux

    The site is not live yet so I’m unable to provide a link, but I’ll do as many screenshots as needed.
    I was trying to find out which element has the border property I should try to negate in Quick CSS and didn’t find any. The only instance I had the border disappear is when I commented out the display: table-cell in Chrome’s inspector. Of course, this breaks the whole tab section, but nothing else seems to disturb that border… looks like the border: none in there does nothing.

    .js_active .av-layout-tab {
    display: table-cell;
    border: none;
}

    I added a screenshot as private bit.

    Thanks,
    Gabriel

    • This reply was modified 2 years, 3 months ago by 4ndreaux.
    September 4, 2022 at 10:50 pm #1363848
    Mike

    Hi,
    Is the next section a color section? It could be the border top for the next one.
    Try Enabling the Avia Layout Builder Debugger for your site, then copy the page shortcode for the page and save it to a plain text file “.txt” and upload to DropBox, or such, I can then add your page to my text site and inspect.
    2022-09-04_024.jpg

    Best regards,
    Mike

    September 4, 2022 at 10:52 pm #1363849
    4ndreaux

    No, because if I re-arrange the sections, the border goes with the Tab Section always.
    I’ll try the debugger thing and get back to you.

    September 4, 2022 at 11:00 pm #1363850
    4ndreaux

    Hi,

    Here’s the debug output in Dropbox.

    Actually the next element is a heading, not even a section.

    Let me know if you need anything else.

    Cheers,
    Gabriel

    September 4, 2022 at 11:13 pm #1363852
    Mike

    Hi,
    Thanks for the debugging shortcode, in my test it was the next section border color, this clears:

    #after_tab_section_1.main_color {
border-color: transparent;
}

    or to target more sections on your site try:

    .main_color {
border-color: transparent;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    September 4, 2022 at 11:38 pm #1363853
    4ndreaux

    Hi Mike,

    I’ve done some testing too. Actually if the tabbed section is the last section, there is no border, if _any_ section is after it, there is a border, but it doesn’t matter what section it is and those sections don’t have any border anywhere else. Weird.
    I’ll try putting in what you sent.
    The second one I guess I tired already as it was a suggestion here in the forums, but that seems to remove the line in the headers as well.

    I really do appreciate your prompt help and I can’t stress this enough.

    Thanks,
    Gabriel

    • This reply was modified 2 years, 3 months ago by 4ndreaux.
    September 5, 2022 at 12:00 am #1363857
    Mike

    Hi,
    Glad to hear, the auto IDs such as after_tab_section_1 could be different for me than you on the page DOM,
    typically I don’t see this issue, but if you have changed the page from the shortcode that I received the auto IDs also change.
    Once you can post this page online we can advise.
    Let us know when we can login to your site and see the page.

    Best regards,
    Mike

    September 5, 2022 at 12:05 am #1363858
    4ndreaux

    Hi,
    I’ve just deployed the site so I’ll be creating a user for you. Maintenance is on so you’ll need a user to see the content.
    Drop me an e-mail address so I set it up for you and you’ll be able to do a password reset.

    Thank you,
    Gabriel

    September 5, 2022 at 12:29 pm #1363901
    Yigit

    Hi Gabriel,

    You can use (Email address hidden if logged out) but please post login credentials here privately so any available moderator can look into it :)

    Regards,
    Yigit

    September 5, 2022 at 1:18 pm #1363911
    4ndreaux

    Hi,
    Here are the login information. Please do a password reset to access the site.
    I made the user an Editor. Do you need Administrator access?
    Cheers,
    Gabriel

    • This reply was modified 2 years, 3 months ago by 4ndreaux.
    September 5, 2022 at 1:58 pm #1363916
    Yigit

    Hi Gabriel,

    I think I should have mentioned that (Email address hidden if logged out) is a no-reply email, no one has access to it. So please set a random password for the account and share privately :)

    Regards,
    Yigit

    September 5, 2022 at 2:08 pm #1363919
    4ndreaux

    Hi,
    Hmmm… :D
    Ok, here’s the password in private.
    Cheers,
    Gabriel

    September 5, 2022 at 2:19 pm #1363922
    Yigit

    Hi Gabriel,

    Thanks! :)

    Following code that Mike shared hides the border on my end

    
#after_tab_section_1.main_color {
  border-color: transparent;
}

    You can also use following code

    
#after_tab_section_1 {
  border: none;
}

    If you would like to hide the border next to heading, please edit Special Heading element and choose left aligned Modern style :)

    Best regards,
    Yigit

    September 5, 2022 at 2:21 pm #1363923
    4ndreaux

    Hi,
    Yes, it worked on my end too. However, why is it there in the first place?
    If that’s the last section, there is no border. If there is ANY section after it, there is a border.

    And no, I don’t want to hide the line in headings, that’s the point :)
    Thanks for the help so far. I’ve got other questions, I’ll open separate threads for them I guess.
    Cheers,
    Gabriel

    September 5, 2022 at 2:37 pm #1363924
    Yigit

    Hi Gabriel,

    It is there because by default all automatically generated sections (“after_tab_section” for example) have a border and changing that unfortunately breaks stuff. So hiding those borders using CSS is the safest solution so far.

    Yes, please start separate threads for your other questions. Shall we go ahead and mark this one as resolved? :)

    Best regards,
    Yigit

    September 5, 2022 at 3:08 pm #1363931
    4ndreaux

    Hi,
    Yes, thank you. I wasn’t aware that the border is there on purpose. Yes, in that case, I get that you have to remove it with CSS.
    I was only stunned by not being able to pinpoint which DOM element it gets applied to.
    Thank you for all your help guys!
    Cheers,
    Gabriel

    September 5, 2022 at 3:13 pm #1363934
    Yigit

    Hey,

    You are welcome, Gabriel! Glad we could help :)

    Let us know if you have any other questions and enjoy the rest of your day!

    Regards,
    Yigit

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Remove bottom border from tab section’ is closed to new replies.