Streaming live at 10am (PST)

Tab system component - regular state


#1

Hi,

I have managed to design the tab down & mouseover state + the text that goes along with that.
For the regular (nothing selected) state - I have the tab background color also set and dimensions are accurate.

However, without affecting all of this work, how can I now re-style the regular (nothing selected state) of the text on each tab?
Everytime I do that - it messes up the previous work for the other states. - What kind of class do I need to add? A combo class? A triple class? - Do I click that laptop icon with the star in it to make an entirely new 'grouped class'?

None is ticked in the tab control panel & 'tabTxtStyle' is the class assigned to the txt regular state.
When, in tab control panel I choose an actual tab... I did notice 'tabTxtStyle' is assigned to the tab txt link on those down/hover states too. - I think this is the issue, but unsure if I just need to add another class to the original state and/or rename it to do the trick?

Please advise, thanks...have been fiddling with this for quite some time.


#2

Hey @Tine22 could you please update your post with some more information so we can help you faster? Things like your read-only link & screenshots really helps us to help you faster :slightly_smiling:

How to share a read-only link:
http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link

Thanks in advance! :slightly_smiling:


#3

Online tutorial reads: You can style both the current (the active tab) and the non-current tabs.

The question is how do you style the non-current tab Text Link (not tab itself)? The text label on the tab is what I am referring to. If the txt link has a class already and can see applied for all the current states...how can I target only non-current? Each time I do, it grabs from the parent class - so creating a pseudo class combo won't work.


#4

Hi @Tine22 Can you please post your read-only link so we can see where the issue is?

Thanks :slightly_smiling:


#5

From what I understand you want to edit a link that is not current. To do this simple go to a link that does not say current and edit it how you want.

Does this answer your question? If not please do paste a read only link. It will help us in determining your problem. Thanks! :wink::grinning::blush::+1:


#6

none are marked with current so I cannot see how I'd tell the difference. We've got TabLinkStyle - which composes of the actual tab shape. Then, on top of there (or within there) is the text box called: TabTxtStyle.

Am I right in saying that if in the tab set up control panel I select 'none' - that should give me full control of the non-current states?


#7

Sorry @Tine22, but it is very hard to visualize what you are talking about. May you please share your public link with us so that we will be able to see what you are experiencing. Thanks!

How to share a public share link:
http://help.webflow.com/faq/how-do-i-share-my-sites-read-only-link


#8

Hi, @Tine22

Here is video, showing how to recognise the Current tab link: https://drive.google.com/file/d/0B-7cg8BSq1Z_dEJmTTlPNzkwdHM/view

For style text inside the current tab-link, just style the actual tab-link font (color, size. etc). Text inside the link will take the style settings from its parent if you did not set another style to the text block itself.

Regards,
Anna


#9

thank you so much for your movie! I am going to start from scratch again following what you've done.


#10

OK - my issue was that I was relying too much on the actual text link for styling, rather than just using the text properties for the 'tab link' itself. Controlling text style in tab link instead gave me the full control I was after.

Thank you!


#11

Great that we were able to fix the issue :slightly_smiling:


#12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.