Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   [SOLVED] Need a footer that changes according to what page is displayed (http://forum.bytesforall.com/showthread.php?t=20245)

DanDan May 3, 2013 01:02 PM

[SOLVED] Need a footer that changes according to what page is displayed
 
I have a full width footer. I have two footer images I need to use and need them to change depending on what page is displayed. I already have changing headers but cannot figure out how to adapt this footer solution to change.

The code I am using for the footer is:

html {background-image:url(/wp-content/themes/atahualpa/images/background_footer_or.jpg);background-repeat:repeat-x;background-position:left bottom;}

Can you point me in the right direction?

Thanks,

Dan

juggledad May 3, 2013 02:38 PM

what is the URL?
where exactly are you putting that CSS? use the ato->.... method to point direcetly to the option you put it in.

DanDan May 3, 2013 03:39 PM

The temporary URL is http://securexsl.net, it's still under construction so some pages are missing.

I added the footer background to the html/css inserts in admin/appearance/atahualpa theme options

Some pages have an orange theme and some have a green theme, but as yet I have not figured out how to change the footer from orange to green.

I think it was you that posted to use this method to add a full wide footer image in a previous post.

Dan

DanDan May 3, 2013 03:46 PM

To make it easier to see what I want to do, http://www.securexsl.net/meals/signature-lifestyle/ has a green theme, http://www.securexsl.net/roth-culinary-scene/ has an orange theme

juggledad May 3, 2013 04:08 PM

use something like this
HTML Code:

html body {
    background-image: url("http://www.securexsl.net/wp-content/themes/atahualpa/images/background_main_gn.jpg");
    background-position: left bottom;
    background-repeat: repeat-x;
}
html body.page-id-1189 {
    background-image: url("http://www.securexsl.net/wp-content/themes/atahualpa/images/background_footer_or.jpg");
    background-position: left bottom;
    background-repeat: repeat-x;
}

the first sets the default and the second overrides it for the particular page - you will have to change your page number and the image names, I was just playing.

DanDan May 6, 2013 03:23 PM

I am already using:

body.page-id-166 {
background: url(/wp-content/themes/atahualpa/images/background_main_or.jpg);
background-repeat: repeat-x;
}

to change the main background from green to orange for a full width background behind the header.

I am also using in header.php:

<?php if(is_page('Couples')){
include('header_02.php');
}

to switch from header_01.php to header_02.php.

I also have:

html {background-image:url(/wp-content/themes/atahualpa/images/background_footer_gn.jpg);background-repeat:repeat-x;background-position:left bottom;}

to add a full width bottom but I need to also change the bottom image when the top image changes.

Your solution knocks out the top background image. Is there another way to change the bottom full width background when the top background changes?

Thanks,

Dan

juggledad May 6, 2013 04:59 PM

go to ato->export/import settings and export your settings. save them to a TEXT file and attach them to a reply

DanDan May 6, 2013 06:41 PM

1 Attachment(s)
attached,

Thanks,

Dan

juggledad May 7, 2013 05:45 AM

I have a suggestion. Since you are just using a color for the line above the footer, why not use a border-top? try this: at ato->Style & Edit Footer->Footer Content add the following before anything else
HTML Code:

</td></tr></table></div></div>
<div id="divfooter"><div><table id="tablefooter">
<tr><td>

then in the css inserts add
HTML Code:

div#divfooter {width:100%;}
table#tablefooter {margin:auto;}

now to add the line for the footer for a page use
HTML Code:

body.page-id-857  #divfooter { border-top: solid 2px orange; }
body.page-id-866  #divfooter { border-top: solid 2px green; }

you might want to match your color exactly with the #rrggbb value. If you have multiple pages with the same color, you can use

HTML Code:

body.page-id-1  #divfooter,
body.page-id-4  #divfooter,
body.page-id-866  #divfooter { border-top: solid 2px green; }

just top keep the code cleaner.

DanDan May 7, 2013 07:48 AM

That worked perfectly!

Thanks,

Dan


All times are GMT -6. The time now is 04:37 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.