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:
//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
JohntheFish
View Replies:

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.