HomeDesigningCascading Style Sheets (CSS) › Predefined styles

Predefined styles

Predefined content block classes

The Your Web Department platform comes with several predefined content block styles that let you override its default settings and even apply a whole new look to a block without the need to write a single line of code. To apply a predefined style, switch to the block’s Advanced options and then simply select the class from the list. The currently available classes are described below.

Predefined content block styles
Applying a predefined style to a content block

 

NoImgOnMob

Will hide any images in the content content block from mobile i.e. when the window is 480 pixels wide or smaller. Useful for instance if you have a very large image that you would rather simply hide from phones.

 

WhiteText

Renders all text in the block – normal paragraphs as well H1-H6 – in white, regardless of the website’s design settings. Links and buttons are not affected.

 

BlackText

Same as above, but for black text.

 

AnimZoomIn

Applies an animation effect to the content block. It will fade in and zoom until it reaches its normal size. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimSlideLeft

Slides the content in from the left. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimSlideRight

Slides the content in from the right. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

AnimFlip

Flips the content in. Note: ignored if the whole page is set to animate, an option available in YWD Designer.

 

CardReg

Applies a style similar to a Google Material Design card component to the block.

Card component
A CardReg-styled content block

To build a block with this appearance, edit your content block this way:

1. Select Normal (DIV) as the Paragraph Format for the image, as opposed to the default Normal setting.

Card component editing

2. Type/paste the rest of the content as a heading (typically H3 or H4) and the rest of the copy as a regular paragraph.

3. Set the content block width e.g. 320px for a row with 3 callouts side by side, with some margin between the callout and the next, if applicable.

Box style

4. Set the block’s Custom CSS class to CardReg.

 

CardHeader

This style is similar to CardReg above and you should set the content up the same way. However, here the style sheet will position the heading text overlaid on the image, and in white. Make sure you keep the heading text very short, as it needs to fit within a single line.

Card with a reverse header
A CardHeader-styled content block

 

Centred15em – Centred70em

There are cases where you may want to have centred text with a short line length. For instance, an introductory paragraph of a Home page that has been set to stretch to the full width of the browser window. Simply centering the text may not be enough because the lines would be too long, which isn’t good for readability. And if you have the line length of paragraphs limited globally in the Design settings, the text would appear off centre in relation to the overall page layout. These styles allow you to limit the line width width of the centred text in a specific content block to a number of em’s.

Centred text with a fixed width
Centred text with a fixed width

 

MaxText500 – MaxText900

These options allow you to limit the width/length of the lines text within the content block. They can be useful if for instance on a page without a right sidebar and you would like to prevent the text from extending the full width, which might affect readability. It has no effect on mobile, where the lines are inherently narrower due to the much smaller viewpport.

 

Button styles

To give a text link the appearance of a button, select the link’s Advanced tab and enter the text below in the Stylesheet Classes field.

Button link

NOTE: The Forms Manager app Submit button colour is specified in the Design settings.

Button style Stylesheet Classes
button button amber
button buton black
button button blue
button button bluegrey
button button brown
button button cyan
button button deeporange
button button green
button button grey
button button indigo
button button lime
button button orange
button button pink
button button purple
button button red
button button teal
button button yellow
button button white

 

Making buttons bigger or smaller

You can combine the styles above with the big and small classes:

button amber big will produce button

button amber small will produce button

 

Applying a raised effect

To apply a raised effect to a button – similar to the Google Material Design style – use the raised class:

button green will produce button whereas button green raised will produce button

Note: you can also apply a raised effect globally to all buttons – including submit buttons – by selecting the effect in the Design settings, Forms Manager App.

 

Creating hollow buttons

To create a hollow button – one with a transparent background and a black border around it, instead of button use simply hollowbutton:

hollowbutton will produce button

You can create a reverse (white) hollow button, useful for instance on “hero” images where the hollow button is overlaid on a photo or dark background. The hollowbuttonreverse class can be used for that:

hollowbuttonreverse will produce button

Note: you can also apply a hollow effect globally to all buttons – including submit buttons – by selecting the effect in the Design settings, Forms Manager App. In that case, the border colour will match whichever one you pick for the “Submit” buttons there.

 

Creating circular buttons

It’s also possible to create small circular buttons. Use the circle class for that, and keep the labels to 1 or to letters or numbers:

button cyan circle will produce Y and of course button cyan circle raised will produce Y

 

Table styles

Never use tables to lay out a page. They should only be used in very specific situations, like when you need to display data in tabular format:

Fruit Colour
apple red
banana yellow
orange orange

 

Try not to specify widths in pixels

In the Table Properties dialog, try to not specify the Width field in pixels – especially for wide tables. Small mobile viewports are only 300 pixels wide, and if you se the width of the table to more than that the layout will appear “broken”. Instead, either clear the Width field or type in a percentage e.g. 100%.

Headers

To create column headers like on the example above, set the Cell Type of those cells to Header.

Alternate row colours 

It’s easy to create alernate row colours for tables with many rows; our standard style sheet has a style for that. To apply it edit the Table Properties, select the Advanced tab and type in altrows into the Stylesheet Classes field. The example below illustrates it:

Fruit Colour
apple red
banana yellow
orange orange
kiwi green
grape purple

 

Top of page