Hi

- I'm trying to modify the (see attached) 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

Hi Nadder,

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

Cheers
Paul

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

Gives you the active tab without the border visible at the bottom on the active tab

dl.tabs .open a {
background: #fff;
}

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;
}

What were you looking to add a background colour to?

Cheers
Paul

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

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.

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

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?

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

No problem

Cheers
Paul

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

"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

Understood. I'll be doing the hard refresh from now on in Chrome. Thanks again!

Cheers

Paul