2022.2

.DESIGN .address-block {
outline: 1px dashed purple;
}
Adding a background pattern
ThePostcardtemplatewizard(intheBasicPrinttemplatesgroup)usesthe.DESIGNclasstomark
areasthatarereservedforpostaluseandshouldnotcontaintextorimages.Theseareaswereadded
totheMasterPageasabsolutepositionedboxesthathavebeengiventheclassclearzone.Thefol-
lowingstyleruleassignsabackgroundpatterntoelementswiththatclassintheDesignview:
.DESIGN .clearzone {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVQImWNgQAL/70z7TyqHgYEBANRfDcEzmlBaAAAAAElFTkSuQmCC)
repeat;
}
Note: Thepatternimagewascreatedonwww.patternify.comandisaddedasadataURI(see
DataURIs).
Showing hidden Foundation elements
InCaptureOnTheGotemplatesbasedontheFoundationframeworkthe.DESIGNselectorcanbeused
toshowelementsthatwouldotherwisebehiddenintheDesignview.
Forexample,toexpandaccordionelementsandshowvalidationerrorsinDesignview,youcouldadd
thefollowingstylerulestoyourtemplate:
.DESIGN .accordion .accordion-navigation > .content {
display: block;
}
.DESIGN small.error {
display: block;
margin-top: -20px;
}
Loading a snippet via a script
Itispossible,andoftenveryuseful,toloadasnippetdynamically.
Createascript(see"Writingyourownscripts"onpage368).Inthecodeusethefollowingfunction:
l
ForanHTMLsnippet:loadhtml(‘snippets/nameofthesnippet.html’).
Toinsertthesnippetinthecontentatanypositionwherethescript'sselectorisencountered,
writeresults.loadhtml('snippets/nameofthesnippet.html').
MakesurethatthefilenameisexactlythesameasthefileintheSnippetsfolder.Ifthefilename
Page 390