You could go back to your HTML tabs, you just have to adjust where you are putting the border. Take it off of the HTML box, and add it to the A (link) tag that the Action creates. That A tag is what will be modified by the JavaScript when the target of the carousel changes.
To make the A tag look like a solid box, with the borders on the outside of it, you need to do two things. First, set its display attribute to block. Second, use padding to create the height of the box (split between top and bottom) and set a fixed width and use text-align to either center or justify the text left or right.
Here’s an example (remember most of this has to be done with Extended attributes in Freeway, or with the External Stylesheets Action and a dedicated CSS editor or text editor).
#myTabsBox a {
display: block;
width: 100px;
text-align: center;
padding: 8px 0;
text-decoration: none;
border: 1px 0 1px 1px solid black;
background-color: #ccc;
}
#myTabsBox a.active {
border-color: red;
color: #fff;
background-color: #000;
}
#myTabsBox p {
padding: 0;
margin: 0;
}
To make the CSS this simple, you would need to follow this construction technique:
HTML box with the Title set to myTabsBox
Inline Carousel Text Tab
Inline Carousel Text Tab
Inline Carousel Text Tab
…
/HTML box
This will be completely not WYSIWYG in the Freeway design view, but it will look correct in the preview mode or a browser.
Remember, you can set the text style for your tabs using the Links segment of the Style tab in the Inspector while you have your myTabsBox box selected. I did a little hand-coded link color, underline, and background styling just to show that you don’t have to stick to the border color here. Anything that you want can be set on the A tag. It’s a fully structural and dimensional tag once you set it to display:block.
Walter
On Sep 10, 2012, at 12:45 AM, Aaron Corey wrote:
Figured one way out. May not be the best way, but it seems to work in all browsers I can test on.
Remove borders from “Item Appearance Settings” in the inspector since this apparently adds them to the DIV (I’m way out over my skis here…) which doesn’t allow modification on an image-by-image basis (as in the “.active” Tag).
Modify ![]()
for the graphic tab item in Menu>Item>Extended with the normal-state border that is desired using the styling code described above.
Then modify the “.active” Tag in Extended using the appropriate border modifications as described above.
This allows the “.active” tag to modify the image-specific borders on a case-by-case basis.
Thanks, Dave, for the pointers and prodding me back to the graphic item direction.
Special thanks to Ernie Simpson for the following post from 2007. http://www.freewaytalk.net/thread/view/10021
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