Support Forum

Please note that this forum is only available to you in read only mode. In order to contribute to this conversation you will need to renew your subscription.

Colourshift2 Tabs CSS

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Hi

- I'm trying to modify the (see attached)
advanced.PNG
tabs style. I'm using colourshift2 palette 2. I went into the CSS for that palette and attempted to alter the css code below

dl.tabs {
padding-bottom: 20px;
border: 0 !important;
clear: both;
float: left;
width: 100%;

}
dl.tabs:before,
dl.tabs:after {
content: " ";
display: table;
}
dl.tabs:after {
clear: both;
}
dl.tabs:before,
dl.tabs:after {
content: " ";
display: table;
}
dl.tabs:after {
clear: both;
}
dl.tabs:after {
content: "";
width: 100%;
border-bottom: 1px solid #e6e6e6;
float: left;
clear: both;
z-index: 1;
margin-top: 8px;
}
dl.tabs dt.tabs {
display: inline-block;
}
dl.tabs h3 {
margin: 0;
font-size: 1.2em;
}
dl.tabs a {
background: none;
margin-right: 0;
border: 0;
color: #4d4d4d;
padding: 10px;
}
dl.tabs a:focus {
border: 0;
}
dl.tabs .open a {
border: 1px solid #e6e6e6;
border-bottom-color: transparent;
background: transparent;
}
.tab-pane {
display: none;
float: left;
width: 100%;
margin-bottom: 30px;
}
.tab-pane.active {
display: block;
}

but nothing seems to be changing. I'm just trying to have it stick out a little bit more with darker border and light background, but nothing I change in the CSS seems to be affecting it. Any ideas?

Thanks,
Nader
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
Hi Nadder,

Do you have a link for the page / module in question

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

The page is located here: gwacademy.net/index.php/programs/advanced

I had it offline because I'm working on it, but placed it online so you can see what I'm talking about.

Thanks,
Nader
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
Gives you the active tab without the border visible at the bottom on the active tab

dl.tabs .open a {
background: #fff;
}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
For adding a black border at 2px

dl.tabs .open a {
border: 2px solid #000;
border-bottom-color: transparent;
background: #fff;
}

dl.tabs:after {
border-bottom: 2px solid #000;
}
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
What were you looking to add a background colour to?

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Hi Paul,

Yes, I've tried modifying that. I used my browser inspector to know which class to edit, but even after doing so, nothing changes. It remains the same. Am I modifying the wrong CSS file? I even created a custom.css file and inserted the modifications there, but still nothing happens, so I revert back to the way it was.

Nader
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
I'm not really sure. Once I know which class to edit in CSS, I play around until I like what I see. My issue is that no matter what I change it to, nothing changes when I refresh. The tabs remain as they've always been as though the code I'm editing doesn't affect it.
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
No you don't want to modify any existing css

The styling I suggested should be added to the custom.css file

Can you try adding it there

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
Last Edit: 2 years 2 days ago by manh.
The administrator has disabled public write access.
I just noticed something. The changes don't stick in Chrome, but I see the edits in Firefox? I was thinking maybe it was the browser, so I checked a different one. I was using Chrome and saw no changes but when I checked in Firefox, I see them now. Any idea how to get the edits to be visible in both?
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
I cleared my cache and there is was. The changes took effect in Chrome. I'm sorry, it's user error once again :)

Thanks for your patience, Paul.

Nader
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
No problem

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
For me on a PC I found Chrome's caching changed a few months ago so I use shift f5 when viewing the site after changes
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
"Shift+F5 is a keyboard command that is used in a Web browser to reload the current webpage from scratch, bypassing any cached versions. This command is often used to resolve display errors on the page or to ensure the most up-to-date version of the page is being displayed."

Although to be fair my laptop doesn't like it much

Cheers
Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.
Understood. I'll be doing the hard refresh from now on in Chrome. Thanks again!
  • azzaya's Avatar
  • azzaya
  • 12 Month Developer
  • 276 posts
  • 5 Thanks
  • Karma: 2
The administrator has disabled public write access.
Cheers

Paul
  • manh's Avatar
  • manh
  • Moderator
  • 45248 posts
  • 2106 Thanks
  • Karma: 603
The administrator has disabled public write access.

zentoolsIf you use Zentools please post a review at the Joomla! Extensions Directory.

Happy Campers