Styled text in tab title?
Permalink Browser Info Environment
Hello John -
I'm using two sets of Magic Tabs on a site's home page, one to detail 'News' and another to list 'Announcements'. Each set is ordered hierarchically in time, with the latest item at the top.
I would like to draw attention to the latest item(s) in each tab set, either by adding a coloured bullet point before the title text (red, amber, etc) or by adding a coloured vertical line before the text.
Is there a way to achieve this?
Thanks for your help!
Regards
Andrew
I'm using two sets of Magic Tabs on a site's home page, one to detail 'News' and another to list 'Announcements'. Each set is ordered hierarchically in time, with the latest item at the top.
I would like to draw attention to the latest item(s) in each tab set, either by adding a coloured bullet point before the title text (red, amber, etc) or by adding a coloured vertical line before the text.
Is there a way to achieve this?
Thanks for your help!
Regards
Andrew
| Type: | Ticket |
|---|---|
| Status: | Archived |
Slight correction, the example above was for the accordion layout. Doing it for tabs will be similar, but obviously with a different selector.
Hopefully that is enough for you to style a template. If you need further help, post here to let me know and I can go into mode detail.
John - thanks for the very swift reply! I'll give it a go and see how I get on :-)
Andrew
Andrew
This is a bit of a slaphead moment. I just realised there is a much easier solution.
MT provides an index class and a global index class to every single tab. The MT Rainbow and Continuous Rainbow templates demonstrate use of this class. If you look at those templates, you will see the use of the indexing to create the rainbow tabs. All you need is to take the css trick used in Rainbow for the first tab/accordion and add it into your own template (likely still based on self contained starter).
MT provides an index class and a global index class to every single tab. The MT Rainbow and Continuous Rainbow templates demonstrate use of this class. If you look at those templates, you will see the use of the indexing to create the rainbow tabs. All you need is to take the css trick used in Rainbow for the first tab/accordion and add it into your own template (likely still based on self contained starter).
Grand! Thanks for taking the trouble to point that out. I'll try it later today...
Andrew
Andrew
Apologies for carrying this on. I have achieved pretty much what I want by modifying the view.css file for the 'self-contained' starter template: I have made the accordion tab's left margin red (3px) and added a matching red dot on the tab's right side via Font Awesome. The new style, though, repeats for every tab below the first.
I have tried inserting your 'first-child' snippet in various places in view.css, but I guess that's not the thing to do - either all tabs or no tabs change in response to it! Which suggests I'm going about this the wrong way. Could you point me in the right direction, please?
Thanks!
I have tried inserting your 'first-child' snippet in various places in view.css, but I guess that's not the thing to do - either all tabs or no tabs change in response to it! Which suggests I'm going about this the wrong way. Could you point me in the right direction, please?
Thanks!
No problem, any help you need. You caught me late on a Friday night, so this is not as thorough a reply as I would like to provide.
You are probably better off ignoring the :first-child selector and using the class .jl_magic_tabs_ix_1 to select the first tab <li> in the set (or jl_magic_tabs_ix_2 for the second tab etc.....) and then the descendant <a>. If you repeat the section in self contained starter that styles the part of the tab you want and add that style.
So try something like:
Let me know and I can check back in again on Sunday if you need further assistance.
You are probably better off ignoring the :first-child selector and using the class .jl_magic_tabs_ix_1 to select the first tab <li> in the set (or jl_magic_tabs_ix_2 for the second tab etc.....) and then the descendant <a>. If you repeat the section in self contained starter that styles the part of the tab you want and add that style.
So try something like:
.jl_magic_tabs_self_contained_starter ul.jl_magic_tabs li.jl_magic_tabs_ix_1 a{ background-colour:pink; } .jl_magic_tabs_self_contained_starter li.jl_magic_tabs_ix_1.jl_magic_tabs_self_contained_starter_active a.jl_magic_tabs_self_contained_starter_active { background-colour:purple; }
Let me know and I can check back in again on Sunday if you need further assistance.
Ha!! Excellent. That's it. Thanks very much, John. And apologies for disturbing your Friday evening :-)
Cheers
Andrew
Cheers
Andrew
Great. I don't know how much you have done with custom templates before. Just in case you don't already know, put the custom template beneath /applications, not in the actual package, or it will get lost whenever the package is updated.
(Info in the c5 core docs on custom templates)
When its all running, please spare a couple of minutes to post a quick review.
(Info in the c5 core docs on custom templates)
When its all running, please spare a couple of minutes to post a quick review.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
Attention: Since there has been no activity on this issue for two weeks, this issue has been automatically archived.
To re-open this issue, reply to this message.
To re-open this issue, reply to this message.
For the second part of your question, you can find a solution in
https://www.concrete5.org/marketplace/addons/magic-tabs1/support/cha...
You can differently format the first tab in any set by using the :first-child selector on the <li> elements that are used for tabs.
(untested, you will need to change the wrapping class .jl_magic_tabs_self_contained_starter to that used in your template)
You can use similar to modify the li itself or other aspects of the tab.
If relevant, you may also need to similarly style the markup used for accordions and for vertical tabs.