Inline Custom CSS Styles for ZUBBs

Inline Custom Styles Are Just Amazing and are Available to all ADVANCED Members!
inline-custom-styles

What are Inline Custom CSS Styles?

In short inline custom styles gives you the ability to change the style of individual words or characters which override the global design settings of the design selected.

Currently, there are three different styles which can be simply applied to any ZUBB – which are Bold, Italics and Underscore (see below for a more advanced styling technique):

Bold-Italics-Underscore

Inline Custom Styles can be applied to the following fields as shown in the example above:

  • Brand Title
  • Call-to-Action Message
  • Call-to-Action Button Text

How do I apply these Inline Custom CSS Styles?

We use what’s known as HTML Tags which you simply surround the word or character with. At the current time only these HTML Tags below are supported:

  • <b></b> (for Bold but no longer supported in I.E.)
  • <i></i> (for Italics)
  • <u></u> (for Underscore)
  • <span></span> (used for applying any type of custom style you want using a format called CSS which stands for Cascading Style Sheet – see below for further details)

So to produce the brand title in the ZUBB above we would type this into the Brand Title field:

<b>BOLD</b> – <i>ITALICS</i> – <u>UNDERSCORE</u>

So far we have only covered three different style types…

Lets now take a look at a more advanced styling technique below!

.

.

.

WARNING
THIS IS FOR EXPERIENCED USERS ONLY

.

.

.

We also allow you to apply any supported CSS style you wish through the use of the following HTML Tag:

  • <span></span>

by setting the style directly yourself on the HTML Tag, so for example I could do this:

<span style=”color:red”>RED</span>

which would display the word RED as the colour red.

We can supply as many CSS styles as we wish but each one needs to be separated by a semi-colon, so for example:

<span style=”color:red;font-size:25px;font-weight:700″>RED</span>

which would display the word RED as the colour red using a font size of 25 pixels using a font weight of 700 which is the replacement for the <b></b> tag.

These are some of the most popular CSS styles you can use with your ZUBB text:

  • background-color: (enter a valid color name or color hex value like #ff0000 for red)
  • color: (enter a valid color name or color hex value like #ff0000 for red)
  • font-size: (enter a number followed by px)
  • font-family: (enter a valid font family i.e. Arial, Verdana, Courier NewGeorgia, Impact etc.)
  • font-style: (enter one of these normal, italic, oblique)
  • font-variant: (enter one of these normal, small-caps)
  • font-weight: (enter a number from 100 to 900 increments of 100 i.e. 700 is the same as using <b></b>)
  • letter-spacing: (enter a number followed by px)
  • text-decoration: (enter one of these overline, line-through, underline)
  • word-spacing: (enter a number followed by px)

These additional two have just been tested to work but are advanced styles which you will need to refer to external documentation on how to use them:

  • text-shadow: (click here for further details)
  • transform: (click here for further details)

Bringing all these different inline custom styles together you can produce a ZUBB which could look like this:

inline-custom-styles-2

If you want to learn more about CSS and how to use other styles with your ZUBB text then refer to the w3schools website here.

 

Written by Ron Perkins