Warning: Cannot modify header information - headers already sent by (output started at /home/jerwon11/divtagtutorials.com/wp-content/plugins/captcha/captcha.php:1) in /home/jerwon11/divtagtutorials.com/wp-content/plugins/wp-super-cache/wp-cache-phase2.php on line 60
How to change footer text color and style?

How to change footer text color and style?

The footer content are an separate element than the main content area, so when you want to change the font color or style, you will need to change it in the template level. DivTag made it simple to do the change by marking the area where you can easily make the change.

Step 1: Open W Theme Editor

Click into “design” tab and then on the “edit html/css” to open the W Theme Editor

 

Step 2: Open CSS

Once the W Theme Editor is open, the first page you will see is the CSS editing page. There scroll down to near the end of the page to find this:

 

 

1) Change Footer Paragraph Properties

The first line of code is the footer paragraph code:

/* Change color and font style of PARAGRAPH in footer here */
#footer p{

}

Here you can add color code and or font family code to change the font style.

Example:

/* Change color and font style of PARAGRAPH in footer here */
#footer p{

color: #f4f4f4;

font-family:  Arial;

}

 

2) Change Footer Title Properties

The second line of code is the footer title code:

/* Change color and font style of TITLE in footer here */
#footer h2{

}

Here you can add color code and or font family code to change the font style.

Example:

/* Change color and font style of TITLE in footer here */
#footer h2{

color: #f4f4f4;

font-family:  Arial;

}

 

3) Change Footer link color Properties

The third line of code is the footer link code:

/* Change color and font style of LINKS in footer here */
#footer a, #footer a:active{

}

Here you can add color code to change the font color.

Example:

/* Change color of LINKS in footer here */
#footer a, #footer a:active{

color: #f4f4f4;

}

 

4) Change Footer link hover color Properties

The fourth line of code is the footer link hover code:

/* Change color and font style of LINKS MOUSE OVER (HOVER) in footer here */
#footer a:hover{

}

Here you can add color code to change the font color.

Example:

/* Change color and font style of LINKS MOUSE OVER (HOVER) in footer here */
#footer a:hover{

color: #f4f4f4;

}

 

5) Change Footer visited link color Properties

The fifth line of code is the footer visited link code:

/* Change color and font style of VISITED LINKS in footer here */
#footer a:focus, #footer a:visited{

}

Here you can add color code to change the font color.

Example:

/* Change color and font style of VISITED LINKS in footer here */
#footer a:focus, #footer a:visited{

color: #f4f4f4;

}

 

Tags: