Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Content Layer
namePage Info
id278129461
classwatermark-layer
Content Column
namePage Body
width100.00001%
id278129463
Content Block
background-colortransparent
namePrompt
id494677873
classtight manual-prompt-flex

some words

Content Block
nameOutcome
rich-link-hoverstrue
id1042866408
classtight manual-outcome-flex

copied over:

Layers and content blocks can be positioned by adjusting margin settings. Their content can be manipulated visually using padding.

 

Theme Press layers and content blocks follow the CSS box model.

 

Padding, border, and margin can all be adjusted within the designer without having to manipulate CSS. Negative values can be applied to the margins to move the element itself and the following content. For example, if a -20px top margin is applied, that will move the element 20px towards the top of the page. A bottom margin of -20px will move content following that element 20px closer vertically. You can use padding to position content within a block by adjusting the distance that content resides from the edges of the container.


 

CSS Box Model

 

Image Added

Adjusting Margin

Image Added

 

NOTE: THIS NEEDS TO BE REPLACED WITH OUR OWN CONTENT - taken from other source.

CSS Shorthand Syntax

When entering pixel amounts for margins, padding, or spacing, there are four different ways to enter the amounts.

border1.pngImage Added

The 1-value syntax

margin: 10px 

The unique value represents all edges

border2.pngImage Added

The 2-value syntax

margin: 10px 20px

The first value represents the vertical, that is top and bottom, edges, the second the horizontal ones, that is the left and right ones.

border3.pngImage Added

The 3-value syntax

margin: 10px 20px 30px 

The first value represents the top edge, the second, the horizontal, that is left and right, ones, and the third value the bottom edge

border4.pngImage Added

The 4-value syntax

margin: 10px 20px 30px 40px

The four values represent the top, right, bottom and left edges respectively, always in that order, that is clock-wise starting at the top (Nemonic memory trick: the initial letters of Top-Right-Bottom-Left match the order of the consonants in the word trouble: TRBL)


Values applied using 4-value shorthand syntax

 

 

consider adding examples such as following:

Image Added

 Replace me with a more complete explanation of what this how-to accomplishes.


Content Block
nameSteps
rich-link-hoverstrue
id494842117
classsteps-block numbered manual-steps-flex

Use h4 for section headings

If you don't want numbers in the section headings, simply remove the "numbered" class from this block.

Note/Tip/Warning/Info blocks below are collapsed by default. If you want to use any of these, try to keep to just one per page. You may use two if necessary, but in general, try to limit these.

Content Block
nameNote
rich-link-hoverstrue
id495965127
classmanual-note-flex
collapsiblecollapse
Note

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the Steps block above to narrow the gap between the two blocks.
Content Block
nameTip
rich-link-hoverstrue
id894522670
classmanual-tip-flex
collapsiblecollapse
Tip

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
Content Block
nameWarning
rich-link-hoverstrue
id894530759
classmanual-warning-flex
collapsiblecollapse
Warning

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
Content Block
nameInfo
rich-link-hoverstrue
id894537203
classmanual-info-flex
collapsiblecollapse
Info

If using:

  1. Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  2. Add the tight-bottom class to the next visible/non-collapsed block above this one to narrow the gap between the two blocks.
Content Layer
background-color$lightGrayColor
nameRelated
id888168050
Content Column
nameRelated
width100%
id888168051
Content Block
rich-links-hide-descriptiontrue
rich-link-hoverstrue
rich-links-columns4
rich-links-verticaltrue
rich-links-image-height100px
rich-links-hide-site-icontrue
rich-links-details-padding10px
nameRelated
rich-links-enabletrue
border-width0
rich-links-details-alignmentleft
rich-links-margin20px 30px 0 0
id496234544
classrelated-block clean manual-related-flex
  • Replace me with a link
  • Replace me with a link
  • Aim for 4 or fewer related links.  If we need more, that's okay.  Be judicious.  Delete me when you're done.