Jump to content
Sign in to follow this  
x69chen

How Do I Edit Element In [Pl_Tab]

Recommended Posts

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

Share this post


Link to post
Share on other sites
Rob

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

 

Are you familiar with CSS?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
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

 

 

Share this post


Link to post
Share on other sites
x69chen

You can but its going to be a pain! :D

 

You will need to use CSS pseudo classes.

 

Read this article for more information - http://css-tricks.com/pseudo-class-selectors/

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?

Share this post


Link to post
Share on other sites
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.

 

    <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li class="tab2"><a href="#profile">Profile</a></li>
    <li class="tab3"><a href="#messages">Messages</a></li>
    <li class="tab4"><a href="#settings">Settings</a></li>
    </ul>
     
    <div class="tab-content">
    <div class="tab-pane1 active" id="home">...</div>
    <div class="tab-pane2" id="profile">...</div>
    <div class="tab-pane3" id="messages">...</div>
    <div class="tab-pane4" id="settings">...</div>
    </div>
     
    <script>
    $(function () {
    $('#myTab a:last').tab('show');
    })
    </script>

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

.tab2 {background:blue;}
.tab3 {background:yellow;}
.tab4 {background:green;}

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
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.

 

    <ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li class="tab2"><a href="#profile">Profile</a></li>
    <li class="tab3"><a href="#messages">Messages</a></li>
    <li class="tab4"><a href="#settings">Settings</a></li>
    </ul>
     
    <div class="tab-content">
    <div class="tab-pane1 active" id="home">...</div>
    <div class="tab-pane2" id="profile">...</div>
    <div class="tab-pane3" id="messages">...</div>
    <div class="tab-pane4" id="settings">...</div>
    </div>
     
    <script>
    $(function () {
    $('#myTab a:last').tab('show');
    })
    </script>

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

.tab2 {background:blue;}
.tab3 {background:yellow;}
.tab4 {background:green;}

 

Thanks, I used "

.nav-tabs li:nth-child a{

  color:white;
  background-color:green;
}"
 
looks exactly good :)

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

Sign in to follow this  

×