How To Use The Block Styling Manager Xmpro App Designer

Learn how to use the block styling manager to customize your pages in the XMPRO App Designer.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com...

Transcript

Learn how to use the block styling manager to customize your pages in the XMPRO App Designer.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com... hello and welcome to another training

video from XM pro today we'll be looking

at how to use the block styling manager

the block styling manager is how you add

CSS styles to elements on your page to

get to the block styling manager click

on an element in the page and then click

on the block styling tab in the command

bar if you're on the blocks tab or the

page data tab when you click on an

element the tab will automatically be

changed to the block styling tab there

are several sections in the styling

manager the general section contains

options for the general positioning of

the element the dimension section

contains options for the size outer

margins and inner padding of the element

the Flex layout section contains options

for CSS flexbox Styles the typography

section contains options for affecting

text inside the element the decoration

section contains options for opacity

background borders and shadows and the

extra section contains options for

anything that doesn't fit in a different

category like transitions and rotations

how you would use these options is up to

you but as an example I can change the

font color size line height weight and

text alignment inside of this text

element

give a background color to the body of

the page there is a section at the top

of the styling manager that says style

group this is how you apply styles to

multiple elements at once so you've been

editing the Styles for one of these

paragraphs but you don't want to go into

each of them and do the same thing over

and over you can add a style group to

each of the elements I'll delete this

one and then and now the style that you

select applies to every element in the

style group any element that you add to

the style group later we'll get these

Styles as well if you want to add extra

Styles to one element of the style group

but not the others you can uncheck the

style group and change the Styles this

will apply the Styles to that element

only and not to the style group you can

then retake the style group to apply

styles to every element again and you

can remove the style group from an

element by clicking the X this will

remove the sales from this element which

have been applied to that style group

there is also the state drop down this

will apply Styles only when the state of

the element is whatever we select here

for instance select the hover State and

give a background color of green when

the hover is selected it will show a

preview but if we remove the hover

section selection it will behave

normally now when you hover over the

element the background color turns green

is also click which applies sales when

you click on an element

and even odd which will apply styles to

every odd element this is even odd even

odd even so it's every second element

that this applies to this has been how

to use the block styling manager