EndPreviousNextEnd EndPrint This TopicEnd

CustomCode.css

Custom Code modules are ideal for adding custom code to any page such as place third party controls (e.g. Live Chat, Share Pricing, Facebook & Twitter widgets, YouTube videos, flash animations, etc). Enter code manually or insert snippets of HTML code stored in Contegro's snippet library.

 

1.The Custom Code layout uses the HTML <div> Tag as a wrapping element.

 

1.The Custom Code module references user-defined code, there is no Contegro data to style, however you should use this CSS file to add Classes that relate directly to the external functionality (see below).

 

How to setup and manage this module? Use the Contegro Administration Console either at a Template or Page level to access settings for this module. For example, to add a Snippet or  individual code.

 

 

Default Code

 

/* -----[ CUSTOM CODE ]--------------------------------------------------------------------- */

 

 .CustomCode {

         position: relative;

         clear: both;

         margin: 0px 0px 0px 0px;

         padding: 0px;

 }

 

 

Contegro Demo Example

 

The following code is a Snippet added to a Custom Code module within the Templates manager. All pages using the template will get the "Add This" function.

 

<!-- AddThis Button BEGIN -->

<div class="addthis_toolbox addthis_default_style">

<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4c61dd7b2c99b32d" class="addthis_button_compact">Share</a>

<span class="addthis_separator">|</span>

<a class="addthis_button_facebook"></a>

<a class="addthis_button_twitter"></a>

</div> 

 

The following CSS Class is added to CustomCode.css to apply style to the Custom Code module in the #cFA Container only.

 

#cFA .CustomCode {

    background: url("/Templates/demo/_images/back_Flip.gif") no-repeat scroll right bottom #55C8F1;

    color: #003177;

    font-size: 1em;

    padding: 10px 10px 20px;

    text-transform: uppercase;

}

 

The following CSS Class is added to CustomCode.css to style the external function (together with other Classes omitted from here).

 

.addthis_default_style {

    font-size: 1.3em;

    text-transform: capitalize;

}

 

The following screenshot is the result on the website.

 

Custom Code example

Topic Link