Unwanted bullets on your tabs?
Permalink Browser Info Environment
I recently processed a support request where Magic Tabs were being invaded with bullet graphics from the site's theme.
Bullets are usually declared in:
The dotAwesome theme used a different and quite neat technique of adding a background to the list element:
This list styling was carrying through to the Magic Tabs styling and putting bullet graphics by the tabs.
To overcome this, create a style to remove the background image and re-adjust the padding:
The ID (#mainShell) may need to be adjusted for other themes that use the same technique.
This style can be added to a theme, or to a template override for Magic Tabs. Attached is an example template override for Magic Tabs.
Unzip and using FTP install the template in
root/root/blocks/jl_magic_tabs/templates/bullet_proof_in_dotAwesome/
(ie in the root, NOT in the Magic Tabs package)
Then, in edit mode, on your first magic tabs block, select 'Custom Template' and this template.
This howto gives some explanation of overriding templates.
http://www.concrete5.org/documentation/how-tos/designers/customize-...
Bullets are usually declared in:
list-style-type:circle; // or an image added with list-style-image: url(../graphics/btn1.gif);
The dotAwesome theme used a different and quite neat technique of adding a background to the list element:
#mainShell ul li { background: url(../img/bgContentLi.png) 0px 6px no-repeat; padding: 0 0 0 25px; }
This list styling was carrying through to the Magic Tabs styling and putting bullet graphics by the tabs.
To overcome this, create a style to remove the background image and re-adjust the padding:
#mainShell ul.jl_magic_tabs li { background-image: none; padding: 0 0 0 3px; }
The ID (#mainShell) may need to be adjusted for other themes that use the same technique.
This style can be added to a theme, or to a template override for Magic Tabs. Attached is an example template override for Magic Tabs.
Unzip and using FTP install the template in
root/root/blocks/jl_magic_tabs/templates/bullet_proof_in_dotAwesome/
(ie in the root, NOT in the Magic Tabs package)
Then, in edit mode, on your first magic tabs block, select 'Custom Template' and this template.
This howto gives some explanation of overriding templates.
http://www.concrete5.org/documentation/how-tos/designers/customize-...
| Type: | Discussion |
|---|---|
| Status: | Archived |
Can you post a link where I can have a look and investigate.
Also, what theme are you using?
Also, what theme are you using?
Well its dificult to give you a link, its for an internal site.
I've vanish all the css file looking for reference to the nav-path-selected and nav-selected and even other nav's but nothing that tells "list-style" or "list-style-type" = to something diferent of none.
Or a url to a bullet image.
The theme i'm using is Destyle.
If you have any idea I can start from the beggining and install concrete and start from zero to see if the bullets go away.
I can say that I dont's whant bullets for anything in concrete.
I've vanish all the css file looking for reference to the nav-path-selected and nav-selected and even other nav's but nothing that tells "list-style" or "list-style-type" = to something diferent of none.
Or a url to a bullet image.
The theme i'm using is Destyle.
If you have any idea I can start from the beggining and install concrete and start from zero to see if the bullets go away.
I can say that I dont's whant bullets for anything in concrete.
Sorry, forgot to tell.
Destyle Theme gets the "full" style after install Fluid960 theme that give more page styles
Destyle Theme gets the "full" style after install Fluid960 theme that give more page styles
In a few minuts I have deleted my site and reinstall concrete but before installation deleted all places were was "list-style" = circle
It's working for now.
But I'm not convinced!! Isn't a easiest way to resolve in the future the problem?
It's working for now.
But I'm not convinced!! Isn't a easiest way to resolve in the future the problem?
Sorry for the delay, I have been away from my desk the last hour and a half.
You definitely should not need to reinstall or remove styling from the original theme.
In general, the approach I recommend to overcome such issues is to identify the style rule that is adding the unwanted list styling, then override it within a Magic Tabs template.
I will have a look at Destyle and get back to you soon.
You definitely should not need to reinstall or remove styling from the original theme.
In general, the approach I recommend to overcome such issues is to identify the style rule that is adding the unwanted list styling, then override it within a Magic Tabs template.
I will have a look at Destyle and get back to you soon.
The problem comes from Destyle assigning the rule:
Rules containing #id take priority over rules without an #id, so tend to be greedy with respect to anything that follows. To overcome them you need a stronger (more specific) rule containing an #id.
I have not actually tested this, but the following rule should be both more specific and only apply to the magic_tabs_controls.
You can either add this css to your theme, in which case it will be applied to any Magic Tabs template you select, or create a new Magic Tabs template by copying and renaming an existing template into a block template (as described above) and adding this rule to the view.css for the new template.
Please confirm if this solves your problem so I can mark this issue as resolved.
John
#content li { list-style: disc; }
Rules containing #id take priority over rules without an #id, so tend to be greedy with respect to anything that follows. To overcome them you need a stronger (more specific) rule containing an #id.
I have not actually tested this, but the following rule should be both more specific and only apply to the magic_tabs_controls.
#content .jl_magic_tabs_controls ul.jl_magic_tabs li{ list-style: none; }
You can either add this css to your theme, in which case it will be applied to any Magic Tabs template you select, or create a new Magic Tabs template by copying and renaming an existing template into a block template (as described above) and adding this rule to the view.css for the new template.
Please confirm if this solves your problem so I can mark this issue as resolved.
John
5* its working
To test I reinstalled all again, and simply added that CSS line referent to the tabs and its working.
Thank you for your help
To test I reinstalled all again, and simply added that CSS line referent to the tabs and its working.
Thank you for your help
I'm new in concrete, have some knoledges of html few of php...
But I simply can't find any place and can't erase from good the bullets from entire site!!
Any help?