Customization Guide – Edit Carousel Title and Paragraph

Step 1: Edit Title

In the Carousel Column code, find <h3>Infinity</h3>.

This define the title of the Carousel Column. Any text placed between <h3> and </h3> will be shown as the title.

For example, we will change the title to Carouse Column One

The code will look like this:  <h3> Carouse Column One </h3>

Click to Enlarge

Step 2: Edit Paragraph

In the Carousel Column code, find <p>A concept that in many fields refers to a quantity without bound or end.</p>.

This define the paragraph of the Carousel Column. Any text placed between <p> and </p> will be shown in the paragraph section.

For example, we will change the title to:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The code will look like this:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

Click to Enlarge

Repeat this process for all the other Carousel Columns

Font Style, Color and Size

The Carousel will take on the font size, color style of your website. We have pre-built area where you can customize the font color and size if you choose to.

In the main_style.css, locate the following codes:

/*—————————————
DIVTAG CAROUSEL WIDGET
—————————————*/
/* Edit Link Color */
.dtc-info a:link h3{
color: ;
}

/* Edit Link Hover Color */
.dtc-info a:hover h3{
color: ;
}

/* Edit Title Properties */
.dtc-slide h3{
color: ;
font-size: ;
}

/* Edit Title Properties */
.dtc-slide p{
color: ;
font-size: ;
}

Click to Enlarge

Edit Title Link Color

/* Edit Link Color */
.dtc-info a:link h3{
color: ;
}

Here you can add a color to the title link  by adding a HEX color code. For example if we want the title link to be Black, the code will look like this

 

/* Edit Link Color */
.dtc-info a:link h3{
color: #ffffff;
}

Edit Hover Link Color

/* Edit Link Hover Color */
.dtc-info a:hover h3{
color: ;
}

You can also change the color of the title link when a mouse hover over the title by adding a HEX color code. For example, we will set the color to be red. Here is how the code will look like:

/* Edit Link Hover Color */
.dtc-info a:hover h3{
color: #ff0000;
}

Edit Title Color and Font Size

/* Edit Title Properties */
.dtc-slide h3{
color: ;
font-size: ;
}

Here you can change the font color and/or font size of the Title. For example, we will change the title size to 15px and the color to be red. Here is how the code will look like:

/* Edit Title Properties */
.dtc-slide h3{
color: #ff0000;
font-size:15px ;
}

Edit Paragraph Color and Font Size

/* Edit Title Properties */
.dtc-slide p{
color: ;
font-size: ;
}

Here you can change the font color and/or font size of the Paragraph. For example, we will change the paragraph size to 11px and the color to be black. Here is how the code will look like:

/* Edit Title Properties */
.dtc-slide p{
color: #000000;
font-size:11px ;
}