Jump to content


resolved

Tabber Title With Image And Text: How To Set Height, Width And Alignment?

tabber css image height width alignment tabber title

This topic has been archived. This means that you cannot reply to this topic.
9 replies to this topic

#1 jtarrier

jtarrier

    Member

  • Members
  • Others: Toolkit
  • PipPip
  • 20 posts

Posted 13 March 2013 - 12:41 PM

I am trying to create a page that uses the tabber widget to display a SlideDeck shortcode depending on the tab selected.

Specifically, each tab title/header should display the image of a country's flag with the name of the country centred below it. When selected, the tab shows the appropriate SlideDeck.

So far I have no problem showing the image or the SlideDeck, but I am unable to find the CSS to set the height of the tab title/header so that the image and it's accompanying text are displayed.

i have searched this forum to no avail. Please advise how I can achieve this.

Thanks,

Jeremy Tarrier aka JeremyT_in_SG

#2 Gerroald

Gerroald

    iThemes Support

  • Moderators
  • Others: All Plugins, All Themes, Toolkit, Webdesign
  • 3,223 posts

Posted 13 March 2013 - 12:53 PM

Hello Jeremy,

Could you please (and always :smile:) share a url to the site in question so we can properly advise?

Thanks,

Gerroald

#3 jtarrier

jtarrier

    Member

  • Members
  • Others: Toolkit
  • PipPip
  • 20 posts

Posted 14 March 2013 - 02:42 AM

Hi Gerroald,

Sorry, I had already packed up for the night (it was almost 3am my time when I posted) so I didn't see your reply.

I'll separate the tabber-widget issue onto a dedicated site for support and post the URL here.

Where should I email the admin username and password so you can log in if necessary?

Thanks for your help,

Jeremy

View PostGerroald, on 13 March 2013 - 12:53 PM, said:

Hello Jeremy,

Could you please (and always :smile:) share a url to the site in question so we can properly advise?

Thanks,

Gerroald


#4 Gerroald

Gerroald

    iThemes Support

  • Moderators
  • Others: All Plugins, All Themes, Toolkit, Webdesign
  • 3,223 posts

Posted 14 March 2013 - 08:06 AM

Hey Jeremy,

At this time there's no need for your credentials. Just let me know when you get the page up and we'll see what we can do :smile:!

Thanks,

Gerroald

#5 jtarrier

jtarrier

    Member

  • Members
  • Others: Toolkit
  • PipPip
  • 20 posts

Posted 14 March 2013 - 09:23 AM

Hi Gerroald,

I have managed most of what I wanted to achieve although I seem to have had to do it the hard way by defining my own CSS classes rather than being able to decypher the Tabber-Widget's own CSS class hierarchy.

You can see the page at http://dev.wordpressatwork.com/tabbersupport/sample-page/

Each tab's header is in the format:

<div class="my-tabber-title">
<div class="my-tabber-title-image">
	 <img src="http://dev.wordpressatwork.com/tabbersupport/wp-content/uploads/singapore.png" alt="Singapore Consultants">
</div>
<div class="my-tabber-title-text">
	 Singapore
</div>
</div>

I "flattened" that into the actual strings:

<div class="my-tabber-title"><div class="my-tabber-title-image"><img src="http://dev.wordpressatwork.com/tabbersupport/wp-content/uploads/singapore.png" alt="Singapore Consultants"></div><div class="my-tabber-title-text">Singapore</div></div>



Then I styled them using Style Manager Custom CSS as follows:

ul.tabber-widget-tabs {
list-style: none;
}

.my-tabber-title-image {
max-height: 80px;
max-width: 80px;
}

.my-tabber-title-text {
text-align: center;
}

.my-tabber-title-text {
color: white;
}

a.selected.my-tabber-title-text {
color: black;
}


There's probably a better way using Tabber-Widget's native CSS classes. Feel free to comment.

All that is outstanding for the titles is to get the first tab to have its tab on the right, and the last to have its tab on the left so they appear centred. Any "middle" tabs would naturally appear between these so the tabs spread out evenly from the vertical middle of the page. This is for aesthetic purposes so the tabs and sliders combined appear to be almost like a 2 tier slider.

This is a mockup of what I'd like to achieve:

Posted Image


Ideally the whole Tabber Widget and the tab contents (i.e. sliders) should be centred in the widget area so things can resize gracefully when I apply responsive CSS to the overall site.

Phew, I hope that makes sense.

Thanks for your assistance,

Jeremy

#6 Gerroald

Gerroald

    iThemes Support

  • Moderators
  • Others: All Plugins, All Themes, Toolkit, Webdesign
  • 3,223 posts

Posted 14 March 2013 - 04:53 PM

Hey Jeremy,

I'm still looking into this for you. I'll get back with you as soon as I have something!

Thanks,

Gerroald

#7 Gerroald

Gerroald

    iThemes Support

  • Moderators
  • Others: All Plugins, All Themes, Toolkit, Webdesign
  • 3,223 posts

Posted 15 March 2013 - 07:53 AM

Hey Jeremy,

Below is some code that should be a good starting point to help you accomplish what you want.

.tabber-widget-basic-light ul.tabber-widget-tabs li:first-child {
margin-left: 200px !important;
}

I hope this helps!

Thanks,

Gerroald

#8 jtarrier

jtarrier

    Member

  • Members
  • Others: Toolkit
  • PipPip
  • 20 posts

Posted 15 March 2013 - 10:32 AM

Hi Gerroald,

Thanks. I'll give that a try. I may need to get my mathematical hat on to figure out how to spread the tabs evenly left and right of the centre.

Have a great weekend,

Jeremy

#9 jtarrier

jtarrier

    Member

  • Members
  • Others: Toolkit
  • PipPip
  • 20 posts

Posted 31 March 2013 - 03:43 PM

Hi Gerroald,

Yes, that works enough to present the proof of concept to my client.

Thanks for your help.

Best regards,

Jeremy

#10 Gerroald

Gerroald

    iThemes Support

  • Moderators
  • Others: All Plugins, All Themes, Toolkit, Webdesign
  • 3,223 posts

Posted 01 April 2013 - 03:01 PM

Hey Jeremy,

I'm glad to hear you got it worked out! :smile:

Thanks,

Gerroald