Part1

LGC-grids

•  • 
LGC-grids| Mars 6 2023 Edit › sc name=”column” class:colCalcWidth
Edit SC

card1bkp 1/3=33.33%

i0
i1
C1bkp 1LGC-grids
Quote h1-info1
Btn: Nr 1x. /
h0 base overlay
i1
C1bkp 2LGC-grids
Quote h1-info1a
Btn: Nr 1x. /
i0
i1
C1bkp 3LGC-grids
Quote h1-info1
Btn: Nr 1x. /
h0 base overlay
i1
C1bkp 4LGC-grids
Quote h1-info1a
Btn: Nr 1x. /
h0 base overlay
i1
Wrapper2• 5LGC-grids
Quote wrapper2• - contain2•
Btn: Nr 1x. /
THIS IS CONTENT123
IN WRAPPER123
Centered W & H
card1 1/1.5=66.67%

•wrap, •contain card:FImg, •h6:img1: •h2ior:Ft-txt:quote: :
•contain card:FImg, •h6:img1: •h2:Ft-titl:txt1, Ft-txt:quote: :
•contain card:FImg, •h1:img1: •h2:Ft-titl:txt1, Ft-txt:quote; ;
FImg | h1_img1 | inf1&2 | h3_Rw_Ft-titl,R_FT-txt,R_btn •contain card:FImg, •h1:img1; •h3,•info1,•info2,•rowTitl:Ft-titl:txt1; •rowTxt:Ft-txt:quote, •rowBtn;; ;;;
3cards 1/3=33.33%
Kommunikasjon
Se kursprogrammet

The clear Property

leftDIV This DIV floats left This DIV floats left This DIV floats left
rightDIV This DIV floats right (clear:right)
myContent (clear:none)

#leftDIV  {float:left; width:80px;  background-color:rgba(163,193,253,1); margin:8px; padding:10px;}
#rightDIV {float:right; clear:right;  width:140px; background-color:rgba(253,153,153,1); margin:8px; padding:10px;}
#myContent1 {margin:12px; clear:none;} #myContent2 {margin:12px; clear:right;} 

!! Margin does not work consistently inside floats !!
myContent (clear:right)

#leftDIV  {float:left; width:80px;  background-color:rgba(163,193,253,1); margin:8px; padding:10px;}
#rightDIV {float:right; clear:right;  width:140px; background-color:rgba(253,153,153,1); margin:8px; padding:10px;}
#myContent1 {margin:12px; clear:none;} #myContent2 {clear:right;} #myContent2 {clear:left;}
myContent (clear:left)

#leftDIV  {float:left; width:80px;  background-color:rgba(163,193,253,1); margin:8px; padding:10px;}
#rightDIV {float:right; clear:right;  width:140px; background-color:rgba(253,153,153,1); margin:8px; padding:10px;}
#myContent1 {margin:12px; clear:none;} #myContent2 {margin:12px; clear:right;} #myContent3 {margin:12px; clear:left;}
!! Margin works ok here !!

LGC-grids CSS styling architecture| Shortcode options: class, style, equal_heights

There are native tags and added ones:
• lgc-grid-parent – (Native | Responsive | !! added to CSS): These are initially invisible
• inside-grid-column – (Native | Responsive | !! added to CSS): These are initially invisible
• Lgc0, Lgc1(Responsive), Lgc2 – (ELM added to CSS) (Designed to add borders and better manage the margins on mobile)

•lgc0

Beaver Themer


Category and Page Template Th_LAY2_Menu_G for page layout and ACF block placements.

No “Disable wpautop” plugin control (Issues among others in CV page layout calls)
• lgc1

SiteOrigin Custom Styling 1

/*– Page background –*/
.separate-layout { background-color: #f2f2f2; }

/*- – LGC COLUMNS – -*/
.lgc-grid-parent { see CSS }
.inside-grid-column { see CSS }
•lgc1

In page: styling the container and LGC columns

1/ Style @top level for SU block container
• div class=”post_wrap7″ •

2/ Style for each LGC column:
• div class=”post_wrap0″ •
•lgc1

Shortcodes SU

When applicable Settings to determine various SU objects

•lgc1

•post_wrap9

_ _ _

Beaver Themer


Category and Page Template Th_LAY2_Menu_G for page layout and ACF block placements.

No “Disable wpautop” plugin control (Issues among others in CV page layout calls)

SiteOrigin Custom Styling 1

/*– Page background –*/
.separate-layout { background-color: #f2f2f2; }

/*- – LGC COLUMNS – -*/
.lgc-grid-parent { see CSS }
.inside-grid-column { see CSS }
lgc1

In page: styling the container and LGC columns

1/ Style @top level for SU block container
• div class=”post_wrap7″ •

2/ Style for each LGC column:
• div class=”post_wrap0″ •
post_wrap6

Shortcodes SU

When applicable Settings to determine various SU objects

post_wrap_Grp

_ _ _

2
2

1