Jump to content


Photo
- - - - -

Using Headings as tab titles (or styling tabs)


Best Answer Danny , 24 April 2013 - 10:24 AM

Bootstrap is already implemented into the framework, so you should be able to use the HTML code without anything else, you can add the HTML code into your page/post editor. If that doesn't work, you may need to use a plugin from the Wordpress Repository.

Go to the full post


  • Please log in to reply
6 replies to this topic

#1 shunarjuna

shunarjuna

    Newbie

  • Members
  • 5 posts
  • LocationSydney, Australia
  • Framework Version:2.3

Posted 24 April 2013 - 04:30 AM

I want to use tabs for the content of one page with the tab titles as <h3> (I am using cufon for my heaings and can't just use font-family/size, and I have the same issue even without cufon). When I do this however the tab title section gets about 30px padding on the bottom and 80px on the top and I can't seem to get rid of it with css. I have tried using firebug and styling the tab classes I found in class.shortcodes.php but the most I could manage was changing the background colour and slightly reducing the padding and margins.

 

Here is an example;

Please Login or Register to see this Hidden Content

 

Any help?

 

Thanks.



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15788 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 April 2013 - 08:10 AM

Hi,

 

Unfortunately, we do not recommend or support changes to the core files. What you're trying to achieve with the headers as tabs, isn't possible out of the box, as faras I know, without custom code. Therefore, I recommend you either try using the Bootstrap tabs code or use a plugin.

 

Please Login or Register to see this Hidden Content



#3 shunarjuna

shunarjuna

    Newbie

  • Members
  • 5 posts
  • LocationSydney, Australia
  • Framework Version:2.3

Posted 24 April 2013 - 10:11 AM

Okay, thanks. I've never used it before but I'll give the Bootstrap code a go.

Should I put the bootstrap code in Custom code section of the Pagelines site options, or create a seperate .js file in my child theme?

(Also, just so were're clear, I wasn't trying to edit the core files. I was just putting <h3> tags around the title inside the [pl_tabtitle] shortcode.)

#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15788 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 April 2013 - 10:24 AM   Best Answer

Bootstrap is already implemented into the framework, so you should be able to use the HTML code without anything else, you can add the HTML code into your page/post editor. If that doesn't work, you may need to use a plugin from the Wordpress Repository.



#5 shunarjuna

shunarjuna

    Newbie

  • Members
  • 5 posts
  • LocationSydney, Australia
  • Framework Version:2.3

Posted 24 April 2013 - 10:59 AM

Hmm... Doesn't quite work. The tab content wouldn't change and I still got the same padding issue. I'll find another way. Thanks for the help quick replys.



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15788 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 April 2013 - 11:10 AM

No problem, I hope you find a tab alternative that allows h3 tags.



#7 shunarjuna

shunarjuna

    Newbie

  • Members
  • 5 posts
  • LocationSydney, Australia
  • Framework Version:2.3

Posted 24 April 2013 - 11:23 AM

Just to let you know, I found an acceptable Google font and just wrapped the title in a <span style="font-family... etc. Or better yet just define it in my child theme's style sheet. All is good now.

 

Thanks again,

 

...Pagelines Rocks!