Jump to content
MissT

Framework Tabs Styling Queries

Recommended Posts

MissT

Is it possible to style the tabs of the new tabs functionality in Framework 2.2.5? Ideally I'd like to add a background image behind the tabs and remove the default tabs styling, I'm ok with adding a background image but is it possible to change each of the tabs lengths individually or am I stuck with the length / size of the tabs as they are but default? And also if I don't want to use a background image behind the tabs is it possible to change the background colour of each tab individually? That is so each tab is a different colour? I've had a look with firebug but can't see any existing way to isolate each tab with css - can I add classes in / around the tabs code in order to be able to select an individual tab? Here is the main part of the code: [pl_raw][pl_tabs] [pl_tabtitlesection type="tabs"] [pl_tabtitle active="yes" number="1"]Overview[/pl_tabtitle] [pl_tabtitle number="2"]Daily Routine[/pl_tabtitle] [pl_tabtitle number="3"]Environment[/pl_tabtitle] [pl_tabtitle number="4"]Meet us[/pl_tabtitle] [pl_tabtitle number="5"]Prices & Offers[/pl_tabtitle] [/pl_tabtitlesection] [pl_tabcontentsection] [pl_tabcontent active="yes" number="1"]

Lots of text to go in here!

Many thanks in advance! T.

Share this post


Link to post
Share on other sites
catrina

HTML classes can't be added to shortcodes (since shortcodes are not technically HTML). Is the code you pasted above what you see in Firebug?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
MissT

Thanks Catrina... Ah right. No this is the code in the page and not what I see in firebug. My site is not live but you can see the demo of tabs at http://demo.pagelines.com/framework/tools/ Doesn't look at though you can style individual tabs?

Share this post


Link to post
Share on other sites
James B

Hi Tracy I've had a look in firebug and managed to get the following working. Hope this works for you .

Change tabs colour
	
	.nav-tabs > li > a {
	    background: #DDDDDD; }
	
	Change colour of bar tabs sit in
	
	ul.nav.nav-tabs { background: #DDDDDD; }
	
	Change tab content box colour
	
	.tab-content { background: #2D3FC1; }

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×