What’s the best way to add buttons to this Carousel page?
http://idealynx.com/clients/cs/index.html
I want there to be five buttons, one for each image, but the trick is I want the button color to change to indicate which image is active.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walt, I kinda figured this out from this post you made back in November. However, I can’t figure out how to use oval pngs for my buttons.
You can create two different images of your oval, and set them as the normal and active background image to a transparent GIF button. Draw a graphic box, but don’t give it any fill color. Apply the Carousel Tab Action to it. Create two styles:
.controls a img { background-color:#ccc; } .controls a img.active { background-color:#cc0; }
(I had it wrong previously in these explanations — the .active class gets added to the image, not to the link, so it’s not a.active img that you need to fiddle with.)
Here’s how you force Freeway to add these styles to your page without you needing to apply them to anything. (Follow these steps blindly — each step is important.)
Click on the cog menu in the Styles palette. Choose New style…
The Name field will say style4 or something similarly useless. Ignore that for the moment.
Tab or click into the Tag field. Enter the selector part of the style (everything outside of the curly braces), so for example .controls a img.
Tab into the Name field, so its contents are selected, and delete whatever is there, leaving the field empty.
TAB BACK OUT so that Freeway “sticks” that property as empty. It will try to sneak style4 back in there the moment your back is turned, so be vigilant about this and make sure that the Name field is empty when you finally Okay the dialog.
Use either the Extended sub-dialog or the regular style tools in the rest of the Edit Style dialog to add your properties. Backgrounds (image and color) are found in the Character style picker, for some reason.
Double check that the Name field is empty, and Okay the dialog.
A style made in this manner does not need to be applied to anything — and really shouldn’t, because it can make for some really strange effects. This sort of no-name style will always publish to the head of every page, or to the external stylesheet if you’re using those. Unlike styles that you click to apply in the design interface, you will not see their effects in the design view, and Freeway will not “prune” unused styles to save a few bytes. You will see the effect of the style in the Preview, or if you preview in a browser.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Okay, I finally figured this out, but I’m still having one problem. If you look at the round pngs I created they all have a faint square outline surrounding them. How can I get rid of the outline?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Try adding the following CSS to your page:
a {
outline:none;
border: none;
}
If you’re using the Page / HTML Markup dialog to add your styles for .active etc., then just slip that in there within your style block. If you’re using the Style palette, then you need to make a new style, give it the Tag of ‘a’, delete the Name field, and tab out of the Name field so that emptiness “sticks”. Then add your two properties in the Extended dialog.
Walter
On Jan 15, 2012, at 10:11 AM, RavenManiac wrote:
Okay, I finally figured this out, but I’m still having one problem. If you look at the round pngs I created they all have a faint square outline surrounding them. How can I get rid of the outline?
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
I can’t seem to make this work. I’m using the Style palette, but I think my syntax might be wrong. Here’s what I have so far:
Style (Tag/Name) a / empty
Extended Atributes (Name/Value)
outline/none
border/none
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Can you post a link to the page so I can fiddle with it in Safari Web Inspector? That’s usually a good way to get to the bottom of something like this. The outline may be on a different element, or another style may be overriding this very basic rule.
Walter
On Jan 15, 2012, at 2:50 PM, RavenManiac wrote:
I can’t seem to make this work. I’m using the Style palette, but I think my syntax might be wrong. Here’s what I have so far:
Style (Tag/Name) a / empty
Extended Atributes (Name/Value)
outline/none
border/none
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
Sure, here you go. Thanks.
http://idealynx.com/clients/cs/index.html
On 16 Jan 2012, 1:54 am, waltd wrote:
Can you post a link to the page so I can fiddle with it in Safari Web Inspector? That’s usually a good way to get to the bottom of something like this. The outline may be on a different element, or another style may be overriding this very basic rule.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You might want to try making your image a 24-bit PNG instead of an 8-bit (indexed) PNG. I can’t really see the border here, maybe it’s my screen vs. yours, but if I really squint I can sort of make out what you’re seeing here.
There’s one other thing you could try, and I know this will work, but it is quite a bit more work. You also need to be using the most up-to-date version of Freeway for this to work – and I can’t tell what you’re using because you’ve deleted the Generator tag from your page.
Make another style, Name it tab or something like that, and don’t give it a Tag. Make a larger version of your current image (white PNG with a hole in it) that is at least 17 x 17px (larger than the box you will apply it to, in other words, as your current image is 15px x 15px). Leave the hole the same dimensions. In the Character part of the New Style dialog, choose background image and set this as the background image. Set the repeat to no-repeat, and the alignment to center/center. No other aspects of this style need to be set.
Now, choose your first control button press Command-B (clear content). This will leave a clear GIF in place of your button. While that button is still selected, apply your tab style to it by clicking on the name in the Styles palette. Repeat for each button. This should work, although it will be difficult to see in the design view. Preview or publish and see if it clears up the entire problem for you.
Walter
On Jan 15, 2012, at 10:02 PM, RavenManiac wrote:
Sure, here you go. Thanks.
http://idealynx.com/clients/cs/index.htmlOn 16 Jan 2012, 1:54 am, waltd wrote:
Can you post a link to the page so I can fiddle with it in Safari Web Inspector? That’s usually a good way to get to the bottom of something like this. The outline may be on a different element, or another style may be overriding this very basic rule.
Walter
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
I think the 24-bit PNG did the job. Thanks Walter.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
By the way, I noticed that if I click on any of the buttons the slide show effect stops and does not restart unless the user were to physically reload the page. Is there a way to set that?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
This is correct. If you want to have a restart button, you can make that with the Carousel Button Action. There are options for start and stop along with previous and next in that Action.
Walter
On Jan 15, 2012, at 10:53 PM, RavenManiac wrote:
By the way, I noticed that if I click on any of the buttons the slide show effect stops and does not restart unless the user were to physically reload the page. Is there a way to set that?
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
Gotcha. Thanks Walter.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I creates a simple Action a while back called Carousel Tab Button that basically does the same thing. Just select the image you want for the active tab state and the Action will do the rest. You can find the Action as part of the Carousel Slider download here;
http://www.freewaystyle.com/carousel-slider-1
Regards,
Tim.
On 16 Jan 2012, at 03:18, Walter Lee Davis wrote:
There’s one other thing you could try, and I know this will work, but it is quite a bit more work.
FreewayActions.com - Freeware and commercial actions for Freeway Express & Pro.
…
Protect your mailto links from being harvested by spambots with Anti Spam.
Only available at FreewayActions.com
…
http://www.freewayactions.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
That is cool.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walter, what if I want to place the buttons on an image so that they have a transparent background instead of white? Am I better off using Tim’s action for this?
Thanks,
Kelly
You might want to try making your image a 24-bit PNG instead of an 8-bit (indexed) PNG. I can’t really see the border here, maybe it’s my screen vs. yours, but if I really squint I can sort of make out what you’re seeing here.
There’s one other thing you could try, and I know this will work, but it is quite a bit more work. You also need to be using the most up-to-date version of Freeway for this to work — and I can’t tell what you’re using because you’ve deleted the Generator tag from your page.
Make another style, Name it tab or something like that, and don’t give it a Tag. Make a larger version of your current image (white PNG with a hole in it) that is at least 17 x 17px (larger than the box you will apply it to, in other words, as your current image is 15px x 15px). Leave the hole the same dimensions. In the Character part of the New Style dialog, choose background image and set this as the background image. Set the repeat to no-repeat, and the alignment to center/center. No other aspects of this style need to be set.
Now, choose your first control button press Command-B (clear content). This will leave a clear GIF in place of your button. While that button is still selected, apply your tab style to it by clicking on the name in the Styles palette. Repeat for each button. This should work, although it will be difficult to see in the design view. Preview or publish and see if it clears up the entire problem for you.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I would try Tim’s method first, simply because it looks really easy to use. You can certainly do it long-hand, as I have explained previously, using 24-bit PNG images so they can overlay any other content, and that will work too.
Walter
On Jan 23, 2012, at 1:26 PM, RavenManiac wrote:
Walter, what if I want to place the buttons on an image so that they have a transparent background instead of white? Am I better off using Tim’s action for this?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
If I use Tim’s action does that mean I’ll need to delete the controls a img and controls a img.active styles we setup to avoid conflict with Tim’s action?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Yes possibly. Whichever style loads last on the page will define the image you’ll see in the carousel. Try it with the CSS styles in place and if it displays the wrong image either remove the Action or the styles and preview again.
Regards,
Tim.
On 23 Jan 2012, at 19:02, RavenManiac wrote:
If I use Tim’s action does that mean I’ll need to delete the controls a img and controls a img.active styles we setup to avoid conflict with Tim’s action?
FreewayActions.com - Freeware and commercial Actions for Freeway Express & Pro - http://www.freewayactions.com
FreewayStyle.com - Free Freeway templates and parts to download, use and explore - http://www.freewaystyle.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Tim, do you have an updated Carousel Tab Button that works with FWP 6.0 and Carousel 2?
Thanks!
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Kelly,
Not at the moment. Carousel 2 works in a different way to the original version and no longer uses background images for the tabs. Rewriting the Action to work with the latest version of the Carousel Action wouldn’t be hard although I suspect Walter may want to look at adding this functionality directly into the Carousel 2 Actions himself.
If you just want a rollover (rather than an active or mouse down image) then you can use the stock Softpress Rollover Actions.
Regards,
Tim.
On 7 Feb 2013, at 08:05, RavenManiac wrote:
Tim, do you have an updated Carousel Tab Button that works with FWP 6.0 and Carousel 2?
Experienced Freeway designer for hire - http://www.freewayactions.com
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options