2022.2

Table Of Contents

1. Media

2. Sectionbackground

3. MasterPageelements

Usingthe.page_mediaboxselector,youcouldchangethisstackingorderandplacethesectionback-

groundontopoftheelementsontheMasterPage.Setthez-indexpropertytoavaluelargerthan0

(zero)andadd!importanttomakethisstyleruleoverridetheinlinestyledeclarationthatnormallyputs

thesectionbackgroundbehindtheMasterPageelements:

.page_mediabox img.ol_pdf_datamapper_input {

z-index: 10 !important;

}

Scaling the section background

Therulebelowdownscalesthesectionbackgroundimageandkeepsitinthecentreofthepage:

.page_mediabox img.ol_pdf_datamapper_input {

transform: translate(-50%, -50%) scale(1.5, 1.5) !important;

}

View selectors

IntheDesigner,sectionscanbeviewedondifferenttabs:Source,Design,Previewand-ifitisaWeb

section-Live.Ineachviewmode(exceptSource)aspecificCSSclassisaddedtothe<html>element.

Theview-specificclassesare:

l

.DESIGN

l

.PREVIEW

l

.OUTPUT

.OUTPUTisusedwhenviewingthecurrentsectionontheLivetaborinanexternalbrowser,andwhen

generatingoutput.

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.

Page 389