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 wordsStyling content presentation through the arrangement of blocks and layers.

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 Removed

Adjusting Margin

Image Removed

 

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.

Values applied using 4-value shorthand syntax

 

 

consider adding examples such as following:

Image Removed

 

Content Block
nameOutcome
rich-link-hoverstrue
id1042866408
classtight manual-outcome-flex
border1.pngImage Removed

The 1-value syntax

margin: 10px 

The unique value represents all edges

border2.pngImage Removed

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 Removed

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 Removed

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)

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.

Options in the Page Designer for sizing both margins and padding allow for fine-tuning of page designs, and customizing alignment without needing to add custom code.

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

Click on a block or layer in the Page Tab.

Open the Size expander.

Add values to adjust the pixel values for margin and padding.

  • Margin: creates space around layers and blocks
  • Padding: creates space within layers and blocks

Learn more about these values and how they are used: 

HTML Link
new-windowtrue
textCSS Box Model
urlhttps://www.w3schools.com/css/css_boxmodel.asp
 

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

Pro Tip

Negative values can be set for margins to achieve overlapping of 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

If using:

  • Replace me with something to note about this how-to entry that falls outside the scope of all other sections; and
  • 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