changing icons/modifying icons

Permalink Browser Info Environment
Is it possible to modify the icons used for accordions in magic tabs? Attached is something I'm looking toward accomplishing.

thanks

1 Attachment

Type: Pre-Sale
Status: Resolved
View Replies:
JohntheFish replied on at Permalink Reply
JohntheFish
The icons are inserted as css:after content: property in the magic tabs block template css, so you can change them by making a custom template. Copy both css and php for one of the existing templates into a new template directory. Self contained starter is a good place to start, or maybe the bootstrap themes template if you are using elemental or similar:

/packages/jl_magic_tabs/blocks/jl_magic_tabs/templates/self_contained_starter/
to
/application/blocks/jl_magic_tabs/templates/your_template_name/

Then in the last few lines of the template, look for
/* + to indicate expandable */
.jl_magic_tabs_self_contained_starter.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion>ul.jl_magic_tabs>li>a:after {
    content: "+";
    font-weight:900;
    float: right;
    text-decoration: none;
    font-size:140%;
}
/* - to indicate collapsible */
.jl_magic_tabs_self_contained_starter.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion>ul.jl_magic_tabs>li>a.jl_magic_tabs_self_contained_starter_active:after {
    content: "-";
}


Web XSS security prevents you inserting html within a content: property, so you cant simply enter a font awesome tag. But you can trick it by directly entering font awesome character codes (or any icon font your theme supports). Here I have looked inside the font awesome style sheet to extract the character codes for folder open and folder close. I have also specified that the content: property uses the font awewsome font.
/* fa folder closed to indicate expandable */
.jl_magic_tabs_self_contained_starter.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion>ul.jl_magic_tabs>li>a:after {
    content: "\f07b";
    font-family: "FontAwesome";
    font-weight:900;
    float: right;
    text-decoration: none;
    font-size:140%;
}
/* fa folder open to indicate collapsible */
.jl_magic_tabs_self_contained_starter.jl_magic_tabs_controls.jl_magic_tabs.jl_magic_tabs_accordion>ul.jl_magic_tabs>li>a.jl_magic_tabs_self_contained_starter_active:after {
    content: "\f07c";
}


Let me know how you get on and if you need further assistance.
JohntheFish replied on at Permalink Reply
JohntheFish
I thought the above would make a good howto note, so have written it up in a little more detail at:

https://www.c5magic.co.uk/add-ons/magic-tabs/using-font-awesome-icon...

concrete5 Environment Information

not currently logged in

Browser User-Agent String

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.