DnnArt Skins
Facebook TwitterLinkedinYou Tube
Menu

Heading Styles


Complete Typography options are available with this skin pack so you can easily stylize your text and contact with beautiful look.. So what are you waiting for?? Here are example of some text elements and classes

Below is A Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus, tellus ac ornare aliquam, massa diam tristique urna, id faucibus lectus erat ut pede. Maecenas varius neque nec libero laoreet faucibus.

You can use this By:

<p>Your Paragraph Text</p>

Image Horizontal Alignments

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus, tellus ac ornare aliquam, massa diam tristique urna, id faucibus lectus erat ut pede. Maecenas varius neque nec libero laoreet faucibus.

You can use this image alignment like example given below:

<img class="img-left" src="/portals/6/your image location" alt="your image alternate text"/>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet nibh. Vivamus non arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam dapibus, tellus ac ornare aliquam, massa diam tristique urna, id faucibus lectus erat ut pede. Maecenas varius neque nec libero laoreet faucibus.

You can use this image alignment like example given below:

<img class="img-right" src="/portals/6/your image location" alt="your image alternate text"/>

This is Simple Heading 1


This is Simple Heading 2


This is Simple Heading 3


This is Simple Heading 4


This is Simple Heading 5

This is Simple Heading 6
This is a sample of the 'attention' style. To use this use the folllowing html: <span class="attention">....</span>This is a sample of the 'notice' style. To use this use the folllowing html: <span class="notice">....</span>This is a sample of the 'alert' style. To use this use the folllowing html: <span class="alert">....</span>This is a sample of the 'download' style. To use this use the folllowing html: <span class="download">....</span>This is a sample of the 'approved' style. To use this use the folllowing html: <span class="approved">....</span>This is a sample of the 'media' style. To use this use the folllowing html: <span class="media">....</span>This is a sample of the 'note' style. To use this use the folllowing html: <span class="note">....</span>This is a sample of the 'cart' style. To use this use the folllowing html: <span class="cart">....</span>This is a sample of the 'doc ' style. To use this use the folllowing html: <span class="doc ">....</span>

list styles

  • To use this style create a list in the following format: <ul><li>....</li><li>....</li>...</ul>

  • To use this style create a list in the following format: <ul class="special-1"><li>....</li><li>....</li>...</ul>

  • To use this style create a list in the following format: <ul class="special-2"><li>....</li><li>....</li>...</ul>

  • To use this style create a list in the following format: <ul class="special-3"><li>....</li><li>....</li>...</ul>

  • To use this style create a list in the following format: <ul class="special-4"><li>....</li><li>....</li>...</ul>.

  • To use this style create a list in the following format: <ul class="special-5"><li>....</li><li>....</li>...</ul>

  • To use this style create a list in the following format: <ul class="special-6"><li>....</li><li>....</li>...</ul>

  • To use this style create a list in the following format: <ul class="special-7"><li>....</li><li>....</li>...</ul>

  • To use this style create a list in the following format: <ul class="special-8"><li>....</li><li>....</li>...</ul>

  • To use this style create a list in the following format: <ul class="special-9"><li>....</li><li>....</li>...</ul>

This Is Link Button 1


Button Link
To use this type: <a class="action_button1"><span>....</span></a>

This Is Link Button 2


Button Link
To use this type: <a class="action_button2"><span>....</span></a>

This Is Link Button 3


Button Link
To use this type: <a class="action_button3"><span>....</span></a>

This Is Simple Link

Simple Link
To use this type: <a >....</a>

Use Any Skin Colour In text

You Can also use any colour of Text with any skin and in any element for example you want To Use Red Paragraph Like This:

This is red paragraph

So You can just use this in this format:

<p><span class="text-red">....</span></p>

Or You want to use Blue Colour on Hover Like This:

This Text Change To Blue On hover

So You can just use this in this format:

<p><span class="hover-blue">....</span></p>

Or You want to use Both Styles i.e Blue Colour on Simple & Red On Hover Like This:

This Text Change To Red On hover

So You can just use this in this format:

