7 replies to this topic

[x69chen]

I use the tab code which provide in the PgaeLine/tool.

 

How could I custom the CSS code for each part?

 

like, I want to make each tab different color,

and I also make a table inside the content of the tab, and I want to edit their background as well.

 

which code could I use? I tried ".nav-tabs li" but it seems does not work

 

Please help me,

 

Thanks

[Rob]

You can wrap the element in a unique class, then apply CSS to that using custom code.

 

Are you familiar with CSS?

[x69chen]

You can wrap the element in a unique class, then apply CSS to that using custom code.

 

Are you familiar with CSS?

I am not sure lol ,

 

I found out I could use ".nav-tabs li.active a {background:red;}" to change the color of the tab header, but it not looks good.

 

and also I want different color of each tab header, so I may need to give an id to each one,

so I tried this "[pl_tabtitle active="yes" number="1"] <div id'"e001"> title1 </div> [/pl_tabtitle]"

but when I try to directly edit "#e001", it does not work

 

 

btw, is that possible that I use the buttons from the PageLine/tool for each header of the tab? they looks perfect.

 

Thanks

 

 

[Danny]

You can but its going to be a pain!

 

You will need to use CSS pseudo classes.

 

Read this article for more information - 

Please Login or Register to see this Hidden Content

[x69chen]

You can but its going to be a pain!

 

You will need to use CSS pseudo classes.

 

Read this article for more information - 

Please Login or Register to see this Hidden Content

Hi Thanks for helping,

 

I know the hover, visited things.

But here I want each tab header a different color, I found the only difference between each header <li> is <href="#num">

it's not an id or a class, so I may could not use the regular way to target them

 

So is there any other ways to do it?

[x69chen]

You can but its going to be a pain!

 

You will need to use CSS pseudo classes.

 

Read this article for more information - 

Please Login or Register to see this Hidden Content

Thanks, I solved

 

Thanks for helping

[James B]

Ok the only way i found to do it is to copy/paste in the code direct from bootstrap and add a class to each li element that you can color with css. I see you've just managed to resolve, but i'll paste in case anyone else is looking for an answer.

 

So below i've copied the code from bootstrap and added 'tab2,3,4 etc' to each li element. Then saved the paste and added the css below.

 

Please Login or Register to see this Hidden Content

Css for tabs, obviously change color value to your own hex value.

Please Login or Register to see this Hidden Content

[x69chen]

 

Ok the only way i found to do it is to copy/paste in the code direct from bootstrap and add a class to each li element that you can color with css. I see you've just managed to resolve, but i'll paste in case anyone else is looking for an answer.

 

So below i've copied the code from bootstrap and added 'tab2,3,4 etc' to each li element. Then saved the paste and added the css below.

 

Please Login or Register to see this Hidden Content

Css for tabs, obviously change color value to your own hex value.

Please Login or Register to see this Hidden Content

 

Thanks, I used "

.nav-tabs li:nth-child a{

  color:white;

  background-color:green;

}"

 

looks exactly good