Formatting and style

1

Is there a way to format all pages on a site easily? I want to maybe center everything rather than always having it on the left. I tried with Colums but if you leave them blank nothing moved. Also I want to style all the pages with color left and right, and everything centered.

Thanks

2

I was looking at the theme section but cant see how to center everything, or set layouts, ETC

3

I would consider creating a function that you call on each page or that you even call instead of New-UDPage. You can also use the New-UDContainer cmdlet to avoid using the full width of the page.

New-CenterContent {
   param($Content)

   New-UDElement -tag div -Attributes @{ style = textAlign = 'center' } -Content $Content
}

New-UDPage -Name 'Test' -Content {
   New-CenterContent {
       "hello!"
   }
}
4

Thanks let me try that

5

The term ‘textAlign’ is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again.

6

It was a typo. Style needs to be a hashtable. You can use an CSS style in there.

New-CenterContent {
   param($Content)

   New-UDElement -tag div -Attributes @{ style = @ { textAlign = 'center' } } -Content $Content
}

New-UDPage -Name 'Test' -Content {
   New-CenterContent {
       "hello!"
   }
}
7

Ok so that only moved the title everything else did not move, I wrapped all the items in the new-centercontent

image
image1340×399 8.98 KB

8

Do I need to define a style for each component?

9

Nope. It’s probably just that we need to use the correct CSS property center is correctly. I thought text-align would do it but maybe you can try:

New-CenterContent {
   param($Content)

   New-UDElement -tag div -Attributes @{ style = @ { textAlign = 'center'; left = '50%' } } -Content $Content
}

New-UDPage -Name 'Test' -Content {
   New-CenterContent {
       "hello!"
   }
}

I can try on a live environment in a little bit. I’m just making this up as I go along :slight_smile:

10

Updating: Somehow the copy and paste changed an = to : so changed that now and have:

Function New-CenterContent {
param($Content)

New-UDElement -tag div -Attributes @{style =@{textAlign = ‘center’; left = ‘50%’ } } -Content $Content
}

But no components have moved still just the text.

11

This seems to work.

function New-CenterContent {
    param($Content)

    New-UDElement -tag div -Attributes @{ style = @{ textAlign = 'left'; marginLeft = '40%' } } -Content $Content
}

New-UDDashboard -Title "Hello, World!" -Content {
    New-CenterContent {
        New-UDTypography -Text 'Hello' -Variant h3
        new-UDForm -Content {
            New-UDTextbox -Id 'test'
        } -OnSubmit {
            
        }
    }
}

image
image1916×449 6.47 KB

1 Like
12

Great this works, thanks so much

13

I know this is a bit old post but wanted to share

If looking for true centered content you could give this a try

function New-CenterContent {
    param($Content)

    New-UDElement -tag div -Attributes @{ style = @{ position = 'absolute'; top = '50%'; Left = '50%'; transform = 'translate(-50%, -50%)'; } } -Content $Content
}