<p><span class="text-blue hover-red">....</span></p>

15 Colours available in text with this skin these are:

    Text Colors
  • Default(Black #000000) »class="text-default"
  • Grey »class="text-grey"
  • Blue »class="text-blue"
  • Dodger Blue »class="text-dodgerblue"
  • Royal Blue »class="text-royalblue"
  • Violet »class="text-violet"
  • Green »class="text-green"
  • Forest Green »class="text-forestgreen"
  • Red »class="text-red"
  • Pink »class="text-pink"
  • Brown »class="text-brown"
  • Steel Blue »class="text-steelblue"
  • Teal »class="text-teal"
  • Orange »class="text-orange"
  • White »class="text-white"
    Hover Colors(please hover to View)
  • Default(Black #000000) »class="hover-default"
  • Grey »class="hover-grey"
  • Blue »class="hover-blue"
  • Dodger Blue »class="hover-dodgerblue"
  • Royal Blue »class="hover-royalblue"
  • Violet »class="hover-violet"
  • Green »class="hover-green"
  • Forest Green »class="hover-forestgreen"
  • Red »class="hover-red"
  • Pink »class="hover-pink"
  • Brown »class="hover-brown"
  • Steel Blue »class="hover-steelblue"
  • Teal »class="hover-teal"
  • Orange »class="hover-orange"
  • White »class="hover-white"

Use Any Text Shadow Color In text

You Can also use any colour of Text Shadow with any skin and in any element for example you want To Use Red Text shadow in paragraph Like This:

This is red paragraph

So You can just use this in this format:

<p><span class="textshadow-red">....</span></p>

Or You want to use Blue Color Text Shadow on Hover Like This:

Shadow Of This Text Change To Blue On hover

So You can just use this in this format:

<p><span class="textshadowhover-blue">....</span></p>

Or You want to use Both Styles i.e Blue Text shadow on Simple & Red On Hover Like This:

This Text Change To Red On hover

So You can just use this in this format:

<p><span class="textshadow-blue textshadowhover-red">....</span></p>

15 Colours available in text shadow with this skin these are:

    Text Shadow Colors
  • Default(Black #000000) »class="textshadow-default"
  • Grey »class="textshadow-grey"
  • Blue »class="textshadow-blue"
  • Dodger Blue »class="textshadow-dodgerblue"
  • Royal Blue »class="textshadow-royalblue"
  • Violet »class="textshadow-violet"
  • Green »class="textshadow-green"
  • Forest Green »class="textshadow-forestgreen"
  • Red »class="textshadow-red"
  • Pink »class="textshadow-pink"
  • Brown »class="textshadow-brown"
  • Steel Blue »class="textshadow-steelblue"
  • Teal »class="textshadow-teal"
  • Orange »class="textshadow-orange"
  • White »class="textshadow-white"
    Text Shadow On Hover Colors(please hover to View)
  • Default(Black #000000) »class="textshadowhover-default"
  • Grey »class="textshadowhover-grey"
  • Blue »class="textshadowhover-blue"
  • Dodger Blue »class="textshadowhover-dodgerblue"
  • Royal Blue »class="textshadowhover-royalblue"
  • Violet »class="textshadowhover-violet"
  • Green »class="textshadowhover-green"
  • Forest Green »class="textshadowhover-forestgreen"
  • Red »class="textshadowhover-red"
  • Pink »class="textshadowhover-pink"
  • Brown »class="textshadowhover-brown"
  • Steel Blue »class="textshadowhover-steelblue"
  • Teal »class="textshadowhover-teal"
  • Orange »class="textshadowhover-orange"
  • White »class="textshadowhover-white"

This Is Link Button

Button Link To use this type: <a class="action_buttonBlue"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonRoyal"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonGreen"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonLime"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonLilac"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonAqua"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonNavy"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonOrange"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonRed"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonCorpGreen"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonIndigo"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonGrey"><span> Button Link</span></a>

Button Link To use this type: <a class="action_buttonBlack"><span> Button Link</span></a>

Copyright 2012 by DnnArt.net