Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

How to make SP Tab Add-on in OneClip template behave fully responsively ?

Featured Lock Resolved Task
Hi, could you confirm -

What the current custom.css code is needed to make the SP Tab add-on in OneClip behave the way SP Tab behaves responsively in Aspasia template ?

Background testing from my end (if you need):

Basically my issue with how to ensure that my custom.css will make SP Tab in OneClip behave like SP Tab in Aspesia template. Currently my custom CSS from Firebug testing is not working too well in responsive mode because at 480px media screen width the last of my tabs item (icon/title) is not running over or folding to next line like in Aspasia.

How do I fix?

My firebug code to eventually place custom.css is as follows:

.sppb-nav-tabs > li > a {
border: none !important;
background: none !important;
color: #000;
font-weight: normal;
font-size: 18px;
padding: 10px;
line-height: 1.5em;
}


.sppb-nav > li > a {
position: relative;
display: block;
padding: 10px 15px;
}


.sppb-addon-tab .sppb-nav-tabs {
background-color: #f7f7f7;
border: none;
border-radius: 3px;
padding: 0 5px;
margin-bottom: 40px;
text-align: center;
display: inline-flex;
}


I would greatly appreciate your expert input as to what else should be there or whether there is better CSS code to get the styling and responsive behaviour I want.

Thanks in advance.

Attachments (4)

  • firebug SP Tab styling.png
    firebug SP Tab styling.png 35.3 KB
  • @480px media row is cut off.png
    @480px media row is cut off.png 25.4 KB
  • Aspasia SP Tab.png
    Aspasia SP Tab.png 132.9 KB
  • Aspasia SP Tab @360px screen width .png
    Aspasia SP Tab @360px screen width .png 58.1 KB

7 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi,

I have taken screenshots mobile & tablet devices.

Mobile
http://prntscr.com/e3g6gp

Tablet
http://prntscr.com/e3g6xn

Note: We are really sorry to say that, we don't allow customization support.

-Thanks

TDA

More than a month ago #Permalink
Hi,

Thanks you have posted same screenshot as I provided...

Not to worry though, I have reduced the number of tabs titles I have used and hence when viewed at mobile screen size the stacking doesn't really matter ! Not pretty but...I sure that most folks using the OneClip will have more than 2 tabs. So a nice responsive view at mobile screen size for you SP Tab add-on would be another feature to fix in OneClip too.

Thanks all the same for your response. I'll play around and update myself on bootstrap...and do my custom.css myself

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks you have posted same screenshot as I provided...

Not to worry though, I have reduced the number of tabs titles I have used and hence when viewed at mobile screen size the stacking doesn't really matter ! Not pretty but...I sure that most folks using the OneClip will have more than 2 tabs. So a nice responsive view at mobile screen size for you SP Tab add-on would be another feature to fix in OneClip too.

Thanks all the same for your response. I'll play around and update myself on bootstrap...and do my custom.css myself


Hi, Thanks for your reply. You can try our sp page builder module with sp page builder Tab Addon. Thanks

TDA

More than a month ago #Permalink


Hi, Thanks for your reply. You can try our sp page builder module with sp page builder Tab Addon. Thanks


Hi, the SP Tab add-on within SP Page Builder works OK in responsive mode. (see screenshot attached). I didn't like the styling and since it was so easy to apply custom CSS to change the appearance I wanted the Aspasia like style CSS to apply and make a new style.

I don't find the the SP Tab default style in the OneClip template is that great but I will see my website users response and ability to 'understand' tab behaviour before seeking further style changes to make the functionality clearer and neater visually.

Thanks for your support to date - web design projects move fast! I will revisit this post at some future time -

Attachments (1)

  • Screenshot 2017-02-28 21.19.09.png
    Screenshot 2017-02-28 21.19.09.png 19.6 KB

Toufiq - Staff

More than a month ago #Permalink
Hi,

Please inspect element from your browser tab addon & write down new css under your addon.

-Thanks

TDA

More than a month ago #Permalink
Hi,

Please inspect element from your browser tab addon & write down new css under your addon.

-Thanks


Hi,

That was my intention - sorry didn't mean to confuse post by I had initially pointed out that my SP Tab add-on in OneClip template visual layout screenshot was effected via Firebug in browser whilst tailoring/testing to a custom new style! Your template affords customisation so why no try different things and ask for help if custom CSS is missing some of the code needed to make my Firebug testing completely responsive as wanted !?

To recap task, I was able to manipulate / customise the visual layout of my SP Tabs add-on item titles to make them like the style in the Aspasia template but when my layout came to be tested at mobile screen size the responsive feature broke - Hence, why I was asking for further input.

When I was seeking assistance my SP Tabs add-on had 6 to 7 items and they did not look good or were particular user friendly in terms of allowing the SP Tabs add-on titles to be read on my webpage! Hence why I was testing around for a better layout akin to the SP Tabs title and icon layout design demonstrated in the Aspasia template.

Surely you cannot restrict your users to 4 items in the SP Tabs add-on within OneClip because that is how much the current style looks good at.

I enjoy using your product hence the more insight the better. Sure it will help other users too - cheers!


Else please design a new style for SP Tabs add-on in OneClip akin to SP Tabs in Aspasia template to allow users to add many Items in SP Tabs add-on. At the moment your SP Tabs style options don't allow for lots of horizontal titles to be included as Items!!! Well technically it is possible but it does not show up nice on front end of a web page. I look forward to another template update then!!


Cheers/Thanks!


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 106
Sifat

Sifat

Total Accepted Answers: 102
Toufiq

Toufiq

Total Accepted Answers: 41
Pavel

Pavel

Total Accepted Answers: 4
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us