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:
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-...

1 Attachment

Type: Discussion
Status: New
JohntheFish
View Replies: View Best Answer
golfinho24 replied on at Permalink Reply
Well in my case isn't working!!!

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?
JohntheFish replied on at Permalink Reply
JohntheFish
Can you post a link where I can have a look and investigate.

Also, what theme are you using?
golfinho24 replied on at Permalink Reply
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.
golfinho24 replied on at Permalink Reply
Sorry, forgot to tell.

Destyle Theme gets the "full" style after install Fluid960 theme that give more page styles
golfinho24 replied on at Permalink Reply
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?
JohntheFish replied on at Permalink Reply
JohntheFish
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.
JohntheFish replied on at Permalink Best Answer Reply
JohntheFish
The problem comes from Destyle assigning the rule:
#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
golfinho24 replied on at Permalink Reply
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

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

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

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.