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.
Applying a predefined style to a content block
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.
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.
Same as above, but for black text.
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.
Slides the content in from the left. Note: ignored if the whole page is set to animate, an option available in YWD Designer.
Slides the content in from the right. Note: ignored if the whole page is set to animate, an option available in YWD Designer.
Flips the content in. Note: ignored if the whole page is set to animate, an option available in YWD Designer.
Applies a style similar to a Google Material Design card component to the block.
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.
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.
4. Set the block’s Custom CSS class to CardReg.
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.
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
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.
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.
NOTE: The Forms Manager app Submit button colour is specified in the Design settings.
|Button style||Stylesheet Classes|
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:
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:
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:
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%.
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: