Unit 4: Styling your website

4.2 Styling advanced elements

Styling advanced elements

Buttons

Buttons make it easy for your visitors to find the information they need and is also an effective way to encourage them to visit specific pages on your website. You are able to customize the following values:

  • Float (left or right)
  • Width

The Button module can be styled in the states All, Normal and Hover. The elements that can be styled per state are as follows: 

  • Background color
  • Button size (padding)
  • Border (style, color, thickness, radius)
  • Font weight
  • Color
  • Text decoration
  • Font family
  • Font size
  • Letter spacing
  • Paragraph height
  • Font case
  • Icon color
  • Icon size

Examples of various combinations of the styling parameters above added to buttons:

Buttons

Divider

The Divider module allows you to visually split up your content by adding a fully customizable divider line to any row or column. This module can be styled with the following values:

  1. Divider type (none, solid, dashed, dotted)
  2. Color
  3. Thickness
  4. Width

Examples of some of the styling parameters above added to dividers:

Dividers

Icons

Icons are a good way to add attention-grabbing visual elements to your website. They can be used in call-to-actions, button labels and even navigation elements. Icons are another type of element that can be customized on a per state basis. Using the All, Normal and Hover states, you are able to customize icons with the following values:

  • Color
  • Icon size
  • Background color
  • Background width
  • Background height
  • Border (style, color, thickness, radius)
Dividers

Images

There are many great ways to add visual elements to a website and the most common is with an image. The Image module can display both still and animated images (GIFs). After you have added the module to the page and uploaded an image, you are able to style it to your liking using the following options:

  • Image size
  • Float (left or right)
  • Image hover
Dividers

Image list and Gallery

The Image list and Gallery modules offer the ability to display multiple images at the same time in a dynamic and interactive way. There are many different layout and styling options within these modules. After adding one of the modules and uploading images, you will be able to choose how many images you want to display, giving you the option to create a slider (displaying only one or a few image at a time) or a thumbnail gallery (displaying multiple images at a time). Other layout options include amount of columns to display along with how much margin or spacing you would prefer between each image. Finally, you have the option to display arrow navigation, circle pagination or no navigation at all.

Arrow Navigation

The arrow navigation element can be styled in the states All, Normal and Hover. You are able to customize the following values:

  • Arrow icon color
  • Arrow icon size
  • Arrow icon background color
  • Arrow icon background width and height
  • Arrow icon border (style, color, thickness, radius)
Dividers

Input Fields

Input fields are the elements that make up the structure of a contact form. The options that can be styled are as follows:

  • Field width (20%, 25%, 33%, 50%, 66%, 75%, 100%)
  • Margin between fields (determines how much space exists between input fields)
  • Stack each input (checkbox and radio labels only)
  • Background color
  • Border (style, color, thickness, radius)
  • Font weight
  • Color
  • Text decoration
  • Font family
  • Font size
  • Letter spacing
  • Paragraph height
  • Font case

Field width allows you to customize the layout of your form fields, giving you full flexibility when creating more advanced forms. Below is a grid that displays how form fields can be set side-by-side.

Dividers