[Pro] Carousel Tab Colours

Freeway
1

Apologies for bringing up this topic again, as I know there are tons of threads on it.

I’ve got a webpage (designed in 5.5) with a carousel, and I’m trying to have the tabs change colour to correspond with the related pane of the carousel.

I’ve tried going through the previous threads, but have to confess I’ve got lost and a bit confused reading them. It’s fair to say I’m a layperson regarding scripts etc.

Many thanks in advance

freewaytalk mailing list
email@hidden
Update your subscriptions at:

2

If you are using Walters Carousel action then which version do you have? 5.5 is pretty old now so need some clarification on how you are using it.

Is it online somewhere we can see it?

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:

3

Thanks David

It’s the Carousel 2 action and the webpage (which is very much 'under development!" is here: home template

Many thanks

freewaytalk mailing list
email@hidden
Update your subscriptions at:

4

Here is my take on your Carousel

http://deltadesign.co/FW7Test/carousel-tabs.html

I have used the Carousel Text Tab action for the bullets - each of which was entered via option8 in the action palette as the link text.

I selected the container that holds the 3 Text Tab items and set the link style in there as Normal your dark Blue and Hover as the orange while removing the Underline option.

I named each Text Tab action item as tab1, tab2 and tab3

Then I added the following code in page>Html Markup in the Before (before end head) section.

<style type="text/css">
#tab1,#tab2,#tab3 {font-size: 42px;}
#tab1 a.active {color: #F0520E;}
#tab2 a.active {color: #F0520E;}
#tab3 a.active {color: #F0520E;}
</style>

This sets the size of the Text bullets as 42px and changes the color of them to orange when they become active.

I should add that there are many other ways of doing this.

This one happens to suit me.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:

5

Many thanks for your reply David.

I’ve tried following the steps but it doesn’t seem to work for some reason, as the bullets don’t change colour and stay a small size. I expect I’ve dropped a clanger at some point, but not sure where it is I’ve gone wrong.

Thanks again - your help is really appreciated.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

6

Share your link to it online and I can tell you where you are going wrong - or is it at the previous link?

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

7

Have a look at

Each of the 3 action items are an instance of the Carousel2 Text Tab

Each of these has been selected in the Inspector and had their Name/ID changed - this is tab1 and the others should be tab2 and tab3

Do that and reupload and then we can address the underline issue

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

8

That block of style code also appears to have been placed in the wrong location.

Should be

Page>html Markup and then choose the Insert: Before section and paste it in.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

9

Thanks Dave

I’ve followed those steps but it still doesn’t seem to be working. Might it have anything to do with some of the other action items on the page? Url is the same as before: home template

Apologies as I really am not too crash hot with this I’m afraid.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

10

OK - your construction must be at fault here and without seeing your actual FW doc then change that style code you used before to this:

<style type="text/css">
div#item10 {font-size:42px;}
div#item10 a.active {color: #F0520E;}
</style>

To get rid of the underline on the link (on the bullets) select item10 then look in the inspector.

Under the Links section click once on the U next to each of the 4 states ie Normal, Visited, Hover and Active

freewaytalk mailing list
email@hidden
Update your subscriptions at:

11

This may not be your construction that is at fault but rather the way that FW 5.6.5 outputs these action items in the html

Download the example from http://deltadesign.co/downloads/carouseltabs-archive.zip

Note the style code in Page>Html Markup in the Before section and how I have named each item on the FW page.

I see you are using Freeway 5 Pro 5.6.1 - you should at least update to Freeway 5 Pro 5.6.5 (free update) which is the last version before FW6

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:

12

Legend!

Just tried it and it works a treat!

Top man - many thanks again for your help.

freewaytalk mailing list
email@hidden
Update your subscriptions at: