1. Revibe
  2. Sunday, 12 June 2016
Hello. I need to be able to break long articles into multiples "pages" using the page break option, but the tab style and slides style are almost no style (blank, no template in this part). The font size in slides and tabs are too big, I also don't how to adjust the font size. And the tabs style don't show typical tabs style at all. I attached the images. Could you help me solve this problem? Thank you very much.
Attachments (3)
Responses (4)
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;
}
  1. more than a month ago
  2. Revibe
  3. # 1
PageBreak Tabs should look like this (see attachment)
I have added some different margin on top and bottom of the tab-links, change it to your liking.
Attachments (1)
  1. more than a month ago
  2. Revibe
  3. # 2
Hello, Pepperstreet,

Thank you very much, but still have another two question:

Could you also help to improve a solution for the sliders style?

The Revibe can change various colours in different schemes, I will use different schemes in different webpages, could you let tabs style and sliders style be consistent with scheme‘s colour?

Best regards
  1. more than a month ago
  2. Revibe
  3. # 3
BUYI LI wrote:Hello, Pepperstreet, Thank you very much,...
Could you also help to improve a solution for the sliders style?

Sorry, really short on free time... Might also take more effort and work.


The Revibe can change various colours in different schemes, I will use different schemes in different webpages, could you let tabs style and sliders style be consistent with scheme‘s colour?

You mean the "Presets" colors? Then you should change my provided custom CSS accordingly. Change main color value.
If you need different colors per page on 1 site... you have to use multiple template styles. Add my CSS to your YourTemplate Style -> Tab Custom Code -> Custom CSS. Assign template style to certain menuItems.

Alternatively, this could also work with one Template-Style and MenuItem's parameter PageClassSuffix. Then you need to add more specific CSS rules for each preset color.
  1. more than a month ago
  2. Revibe
  3. # 4


There are no replies made for this post yet.
Be one of the first to reply to this post!


This forum is archived

This forum has been archived. Please use JoomShaper official support system.