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.

 

NoImgResize

By default, the editor will automatically fill in the Width and Height of an image when it’s inserted into a content block. However, sometimes you may not want that. For instance, you may have a very wide image, which would appear distorted on mobile. That’s because although we limit the width to 100% of the view port – so the image doesn’t “break” the page layout – the height in this case is written as inline CSS. Although you can remove the Width and Height manually (in which case the image will resize responsively) it’s unrealistic to expect the end user to always remember to do that. By setting up the block to use the NoImgResize class, the system will remove the Width and Height values from any images it contains immediately prior to rendering the page, thus allowing them to resize responsively.

 

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.

 

Animation styles

Applies an animation effect to the content block. To apply it toWord Processor editor e.g. an image, use the Stylesheet Classes field in the Adanced tab of the Image Properties.

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

  • AnimZoomIn
  • AnimLightSlideInUp
  • AnimLightSlideInDown
  • AnimSlideLeft
  • AnimSlideRight
  • AnimFadeIn
  • AnimFadeInDown
  • AnimFadeInDownBig
  • AnimLightSpeedIn
  • AnimLightSpeedInDown
  • AnimFlip

 

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.

 

HideFromPrint

Prevents the content block from being printed. For instance, you may have a YouTube video or a slideshow that you would rather not appear when people print the page from their web browsers.

 

Top of page