Luna Bug’s Fab Tabs
Before
This is the Divi Tab Module just the way it comes. It’s really plain and boring but we will fix that.
Go to Appearances->Editor and add the following to your child theme stylesheet.css file:
/* ***** Luna Bug’s Fab Tabs ***** */ .et_pb_module.et_pb_tabs.lb_fab_tabs { border: none !important; }
.lb_fab_tabs .et_pb_tabs_controls { background-color: transparent !important; }
.lb_fab_tabs .et_pb_tabs_controls li { border-top-left-radius: 12px; border-top-right-radius: 12px; border-top: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ border-left: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ border-right: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ }
/* ***** End Luna Bug’s Fab Tabs ***** */
After
This is the Divi Tab Module with a few small changes. Much better looking!
Go to Appearances->Editor and add the following to your child theme stylesheet.css file:
/* ***** Luna Bug’s Fab Tabs ***** */ .et_pb_module.et_pb_tabs.lb_fab_tabs { border: none !important; }
.lb_fab_tabs .et_pb_tabs_controls { background-color: transparent !important; }
.lb_fab_tabs .et_pb_tabs_controls li { border-top-left-radius: 12px; border-top-right-radius: 12px; border-top: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ border-left: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ border-right: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ }
/* ***** End Luna Bug’s Fab Tabs ***** */
Equal Tab Width
This is the Divi Tab Module with a few small changes. Much better looking!
Go to Appearances->Editor and add the following to your child theme stylesheet.css file:
/* ***** Luna Bug’s Fab Tabs ***** */ .et_pb_module.et_pb_tabs.lb_fab_tabs { border: none !important; }
.lb_fab_tabs .et_pb_tabs_controls { background-color: transparent !important; }
.lb_fab_tabs .et_pb_tabs_controls li { border-top-left-radius: 12px; border-top-right-radius: 12px; border-top: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ border-left: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ border-right: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ }
/* ***** End Luna Bug’s Fab Tabs ***** */
Add a Fourth Tab
This is the Divi Tab Module with a few small changes. Much better looking!
Go to Appearances->Editor and add the following to your child theme stylesheet.css file:
/* ***** Luna Bug’s Fab Tabs ***** */ .et_pb_module.et_pb_tabs.lb_fab_tabs { border: none !important; }
.lb_fab_tabs .et_pb_tabs_controls { background-color: transparent !important; }
.lb_fab_tabs .et_pb_tabs_controls li { border-top-left-radius: 12px; border-top-right-radius: 12px; border-top: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ border-left: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ border-right: 1px solid rgba(255,255,255,0.27) !important; /* change the color to meet your needs */ }
/* ***** End Luna Bug’s Fab Tabs ***** */
And here we have the fourth tab showing equal tab widths.