You can create a class-based style, even using the Freeway Edit Styles dialog to do so, and apply it to each of the boxes you want to share the same set of styles by clicking once on the box and clicking the style name in the Styles palette. You can only apply one such style per box on the page, though, so you may have to use that classname in one or more additional “tag-only” styles to further extend the effects. Say you create a style with the name set to ‘accordion’. Then you may need to create a sidecar style with its tag set to .accordion > h2, and maybe another that is .accordion > h2:after. But those class-based tag-only styles will not need to be applied directly to anything, as long as the parent elements you are trying to modify themselves have the (named) accordion style applied to them. Note also that many of the style techniques that are used in the styles you’ve pasted into your page head are not directly exposed in Freeway’s interface, and you need to use the Extended button in the Edit Style dialog to add them in.
Two further things to understand about Freeway’s style generation system. First, any time you create a style that has a Name, that style will only be published into the pages or individual page stylesheets where it has been explicitly used. Freeway does not just dump all of these styles into all pages, so you have to use them on the page in order to see them appear in a page’s code hierarchy. In contrast, Tag-only styles are published globally. If a style is declared in the Styles palette using the Tag field and keeping the Name field empty, then that style will be published everywhere. However – big BUT here – you cannot apply such a style to any element on the page or to any text on the page. In fact, you must not, because you will end up with broken and invalid HTML. You have to just trust the “cascade” to apply the style to the elements that match its selector.
It’s very useful to open the Safari Web Inspector and control-click on elements you want to inspect, and look at their styles there*. You will see that you have applied a rule to (for example) the #LawnReductionList > * which sets a left padding of 24px. This would be the rule to alter when changing the indent. The original design I showed was trying to “hang” the triangles out to the left of the headers and the list below them. If you wanted the disclosure triangle to be indented within the bounds of the list, then removing this part of the rule would do that. As far as the closed accordions being spaced apart, that is likely to do with the amount of “Space Before” and “Space After” (margin-top and margin-bottom, as referred to in the Freeway interface) that is applied by default to h[1-6] elements. If you set these to 0. then the headers will crash directly into one another when their intermediate disclosure elements are hidden. You can adjust the distance between them so they don’t crash directly into one another, but are closer. You can also (with the Extended interface) add some padding-top and padding-bottom to give the headers a larger click area. This is especially helpful for your iDevice visitors.
Walter
*If you don’t see the “Inspect Element” option in the contextual menu, then you don’t have the Develop menu enabled in Safari’s Advanced preferences tab. Turn that on, and you will get a whole range of incredibly precise measurement tools to help expand your understanding of how browsers apply CSS.
On Dec 3, 2014, at 4:50 PM, Peter Laundy email@hidden wrote:
Am working on another site using the accordions with disclosure triangles WD showed me above how to create.
On the page are two sets of such accordions: the first set I have modified to my liking and the second shows the original formatting provided mostly in WD’s CSS page markup.
You can find them at the bottom of this page: http://www.s33.me/yard-care/sustainablelawncare.html
APPLICATION TO DIV CLASS RATHER THAN A DIV? –
These accordions are part of a site architecture and will appear on more than one page, and sometimes more than one to a page. Right now all of WD’s CSS and JavaScript have been entered separately for each DIV to which they apply. Is there a way to create a class of DIV and assign the class to all DIVS with accordion triangle disclosures so it only needs to be done once per page and it is the same on every page?
FURTHER TWEAKS TO LOOK AND FEEL – How can I control the space between the closed accordions? And how can I eliminate the indentation added to the disclosed content so it aligns flush left and flush right with the bar containing triangle and title?
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