I’ve got carousel working perfectly fine with .tab and .active background images but was just wondering if there was a way of having different parts of the site where on one section the background image could be blue when active and in another section the background image could be red. Tried renaming sytles to .active: red etc but after publish carousel does not show the .active state. Any heads up will be much appreciated
If you want to segment the styles like this, what I would do is create a parent container for the tabs, and then use that container name in your specialized styles. Follow these steps:
Draw an HTML box on the page, directly over the top of your existing tabs, and large enough to contain all of them. Be careful not to begin your drag inside the bounds of any other object.
Click on the Site pane header so it switches over to read Page, and look to see which element is highlighted (this should be the box you drew in step 1. Locate the tab elements in that same list (they will have little f-cog Action badges on their names, and if you named them distinctively when you created them, this part should be simple.
One at a time, drag the name of each tab in the list of elements until it is directly under, and indented from the left of, the HTML box from step 1. When you get near the end of this drag, the name of the HTML box should highlight to indicate that it’s accepting the dragged element as one of its “children”.
In the styles palette, click on the cog menu and choose Edit Styles. In the resulting dialog, click on the first style you want to duplicate (let’s say this is the .tab style). From the cog menu in the Edit Styles dialog, choose Duplicate. Edit the Tag to read #theNameOfYourBox .tab (obviously, substitute the correct name for the box). Delete whatever modifier Freeway has added to the Name field and tab back out to ensure that it doesn’t slip it back in there. Now change the color, background image, whatever you like to make this style work the way you need it to. Repeat for the .active style.
Let me know how that goes. Changing the parent is the most complicated part of this, it’s one of those things that is hard to describe in words and easy to do once you’ve got the hang of it.
Walter
On Jan 29, 2012, at 1:48 PM, Bonsai Bart wrote:
hi
I’ve got carousel working perfectly fine with .tab and .active background images but was just wondering if there was a way of having different parts of the site where on one section the background image could be blue when active and in another section the background image could be red. Tried renaming sytles to .active: red etc but after publish carousel does not show the .active state. Any heads up will be much appreciated
I forgot to mention that the different coloured background images would be on different sections of a website ie section a would be blue, section b would be red just so that it is more distinguished for the user to what section of the website their on. So would the same apply
Yes. Another way you could do this (to avoid adding another DIV to the page) is to apply a classname to each page that you wanted to be a certain color. So for example, you could have a blue class and a red class. You would apply these by clicking on a blank part of your page (so nothing is selected) and then choosing Page / Extended from the main menu. In the resulting dialog, click New, and enter:
Name: class
Value: blue
…in the sub-dialog. Repeat this for each page that you want to have the “blue” style applied to it.
Then back in my original directions, change the #yourBoxName part of the style name to read .blue (with the leading dot) and everything else the same. So the resulting style would have the Tag value set to
.blue .tab
Walter
On Jan 29, 2012, at 2:50 PM, Bonsai Bart wrote:
thanks for the quick reply walter
I forgot to mention that the different coloured background images would be on different sections of a website ie section a would be blue, section b would be red just so that it is more distinguished for the user to what section of the website their on. So would the same apply
You would only need to duplicate the selector – the part outside of the curly braces – and separate the selectors with commas. You can stack as many elements in the selector as you like*.