Scripty Accordian - h styles

Freeway
1

Hi there

Does anyone know if you can combine both text and a graphic in a header style and use them in the scripty accordion action?

I need to create a question and answer page and was going to use the accordion action to reveal the answer.

Next to the question and answer text I was wanting to create a graphic for the ‘q’ and ‘a’.

Thanks for any advice

Martin

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

You can do this easily with CSS – you simply create a background image for your header and apply it through the style you’re using on those headers. There are some parts of this that you’ll have to jump into the Extended attribute for – padding is not a normal part of the Style Editor, but it’s very simple to add. So for example, you want to put a big Q at the beginning of the question (header):

h2.q {
	background-image: url(Resources/q.png);
	background-position: left center;
	background-repeat: no-repeat;
	padding: 4px 0 4px 20px;
}

You can set all of this using the New/Edit Style dialog, but you will have to dip into the Extended sub-dialog to create the padding settings. I am using 4px above and below the text of the header, and 20px to the left, in order to clear a space for the Q image (so the text doesn’t run over the top of it). You can adjust these dimensions to suit your own image and font size. Apply the h2.q style to any headers you use in your accordion, and they will each have a Q to their left, and the text will be pushed over 20px to allow that background image to show through. You will not see all of these styles in the design view, but they will appear in the preview or a browser.

(By the way, you should only ever have one h1 tag on your page at any time. h2-h6 are fine to repeat within a page. h1 does not refer to a style or appearance, but rather to a position in the page’s information hierarchy. If you want h2 to be larger, just style it to be larger. There doesn’t have to be any relationship between header tag number and visual dimension, but there MUST be a direct relationship between the header number and the relative importance of the content of that tag to the rest of the page.)

To do the same for your answers, you will need to choose a different tag and add that answer icon to it. If you’re using the paragraph (P) as your show/hide content tag, then you can take advantage of CSS to only apply the A icon to the P that directly follows the header. You will need to create a tag-only style to do this, see these instructions for details: http://actionsforge.com/articles/view/9-tag-only-styles

h2.q + p {
	background-image: url(Resources/a.png);
	background-position: top left;
	background-repeat: no-repeat;
	padding: 16px 0 0 20px;
}

The + in the style selector above means that it will only target a p that directly follows an h2 with the classname q applied to it. So all the other p tags on your page are “safe” and won’t suddenly be filled with a icons.

Let me know how this goes for you. This technique is how you can use the ScriptyAccordion Action to make headers that look like solid boxes or gradient images, or pretty much anything you can imagine, while maintaining the SEO power of normal HTML header tags.

Walter

On Feb 19, 2012, at 11:17 AM, McKenzie Photography wrote:

Hi there

Does anyone know if you can combine both text and a graphic in a header style and use them in the scripty accordion action?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

Hi Walter,

Thanks for your prompt reply and full explanation. I’ll be giving this a go during the course of next week.

Best wishes,

Martin

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options