[Pro] Carousel 2 Tabs Color

Freeway
1

Hello,

How can I change the tab’s color each time a new pane appears in a slideshow?

I’m trying to achieve the same effect as in the ATP World Tour Site: http://www.atpworldtour.com/

Thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

The key is to create an image that has a “hole” in it, and then use CSS to color in that hole. I just tried this, and it’s massively more complex than it used to be in the original Carousel, at least it is in Freeway 6.1 and HTML5. Here’s what I had to do:

  1. In Photoshop, make an image that is a square or rectangle of background color, with a hole cut out of the center. Export as PNG-24.
  2. Make the tab buttons inline or nested within a single container element on the page, and use the button you made above as the image for each of them. The key is the single parent element, as that lets us use one pair of styles, rather than making a separate style for each button. Make note of the parent element’s Name/ID in the Item Inspector – I’m calling mine “tabs”.
  3. In Freeway, make two styles using the Styles palette (outlined below) using the Tag-only Style trick: http://actionsforge.com/articles/view/9-tag-only-styles. Do not apply these styles to anything, they are present in the page because you made them using the Tag-only technique, and they are applied automatically by the CSS cascade.
  4. Preview in a browser. You will not see anything at all in the design view – the tabs will be invisible, because you’ve made them the same color as the background.

###The styles:

#tabs a {
	background-color: gray;
	display: inline-block;
	overflow: hidden;
}

#tabs a.active {
	background-color: blue;
}

Notes about creating these styles in Freeway’s Styles editor:

The background-color is a normal Freeway UI control, located in the Character picker. The other two attributes on the first style are made using the Extended interface in the Edit Style window. Click on the Extended button, then click New to add each name: value pair. You don’t enter the colon or the semicolon, just the word display and the word inline-block, for example. Repeat for the other attribute. Okay out of the stack of sub-dialogs and preview in a browser to check your work.

Walter

On Sep 11, 2013, at 10:45 AM, Daemon wrote:

Hello,

How can I change the tab’s color each time a new pane appears in a slideshow?

I’m trying to achieve the same effect as in the ATP World Tour Site: http://www.atpworldtour.com/

Thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

I just thought of a simpler way to do this. Change the name of the tag style from #tabs a to #tabs a img, and from #tabs a.active to #tabs a.active img. Now you don’t have to add the display:inline-block and overflow:hidden at all. Just make the regular color change between normal and active, and you’re done.

Walter

On Sep 11, 2013, at 11:17 AM, Walter Lee Davis wrote:

massively more complex than it used to be in the original Carousel, at least it is in Freeway 6.1 and HTML5. Here’s what I had to do:

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Hi Walter,

Thanks for your help. I’ll try to follow your instructions. I didn’t understand the first step with photoshop (eventually the simplest).

Should I make a filled circle with background transparency or a square with a transparent circle in the middle?

Transparency is always the background, right? So, the foreground color should be the same as the area, in the slideshow, where the tabs will be placed?

What if I want to place tabs without any background color?

Thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

On Sep 12, 2013, at 12:26 PM, Daemon wrote:

Hi Walter,

Thanks for your help. I’ll try to follow your instructions. I didn’t understand the first step with photoshop (eventually the simplest).

Should I make a filled circle with background transparency or a square with a transparent circle in the middle?

The latter.

Transparency is always the background, right? So, the foreground color should be the same as the area, in the slideshow, where the tabs will be placed?

What if I want to place tabs without any background color?

Then we would need to use a different set of CSS. In that case, you would make a single transparent png with two colored dots on it, offset vertically from one another by a specific number of pixels (30 in this example). You would also create a completely transparent button image the size of one of the dots which you would place in Freeway as a pass-through image. Then the CSS would look something like this:

#tabs a img {
	overflow: hidden;
	background: url(Resources/dots.png) 0 0 no-repeat;
}
#tabs a.active img {
	background-position: 0 -30px;
}

By shifting the background-position -30px, you would cause the different color blob to move into view (it would have been hidden previously by being out of the visible area of the base tab image). It seems kind of a lot of work to place a clear image and then apply a background-image to it, but this is the simplest way to get Freeway to write most of the code for you.

Walter

Thanks.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

Your latter solution seems to be the best and more versatile.

I’ll give it a try and will send you feedback on it.

Thanks a lot.

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options