Carbon Theme, Footer Image

philn67

is there any way a footer image can be used that will fill the width of the browser, similar to the banner image? It only needs to be 50px high, but needs to fill the width. Using an image as a stack at the bottom of the page isn't what Im after because it only fills the width of the body, not the whole window.

msabene

This in one way to do it:

1) Add an image to Resources and add the following code in the Footer section of RW's Setup popup window:

<img src="%resource(myfooter.jpg)%" />

2) Then, add the following in Page Inspector>Header>CSS:

#footer {
margin: 0 !important;
padding: 0 !important;
height: 150px !important;
overflow: hidden;
}

Adjust the height as needed...

Cheers,
Mauricio

philn67

Thanks mauricio. For some reason the image gets placed in line with the left hand side of the body content, not full width of the window and the same width as the banner (as your attachment), although Ive done it exactly as described. I add an image to resources which is the same width as my main banner, add code to the footer in the setup window, and the code to the header css, so Im not sure what has gone wrong. Im I right in thinking that adding this to the setup footer means that I will need to use the same image on each page and I won't be able to use a different image on each page?

msabene

Hi @philn67,

Try adding also this style to Page Inspector>Header>CSS:

#footer img { width: 100%; }

Correct, the footer will repeat on every page because it's a site-wide setting.

If you want to use different images, you either need to modify the theme or use some jQuery "magic":

0) Scratch the previous solution
1) Add the following into Page Inspector>JavaScript:

jQuery(document).ready(function(){
jQuery('#footer').append('<div class="thinfooter"><img src="%resource(myfooter1.jpg)%" /></div>');
});

2) Then add the following style in Page Inspector>Header>CSS:

#footer { margin: 0 !important; padding: 0 !important; }
.thinfooter {
width: 100%;
height: 50px;
overflow: hidden;
}

You would repeat steps 1 and 2 on each page and replace myfooter1.jpg with a different footer image.

This solution preserves the standard footer and places the image below it. If you want the image to go above the standard footer, just replace the keyword 'append' with 'prepend'.

Cheers,
Mauricio

philn67

Thank you so much Mauricio, I really appreciate your help!

msabene

Please let me know if it works for you as expected. In my tests, it worked fine...

philn67

Hi Mauricio, I've just had chance to try the footer image, something odd is happening, sorry to be a pain. To explain, to place a banner image in this theme the code is used below in the header/css:

#aboveNav, #belowNav{ background-image: url(%resource(banners/banner14.jpg)%);

I placed your code in the javascript section, changing the image name to my image in resources "banners/banner14footer.jpeg".
The image is placed, but if I place the header/css code below the code for the header the footer is placed up to the left of the window, but ends at the right hand main body margin. Ive attached an image with background image changed to white to show the footer. The height can be changed.

If I place the header/css code above the banner image code, the footer is placed within the body area with a margin at both ends, and the height parameter has no effect.
Do you have any idea what could be going on?
Thanks again for your help

msabene

If you entered the code for the banner as shown in your post, it's incorrect as it's missing a curly bracket following the semi-colon. If so, any CSS included after it will be ignored...

PS: by the way, we are still talking about the Carbon theme, correct?

philn67

Hi Mauricio, yes you're right about the curly bracket, somehow I missed that off, which probably explains why some other codes Ive tried for other things have not worked. When I correct it the footer is still not as it should be. Ive attached a couple of screen shots to show the java and css boxes, can you spot anything incorrect? Ive checked so many times its now driving me nuts...no doubt there is a simple error I have made.
Yes its the carbon theme.

msabene

I can't see anything. I've attached screenshots of my test.

The small stuff is not always "visible" from a screenshot... My suggestion would be for you to email me your actual RW project, including your images to msabene at rwextras dot com so that I can see it first-hand.

Cheers,
Mauricio

daounandout

Hey guys, I'm trying to do exactly the same thing, with Carbon also.

Did you find the solution in the end?