Using a png image as my footer background and color

(3 posts) (2 voices)

1. 

   samnasr
   Member

   hi there im trying to use this background png image i made. i made the size exactly like the current 1903 by 400.
   here is the link to the image
   http://amjcm.com/wp-content/uploads/2012/01/RED-BACKGROUND-GRADIENT-4.png

   i was successfully able to change the slider background fine .

   now i created another image ( see link above) but i can for the life do it right. i check the forum for similar question and answers and it seems like following them messed up my footer even more. so i deleted all the css i used and put the back the background in the skin as im waiting for better instructions from you guys the pros

   http://www.amjcm.com

   please keep in mind that the image would replace the color and the background

   Posted 4 months ago #
2. 

   Webtreats
   Support

   Hi samnasr,

   The skin you are editing was optimized for one-click color changes in the footer.

   If you would like to have the ability to change the footer background to a custom image, open your skin in "Advanced" mode and find the lines that look like this:

   /*:Footer ~*~*/
   #footer{/*:Footer Font */
   color:#ccc;font-size:12px;font-weight:normal;font-style:normal;font-family:inherit;}
   #footer .widgettitle{/*:Footer Titles Font */
   color:#eee;font-size:22px;font-weight:normal;font-style:normal;font-family:colaboratelight;}
   #footer a{/*:Footer Links */
   color:#ddd;text-decoration:none;}
   #footer a:hover{/*:Footer Link Hover */
   color:#fff;text-decoration:none;}
   #footer{position:relative;background-image:url(../images/black53.png);background-repeat:repeat;background-position:0 0;}
   #footer>.multibg>.multibg{position:absolute;height:339px;width:100%;background-image:url(../images/footer.png);background-repeat:repeat-x;background-position:center top;}
   #footer,#footer>.multibg>.multibg{/*:Footer Background Color */
   background-color:#ab1111;}
   #footer .widgettitle,#footer .widget li,#footer .widget a{/*:Widgets Border Color */
   /*border-color:inherit@;*/}
   /*:Footer End ~*~*/

   Change them to the following and then save changes:

   /*:Footer ~*~*/
   #footer{/*:Footer Font */
   color:#ccc;font-size:12px;font-weight:normal;font-style:normal;font-family:inherit;}
   #footer .widgettitle{/*:Footer Titles Font */
   color:#eee;font-size:22px;font-weight:normal;font-style:normal;font-family:colaboratelight;}
   #footer a{/*:Footer Links */
   color:#ddd;text-decoration:none;}
   #footer a:hover{/*:Footer Link Hover */
   color:#fff;text-decoration:none;}
   #footer{/*:Footer Background */
   background-image:url(http://amjcm.com/wp-content/uploads/2012/01/RED-BACKGROUND-GRADIENT-4.png);/*background-color:inherit@;*/background-repeat:repeat;background-attachment:scroll;background-position:center center;}
   #footer .widgettitle,#footer .widget li,#footer .widget a{/*:Widgets Border Color */
   /*border-color:inherit@;*/}
   /*:Footer End ~*~*/

   Now when you open your skin in the normal edit mode you should have the option to easily upload any image you like for the footer.

   Posted 4 months ago #
3. 

   samnasr
   Member

   Thank you Webtreat you guys deserve an award for the way you provide the support ! cheers

   Posted 4 months ago #

RSS feed for this topic

Reply

You must log in to post.