Tab refinement

[jcockroft64]

Tabs should have a more professional look. Tabs should be smaller and possibly rounded edges.

[jcockroft64]

Color change request: Border Color: #A58A60 Title Active Color: #6F5A2E Content color: #1E1E1E

[jcockroft64]

btw - i'm not sure how to change the color of the non-active title. Too me, it is too black. Can you find out how to change it? It might be embedded in the Theme. I'd like it to be a lighter shade of black.

[russellelliott]

All this can be easily changed by going into the tab’s “Style Section” and changing those respective fields

Border Color: Tabs -> Border Color

• Set to #A58A60

Title Active Color: Tabs -> Title -> Active Color

• Set to #6F5A2E

Title Non-Active Color: Tabs -> Title -> Color

• I set this to #444444

Content Color: Tabs -> Content -> Content Color

• Set to #1E1E1E

[jcockroft64]

Did this really get implemented? I'm seeing the old colors when i refreshed this page. Compare this to https://www.sierrahiking.net/wp-admin/post.php?post=7248&action=elementor#

[russellelliott]

The values are set correctly on my end. I updated the page again. Does it look right on your end?

Tab Border Color

Tab Background Color

Engaged Tab Color

Non-engaged Tab Color

Content Color

Result

[jcockroft64]

Background color: #F9F7F5

[russellelliott]

Fixed tab background color

[russellelliott]

Tabs are now smaller and have rounded edges.

Here's how you can apply custom CSS to your entire site with Elementor Pro https://elementor.com/help/global-custom-css/

1. From the Elementor Editor, click the hamburger menu in the upper left of the widget panel.
2. Click Site Settings
3. Click Custom CSS tab under the Settings heading
4. Enter the CSS code that you wish to apply globally across your site

Here's the custom CSS I used

/*Tab Corner Rounding*/
.elementor-tab-title {
    border-radius: .4em .4em 0 0;
}

/*Tab Padding*/
.elementor-widget-tabs .elementor-tab-desktop-title{
    padding: 10px 10px;
}

Border Radius The border-radius has 4 parameters: The first 2 values are the top corners. The second 2 values are the bottom corners. The top corners are rounded while the bottom ones are not. Here's more info about border radius: https://www.w3schools.com/cssref/css3_pr_border-radius.asp

I found the source code in the comment section of this video: https://www.youtube.com/watch?v=uwszJORxqBE

Padding I reduced the tab padding; before it was 20px on the top and bottom and 25 to the left and right. Now I have it set for 10 px for all directions.

Here's how I got the CSS tags for the tabs: Right click the Tabs widget while viewing the published page, click “Inspect Element” The CSS with the .elementor-widget-tabs and .elementor-tab-desktop-title tags control the padding within the tabs.

[jcockroft64]

The tabs are looking good. Could you reduce the height of the tab by 25% ? They are too tall right now. Cheers.

[russellelliott]

Vertical padding of tabs is now 7px.

[russellelliott]

Fixed the padding issue. I added !important in the padding CSS to overwrite the default CSS for the tab padding. The changes are also reflected in the "North Lake Hike" page which also utilizes these tabs.

Here's the CSS:

/*Tab Corner Rounding*/
.elementor-tab-title {
    border-radius: .4em .4em 0 0;
}

/*Tab Padding*/
.elementor-widget-tabs .elementor-tab-desktop-title{
    padding: 8px 10px !important;
}

[jcockroft64]

Wow - that was an important secret sauce!