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 into the Tab Module Settings and to Custom CSS and add the class lb_fab_tabs; exit and save, update or publish your page or post.

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 into the Tab Module Settings and to Custom CSS and add the class lb_fab_tabs; exit and save, update or publish your page or post.

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 into the Tab Module Settings and to Custom CSS and add the class lb_fab_tabs; exit and save, update or publish your page or post.

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 into the Tab Module Settings and to Custom CSS and add the class lb_fab_tabs; exit and save, update or publish your page or post.

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.