Unwanted line between your tabs and content
Permalink Browser Info Environment
Many of the templates in Magic Tabs base the tab formatting on the Bootstrap derived styles in ccm.app.css.
This is a useful way of achieving consistent tab styling, but can be a little overbearing with its css rules. One rule that is particularly difficult to override creates a horizontal grey line between the tabs and tab content.
The style is coming from ccm.app.css as:
Its the second one of these that is difficult to override, because it has been marke !important and is loaded first, so it can't be overridden in a later stylesheet.
In a new tab template, if you want to remove or change this style, you unfortunately need to to place an important style actually in the ul element of the view.php part of your new tab template:
Styles placed directly on elements always take precedence. But it still needs !important to beat its way past ccm.app.css.
In general, I would recommend using view.css for your tab template styling. However, in this particular instance, fixing the style directly in the php/html is the only way.
This is a useful way of achieving consistent tab styling, but can be a little overbearing with its css rules. One rule that is particularly difficult to override creates a horizontal grey line between the tabs and tab content.
The style is coming from ccm.app.css as:
//line 243; .border-bottom:1px solid #ddd; //line 1010 .border-bottom:1px solid #ddd !important;
Its the second one of these that is difficult to override, because it has been marke !important and is loaded first, so it can't be overridden in a later stylesheet.
In a new tab template, if you want to remove or change this style, you unfortunately need to to place an important style actually in the ul element of the view.php part of your new tab template:
style="border-bottom:none!important;"
Styles placed directly on elements always take precedence. But it still needs !important to beat its way past ccm.app.css.
In general, I would recommend using view.css for your tab template styling. However, in this particular instance, fixing the style directly in the php/html is the only way.
Type: | Discussion |
---|---|
Status: | Archived |