Carousel Tabs

Hi,

I’m using the carousel action and combined it with some tabs. I want the tabs (pictures) to have 3 different states: normal - hover and active (the active pane). Similar to the homepage of Softpress.

How can I achieve this. Struggling around with CSS rollover action didn’t bring the result. The issue is how to achieve the active state.

Rob

quote

If you use the normal Rollover Action, you can get two states — normal and over. If you then create a permanent style with the Tag value set to

.active

and the Name field empty (no value), then any properties you set on that style will be applied to the currently-highlighted tab. (By creating a tag-only style, you force Freeway to publish the CSS without requiring you to apply that style to an object on the page first.) The Carousel Tabs Action will assign that classname (active) to the tab that matches the currently visible pane.

This doesn’t give you much to work with, sadly. About all I have managed to do in my own experimenting is to add a border to the button (look at the demo page for Carousel to see what I mean). But that can be enough if you design for it.

Walter

quote

Walter,

Thanks for the help. I managed to get the border working. My question though stays about how they did this on the home page of the Softpress site. Any ideas?

Rob

quote

Walter,

Yeeeah! I got it working using the CSS rollover instead of the normal rollover action. Now adding the .active tag value I managed to get the third picture visible during the active state.

Rob

quote

I believe Paul wrote something about the new Softpress home page. If I recall correctly, he wrote some custom stuff to work around deficiencies in the Carousel Action, or may have used something besides Carousel in the end. Remember, he’s working in Expression Engine, which makes Actions something of a challenge due to the fact that you aren’t creating a single page, but rather a page “fragment” that gets assembled with other fragments into a complete page by the content management system.

Walter

On Nov 6, 2009, at 3:43 AM, RobP wrote:

Walter,

Thanks for the help. I managed to get the border working. My question though stays about how they did this on the home page of the Softpress site. Any ideas?

Rob

quote

Hey Guys,

Just wondering if you could give me a few types of actually editing this .active style. For some reason all I am able to affect is the background color. Which option do I use to get a border around the active tab.

Thanks for your help.

Matt

quote

Freeway doesn’t expose the border settings in the Edit Style dialog, you’ll have to add these using the Extended sub-dialog from within the Edit Style. Open your .active style, and then click the Extended button. You’ll see a new sub-dialog where you can enter any valid CSS you can think up.

In my example page for the Action, I used these values:

.active {
    border-left:1px solid #ccc;
    border-right:1px solid #ccc;
    border-top:1px solid #ccc;
    margin:-1px -1px 0 -1px;
}

The negative margin keeps the border from changing the dimensions of the tight-fitting tab graphics, and makes things stay steady in the browser when you click from one tab to another.

Walter

On Nov 27, 2009, at 5:09 AM, mtedwards wrote:

Hey Guys,

Just wondering if you could give me a few types of actually editing this .active style. For some reason all I am able to affect is the background color. Which option do I use to get a border around the active tab.

Thanks for your help.

Matt

quote

Matt, How did you set the background color? Jan

quote

Thanks for answering so fast. It was set to transparent. It can’t be set to color, as it has to match the picture background. However I tried to set the color to blue and it appears the same. Maybe i should try to make few separate pages???

Regards,

Dan Demetriad

DEMETRIAD CREATIVE MEDIA INC. 1674 Broadway at 52nd Street, 4th Floor New York, NY 10019 Tel: 212.315.3400 Fax: 212.315.2757 email@hidden www.demetriad.com

On Mar 12, 2010, at 12:24 AM, jan smoot wrote:

Matt, How did you set the background color? Jan

quote