2022.2

Viewselectorsallowyoutoapplyformattingtoelementsinacertainview,forexampletohighlightor
showelements.TheDesigneritselfdoesthis,forexample,tohighlightallboxesintheDesignview,
whentheShowEdgesiconisclicked.
Adding an outline
Thefollowingstylerulewrapseveryelementthathastheclassaddress-blockwithapurpledashedout-
lineinDesignmode.Theoutlineisnotvisibleinotherviewsorwhenoutputtingthedocument.
.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;
}
Page 830