Hello BUYI LI, good find and point! A really underestimated core feature. Joomshaper seems to focus on PageBuilder Addon styling...
Hence that Joomla PageBreak uses a total different markup. Joomla core output is Bootstrap 2 related, and PageBuilder is name-spaced Bootstrap 3. So, sliders and tabs are not compatible out-of-the-box...
But I agree with you,
I would also expect to find a styling that matches the main template. At least for some Joomla core stuff and pages like "Single Contact" etc.
Either Joomshaper would have to supply "Overrides", or add extra CSS for those areas...
For the time being, here is a quick and dirty solution for the
Tabs style. Put it in your external
custom.css or the custom code tab in your template style settings.
/* JS Revibe - Joomla core PageBreak - Tabs */
/* link color magenta = #38434a*/
dl.tabs {
float: left;
margin-top: 30px;
margin-bottom: 10px;
border: solid 1px #e9eaed;
width: 100%;
}
dl.tabs dt.tabs {
float: left;
padding: 10px 15px;
background-color: transparent;
}
dl.tabs dt:hover {
background-color: transparent;
}
dl.tabs dt.open {
background-color: #FFF;
border-bottom: 1px solid #FFF;
}
dl.tabs dt.tabs h3 {
margin: 0;
font-size: 1.1em;
font-weight: 500;
}
dl.tabs dt.tabs h3 a {
color: #38434a;
border: none !important;
-webkit-transition: 400ms;
-o-transition: 400ms;
transition: 400ms;
}
dl.tabs dt.tabs h3 a:hover {
color: #ed145b;
text-decoration: none;
}
dl.tabs dt.open h3 a {
color: #ed145b;
text-decoration: none;
}
div.current dd.tabs {
margin: 0;
padding-top: 10px;
clear: both;
background-color: #FFF;
font-weight: 500;
}
