Weebly Flexible Footer – Create Drag & Drop Content Footer
February 2, 2012 Tags: custom footer, Flexible Footer, Weebly drag and drop footer
Category: Articles 124 Comments 
[Update Dec 12, 2012: Weebly started providing Custom Footer as standard feature for Pro users. If your site is a Pro site, you should be able to drag-and-drop content into the footer without any of the following procedure. However, if you are using free site, please proceed with the steps below to create a flexible footer for your free site.]
The Weebly Flexible Footer lets you to drag and drop elements on to the footer area similar to the way you add content to the pages. The footer you see in siteshowcase.weebly.com is a flexible footer.
Flexible Footer with Drag and Drop Elements used in siteshowcase.weebly.com
There are two distinct advantages of flexible footer.
1) The Footer area adjusts itself to fit the elements as you keep adding them.
2) The footer is applied to all pages of the site saving you quite a bit of effort when you need to update the footer. Its a great place to add Facebook link, Mailing list subscription, Google Translate, Google AdSense etc. For a site like siteshowcase.weebly.com which has about 100 pages, it saves a lot of time otherwise spent in copying the elements every time we modify the footer. The instructions we provide in this article can be replicated to Sidebar as well. For this article however, we focus on the footer and what is needed to create a footer area where you can drag elements as you wish.
Following are the step-by-step instructions for adding flexible footer to your weebly site. In order for the Flexible Footer to work, your theme need to be enabled with the right tags. If you are a little comfortable with Editing HTML/CSS, then it should be fairly easy to do. However, if you are not comfortable with editing HTML, you should wait until Weebly enables this for the theme you are using.
Step 1: Create a Style definition for your Footer
This defines the appearance for the flexible footer. Edit main-style.css and add a style for the footer. For siteshowcase.weebly.com, we added
#flexifooter{
width: 960px;
color: #888800;
font-size: 15px;
background: #2a2a2a;
text-align: center;
padding: 28px 0px 20px 0px;
}
Define a style for the Flexible Footer. You can name it any thing. We chose the name flexifooter
This dictates the appearance of the Flexible Footer area that we would like to be added. The name does not have to be ‘flexifooter’. You can choose any name for the style and use it in Step 2. For SiteShowcase, we chose the name flexifooter.
Step 2: Modify Page Type to include the new flexible footer content area
If you are using the older version of the theme, index.html (from Edit HTML/CSS) is the only page type you need to update. For newer themes, there are four page types (tall-header.html, short-header.html, no-header.html, landing.html). You will need to do the changes for all page types just so you do not miss the footer if you happen to use that particular page type.
The Step 1 defined the style. Now, open index.html (or the new page type), and add the follwing line just above the line that has {footer} in it.
<div id="flexifooter">{flexifooter:content}</div>
If you defined your style with a different name in Step 1, use it in place of ‘flexifooter’. Save the theme. You have now created the draggable content area for the footer. The next step is to add content to the newly created footer area.
Step 3: Drap and Drop elements into the Footer Area
The Step 1 and Step 2 prepare the theme to include a Flexible footer area. What is left is to drag elements into the footer area and organise it the way you want. Go to the Site Editor and edit any page to drop elements into the new footer. For siteshowcase.weebly.com, we chose three columns to divide the footer area. Then we added the necessary elements to it.
Any additions/modifications to this flexible footer area are automatically applied to all pages. If you would like to have different footer content for different pages, then, in Step 2 add global=”false”… like
{flexifooter:content global="false"}
For SiteShowcase, since we wanted the same footer content for all pages, {flexifooter:content} would do.
One caveat with flexi footer or any custom draggable areas is that the content from the custom container areas does not automatically propagate when you switch themes in Weebly. For the content to show up in new theme that you switch to, the new theme must be modified to use the same area names as in the old theme. So, if we were to switch the siteshowcase.weebly.com‘s theme to some thing else, we will have to add {flexifooter:content} to the index.html of the new theme as well. The style may or may not be added depending on whether the new theme already has a predefined style that we could use.
The above procedure can be applied to define multiple content areas for different page types too, which we will discuss in a later topic.
[Note: As of Jun 18 2012, content from any of the custom content areas does not get displayed in the mobile version of the site. This includes, the social icons, phone text, headline text, action button etc.]
HA YES!!!! Thanks for this post!! You’ve just made my day!
Tried it, managed to get the footer in ok (as per instructions) but when i try to drag a element into the footer box the element just floats about like it is attached to my mouse movements and weebly just freezes up !
That is an issue with the editor. Some times, the elements get a ‘move’ property. Closing the editor and reopening resolved the problems.
If you drag a fresh element into the footer it works ok but if the element is already on the web page and try to drag it into the footer then it seems to fail as i described above.
Just tried dragging a new flash element into the footer and it would not load.
This is great. I put in the footer and I even replaced the header now I just need to figure out the sidebar and maybe the rest of the page. Wouldn’t it be nice to put anything on a Weebly page?
Will be posing an article for sidebar too. There are some consistency issues. For sidebar, the elements are not showing up in the editor correctly. They are showing up fine on the site after publishing.
You cannot make a flexi footer while hiding the weebly footer if you are a free user. You won’t see your elements when you drag them in to the flexi footer.
It should be available for free users too. Will try it on a free account and let you know. Sometimes, the elements are not displayed in the custom areas. Have noticed it with sidebar, but not with footer.
Hi Christina,
Maybe you already figured this out, but I just encountered the same issue and fixed it by rearranging my html so it reads like this:
{flexifooter:content}
{footer}
Before, when I had the style=”visibility: hidden” in front of the flexifooter, both were hidden. Hope that helps if you haven’t already fixed it.
How did you get it to work on the header?
I replaced the header image with the “flexifooter” and kept the header image background, however I found out an easier way. If you go to your html page and where you want to be able to put content to something just do this…i.e.;
{header} – “add this”
Now you will be able to drag elements onto it but not all of them may work. (I have not got them all to work yet myself.)
Let me warn you though you will have to play with it a while to get it exactly the way you want in the css.
After I finish my header I will post a link to my site. I will tell you this much though, I have added a flash banner as the title, instead of just the regular text.
It was supposed to be
Sorry about these post my computer’s acting up but it was supposed to be this.
div id=”header”
{header}–”add this below the div tag with the div’s name”
I hope this works for you.
Hallelujah I figured out the rest of my header. When I first posted how to add content to the header I didn’t have the slideshow figured, but I think I got it now.
If you want to look at it it is http://www.evangelistjohnallen.co.cc. I haven’t really done anything with the actual content of the site just the main look of it. (That’s if you look at it all.)
I also have been working on a website for our church and I have totally redesigned it with the css and html but it is still a Weebly site and I think it looks very good for a Weebly site and I did not download another theme from Weebly Templates. I started with a simple free Weebly theme. Anyway, the reason why I am posting this here is because of what I learned with this article and if anyone wants to look at it I will post a link soon.
I added this and it was working great, but ow i cant see it in the editor but it is still live. What happened?
Have noticed it with custom drag and drop areas. That needs to be fixed by Weebly.
Thanks, this is what I was looking for!!!
when i do this, the footer doesn’t show up centered. advice? thanks.
Same issue here. It was centered perfectly fine on most of my sites, but there are two where it will not work.
Hmmmmmm
It depends on the theme and how the other elements are defined. Try to add
clear: both;
to the flexifooter id in the css and see if that solves your issue. Otherwise, check the width of your template and adjust the flexifooter width accordingly. Basically, you need to figure out if the footer element is inheriting alignment property (or) if the size of the footer chosen is a mismatch.
Just add: margin:0pt auto;
to the CSS flexifooter code.
How do you edit the border/margin of this flexi-footer? I have got the footer to work great, and made it the same size as the page, but now the text is pushed right against the boarders.
Also, how do I move the flexi footer right against the website I’ve already built? There is a space between it and the site, even after reducing padding to 0.
Thanks for your help.
To create space between text and border, use padding parameter.
For extra spacings, check the margins and padding of other elements adjacent to the element in question.
Hi, I’m new to Weebly and I want to thank you for this great blog! I will certainly implement your directions for a footer, but meanwhile my problem is with the dark bar of colour behind my horizontal navbar.
I want to change the colour of that strip but I can’t find the right code in the HTML/CSS part. Can you help me?
Thank you.
Gina
Its looking well feature It would be much preferable by other users I give you good rating to do such a nice work
This is exactly what I’m looking for, but I can’t get it to work. I’m using the Boutique template from DivTag Weebly Ready Templates, and the footer ends up in the middle of the page (right across the side nav and the content). I’m guessing that the css for the side navigation is what’s messing me up, but my attempts at a fix having made any difference. Any suggestions?
Here’s the template I’m using
http://www.weeblytemplate.com/boutique.html
Hi, this question is “footer-related” but not about the flexible footer. I wanted to remove the Weebly footer but that topic is already closed for comments so I thought I’d ask this here: how can I get rid of it in the theme I’m using? The CSS file for it doesn’t have any part about the footer in it. Here’s the site: http://jk-online-content.weebly.com/
Any help would be greatly appreciated.
I just noticed that removing the Weebly footer is a problem in all vertical menu themes. Is there a way to solve this?
Nevermind, I figured it out. Sorry! And thanks for running this very informative forum:)
It is closed because it is so easy. Read that post, you’ll be done in 5 minutes.
You may also want to do a post on ‘speed of feature releases’ for different website creation platforms. Weebly particularly has been extremely slow in releasing enhancements to site functionality. In recent times, Weebly has released a very few updates towards improving site functionality.
The last update to introduce Multiple Columns was about 3 months ago and one prior to that – A New Linker was more than 5 months ago.
Even if it’s just for their Pro customers, they need to focus more on improving functionality rather than just looking at the cosmetic changes around themes and logos.
Hi Anand,
After reading your comment about the speed of our feature releases, I wanted to take a minute to reply. In the past few months, we’ve released a new multi-column element, threaded blog comments, mobile friendly slideshows, and a number of smaller improvements as well.
However, at the same time, we’ve also been focused on a number of larger scale projects that will add substantial power and capabilities to the Weebly platform. Such large changes take a lot of effort, and it’s always a fine balance between smaller and larger feature releases.
The good news is that 2 of these larger scale projects (our new theme engine and iPhone app) are nearing completion and it’ll be just a few more weeks until you can get your hands on them. We work hard, day in and day out, to provide the most feature-rich, powerful website creation experience available and we’ll continue to pump out innovative features as fast as possible!
Thanks for your support.
Best,
Dan
Co-Founder, Weebly
hi there!
for some freakin reason the text links in my flexi footer
have totally different colours then in the rest of the page normally my link colour is just orange
when i click a link made in with a text box in the flexi footer the link is first blue and purple after clicking it…
anybody know whats happening there?
check it at http://www.crsy.org
help is appreciated=)
Thanks for this tip!! Very usefull!!
I’ve used the flexifooter to massive success on one website and now I’m attempting to use exactly the same thing on a second website and I’ve encountered a problem:
The footer is displaying as the specified width but when I drag a column element into it, the columns show up next to the footer on the right – effectively doubling the size of my footer. As a result you have to scroll across to a blank screen to see the elements (it does this published too). I can drop in text boxes and they begin at the correct place but then the text will continue to write across two widths of the footer out to the right again. Can anyone spot a glaring mistake or has a fix for this?
}
#footer {
float:left;
width:960px;
border-top:1px solid #333333;
margin:5px 0px 30px 0px;
background:#c5d8fb;
}
#footer-contents {
float:left;
color:#333;
font-family:”lucida grande”, “lucida sans”, arial, sans-serif;
padding:5px 5px 10px 5px;
width:960px;
height:8px;
}
#flexifooter{
width: 960px;
color: #333;
font-size: 13px;
background: #c5d8fb;
text-align: center;
padding: 5px 0px 30px 0px;
}
Great tip! Thanks for sharing!
can you please tell me how to change the color of the links in the footer? i’ am really stumped on this…
Please check the reply further below:
http://weeblyforums.com/2012/02/weebly-flexible-footer-create-drag-drop-content-footer/#comment-2425
Can this same rule be applied for a flexible drag and drop header?
Yes. You can create a Flexible Content area any where you like.
I’ve tried to get this working, Flexifooter working on my site.
(
I’ve adjusted the CSS and HTML to no avail… Not working for me. Frustrating that there isn’t an easy/simpler Footer solution. http://www.rugbyjunky.com
Right now, users have to do it themeselves for their templates. Once Weebly releases the new themes with enhancements, it should become available for all templates offered by Weebly.
@Raju Is there a time frame for these enhancements?
I’ve followed your instructions above and it’s not working for me… Any suggestions?
Appreciate your help/comments… Thanks, P
Don’t know when Weebly will be able to release them. According to their blog post, they are hoping to release is as a part of bigger release in couple of months. I would not hold off any thing critical waiting for newer themes.
For your theme, if its not working, try to reduce the width of the footer to see if its an issue with the margins etc. If it still does not work, create a test site using the same theme. Without any further modifications to the test site, try to get the flexi footer to work. That should say if any of your customizations are conflicting with it.
How do you change the color of the links yo put in the footer?
Assuming that the footer id is #flexifooter and you would like the link color as white, what you need to do to define a specific colour to the links in Flexile Footer is to add the following definition to your css:
#flexifooter a {
color: white;
text-decoration: none;
}
You can specify the hex code of color instead of white. Some thing like color: #efefef
Add more parameters to the above definition. Basically, “a” tells how anchor link should be shown. #flexifooter a { …} specifies how anchor link within #flexifooter region should look like.
I have the same problem, the links are almost the same color as the background of the footer
I can’t get this to work….not sure why. Help?
Tried everything it said here but it didn’t work. The code here also seems slightly different. For example, my theme doesn’t say anything anywhere about “content” whereas the one used here has the footer stuff stacked under content.
Each theme is different. The CSS and index.html will not be the same. But almost all themes will have {content} in index.html. Check closely for some thing that looks like
The id may be different. But you should see {content}
Looks like with the new Weebly update, the Flexi footer id won’t work. They’ve made may changes.
Thanks, it’s helpful!
i cant seem to align it to the center it just goes to the left of the footer all the time
The problem I have is that whatever contents are in the flexifooter are not showing up in the mobile version! Is there anything I can do to make them all show up in the mobile version?
Didn’t check the mobile version for flexible content areas. Will check it and let you know. If it’s not working, I guess it is a bug Weebly will fix soon because the new theme upgrades use the flexible content areas.
Where is the code to be placed?
When I view the flexifooter in the editor it is perfectly centred but once published its push over to the left? also viewed on a smaller screen its even further over. Any advice?
Question…..is there a way to solve the problem as a free user with the hidden footer.
I use your method but it does not show anything unless I take the code out that hides the weebly footer. Can anyone help please?
You probably are using the same ID for both. Copy the ID with a different name and use it.
Hello Raju,
I have already done the above steps but it seems like the footer is strongly tilted to the left. Is there anyway I can try to centre it?
http://ptonmindtest.weebly.com/
Thank you so much!
@contact.wenyou, Hey,
I am facing the same Problem,At my other site with the same theme it looks fantastic but why is it that in the site with the same theme it is not visible @ the center it is stuck tightly @ the right side?
@contact.wenyou,
Hey tell me how did you put the slideshow on the header??
Hey guys love the blog.. I have a question about {content} areas..
can I create them anywhere I want?
I want to make a more complicated layout putting content areas in sidebars, headers, footers and so on but NOT within the main pre defined content area only.
Somewhere I can have css already define a design section that determines how the added {content} zone would work..
is this possible?
truth is, Ive tried but it doesn’t seem to take.
Any ideas?
Thank you
Chris
Absolutely. You can use this to give your site a whole new look. Check the article about how it can be used as a top bar. You can deploy the same technique to use it any where.
Thanks a lot for the info Raju….keep up the great work.
Hello,
Flexifooter works perfectly and I love it, but while I use it, my navigation bar seems to stop showing.
When I remove Flexifooter, then navigation functions correctly.
Is there any way to have them both work at the same time? Thanks!
The flexifooter should not be interfering with the navigation. Flexifooter does not use any script at all. Check if some thing else that you are placing in flexifooter is conflicting with the Navigation script.
Very nice trick. Can we make it stick to the bottom and have full width?
Yes, if you adjust the DIV in CSS and use it at outside of a container/wrapper. Specific details depend on the theme.
I’ve just used this on a my at present free site, and it worked first time!
Excellent!
I popped the colour of my background into the code and it’s in place.
Although I’ve not put anything in it as yet it’s there already for when I do!
Great article easy to follow and to execute…
Cheers.
Thank you, Graham.
I can’t find the index.html for step 2 — I don’t see it on the left under CSS and page layouts
This has changed with the new themes. If you are editing the new themes with the four page types, with what would otherwise go in index.html
It did not work for me man…
If you switched the theme, the custom changes do not automatically propagate to the new theme you choose. Any changes made to a theme remain with that theme only. So, you will need to redo the changes in the new theme you picked.
Please tell me how to use this sticky bar,on the top,for weebly site:-
http://www.dynamicdrive.com/dynamicindex17/stickybar.htm
where to place the css codes? above the {footer}?
Hello,
Love the weebly forum website. I have tried for several hours to get this to work. I am trying to do everything as explained but it still won’t work. I really, REALLY need this. How can I do this? What am I doing wrong?
Added to prior comment – after many hours of adding and taking away this is only working on 2 of my pages. Any ideas as to what I am doing wrong?
If you are using different page layouts, make sure that you add the flexifooter all the page layouts in your theme editor.
Your tutorial is very useful for Weebly users and even me… Keep up the good work Raju. Cheers
Thank you,
Rosemarie
how do you find index.html or the new types?, the only thing under page layouts is add new page layout (same under files)
refreshed page and they all appeared:)
Sorry if I am being think but where exactly should I paste in the CSS? Do I need to over write anything currently there?
Thanks!!
CSS goes in your style sheet, which is main-style.css that you will find through Design -> Edit HTML/CSS
Thank you Raju Nunna, your tutorials is very useful and makes our weebly sites more attractive to our visitors.
Raju Nunna your are great developer no doubt.
Can you help me update 2 flexi footer in 1 page.
is it possible.
I need one how is it my current website http://www.decolligence.com
and second footer i just need above it to place ads can u please examine my website and suggest me what to do.
http://www.decolligence.com
You can add as many footers as you want. For that matter you can add any number of flexible areas in header, sidebar etc, which are well suited for placing ads. Check the article about adding a top bar. This should tell you how you can add multiple flexible areas to a page.
http://weeblyforums.com/2012/04/weebly-top-bar-the-hidden-potential/
You can add flexible areas above the header region as well.
Hi,
How do I do the same thing for the sidebar? Is it possible? Which code should I add?
Thanks in advance
You can do a similar thing for sidebar too. But it is not the same code. You will have to define the sidebar width, the content width and float them appropriately. It differs from theme to theme.
How do I add a gray background to “highlight” my footer? A large rectangular text box in the back if you know what I mean? I tried changing the background color of the footer and it didn’t do anything. When I first applied the code, it worked and was gray. I loved it that way. I tried to do something else and now it’s just white and won’t go back to gray even when re-coding it and saving. Please help!
If you have a footer background this code works for me:
flexifooter{
width: 960px;
color: #888800;
font-size: 15px;
background: transparent url(footer.png) repeat;
text-align: center;
padding: 28px 0px 20px 0px;
}
The code mentioned in Step 1….where exactly do I add it in the CSS Stylesheet?
Hi,
Wondering how you can create rounded corners to the footer box? I found a site with code for it and I downloaded (then uploaded) the 4 images of the rounded corners, but I must not have combined the flexifooter code here with the rounded corner code from the other site properly.
My second question (apologies if it’s obvious): if I want to customize the footer so that different links appear in different sections of my site, would it be wisest to use the same page layout style with the same footer links? In other words, can I set up my site so that the footer is universal for one type of page, and a different version of the footer is universal for a different page layout?
I read that I can edit the code to read global: false, but I’d like to keep the benefits of simply editing one footer and having the changes applied to multiple pages.
Thanks!
For rounded corners, check the border-radius parameter. You can find the details at http://answers.oreilly.com/topic/1002-how-to-set-a-rounded-border-around-an-image-using-css/
For different footers on different pages, you can certainly do so. If you create different page layouts, you will be able to select one footer to one set of pages and a different footer to a different set of pages. You need to do it right. If you have experience with creating page layouts and setting setting flexible content areas to global or local, you will be able to do it. Otherwise, just use the Services section to hire a Weebly professional.
Got the footer to work…great step by step vid on YouTube. My question is…where (and how) do I extend the footer so that it bleeds off of the web page…from left to right? In one solid color without the white space around it? Thanks weebly users!!
Please post it in forums along with your website address. Each theme is different. Solution will be specific to the theme you are using.
I posted a comment here asking in it about this !! ?
I was waiting for the answer And when i checked back again i found you deleted my comment ? why ? RAJU ? Isn’t You Who says You answer all Questions ??
What was the comment about, Jack ? I do not see it. Checked the spam folder too. btw, where did you find that I answer all questions ? Because that certainly is not the case.
thank’s Bro Lol I think You answer All Questions
Anyway the Problem Is that I did all the Steps For Add A Flexible Footer .. When I save The Changes Which i did And the codes Which I raised Nothing Appears I mean i get No Flexible Footers Btw I don’t have Index.html But i have the others Themes Which contain tall header.html Short … no header .. and landing … I tried to past the second Code on the Landing.html Is this Right And thank’s For the Answer Brother
So, you have applied flexible footer the landing.html page layout.
Now, when you add a page, you will see the flexible footer only if you select the “Landing” page layout for the page.
If you add a page and select “No-Header” page layout, you will not see the flexible footer because your flexible footer is applied to landing page layout only.
If you like to add flexible footer to all pages, then you will either need to apply the flexible footer to all four page layouts or use only the page layout that you applied the flexible footer.
There are two aspects here: 1) Page layouts and 2) Pages.
You add pages and select page layout for the page. The page gets the properties of page layout. So, if the page layout has the flexi footer, all pages using this layout will get the flexi footer.
Hope that answers your question. It used to be very straight forward up until Weebly introduced multiple page layouts.
still didn’t get it i did all this and still nothin anyway sorry to bother you Have a nice day
If you need help with setting it up, submit a request at http://weeblydesigners.com/request-service/ and one of the designers can set it up for you.
Hi Raju
Great tips – but I couldn’t get it to work first up on one of the popular (older) templates which is the basis for my site. The footer actually popped up at the top of the page, not at the bottom. Nor could I make it ‘dynamic’ (in other words, it was also ‘stuck’ and would not re-size as I re-sized the page). I looked at your posts here and took a tip from your February 16 tip re ‘clear:both’ – I got closer, and took some pointers from the standard footer code in my CSS. After a couple of hours trial and error, I got it to work!! This was good as my site has 50+ pages and prior to this I was adding a site map manually – which was a pain when I changed or added to my nav and drop-downs, so I persevered. So here is the code I ended up with for placing within the CSS – and it works (for me at least)!
flexifooter {
clear:both;
position:relative;
margin:0pt auto;
float: center;
width: 960px;
color: #000000;
font-size: 15px;
background: #ffffff;
text-align: center;
padding: 0px 0px 0px 0px;
Width, color, font size, background parameters can be messed with to get a preferred look. I have opted for a very simple footer but I can place pics and so on in my footer if I choose to.
I hope this helps!
Hi Russ,
Thanks for posting. FlexiFooter usually fits just as is. Does not depend much on the Theme unless the theme is modified in some way that interferes with it. But the specific theme you are using could be different.
[P.S: Sidebars vary quite a bit depending on the theme.]
Hello, I have successfully developped a Flexifooter following the insructions above (thanks a lot for it). However, it suddenly stopped working on my “home” page. It is still visible on all my other pages except the “home” page (which is a blog). It did show before there too, but now it is no longer visible. Please help.
Hello Everyone!
I love using flexifooter so first let me thank you guys for sharing the tips and hints and all this material.
But…
I almost every time have to face difficulties when I want to use them
with the newest themes. It just simply doesn’t work….
The flexifooter appears on the left every time… and I cannot fix. I can’t place it in the middle of the page.
Pls. guys, if you have time for this, try to help us out… I really want to use felxifooter. But if it is not in the middle it’s useless.
Thanks in advance and Best Regards from Hungary.
Would appreciate if you can post it in the forums with details of the specific theme you are using and your website address.
you may drag the multi column element to the footer area
then make it a three column table and use the middle column for your footer
sir
thanks a lot
i could add my own footer in my website
hats off to you all there
gopakumar p
I would love to understand exactly how and where to place the code when using the AGENCY 1 Theme with a Tall Header…I’ve tried and tried and it’s making me crazy. I am totally missing something here. For example, I don’t even show an index.html to be found on the left of the css editing page??? Is there anywhere I can go for more help as it pertains to my current theme?
Hi
Thanks for the post on this. It was really great to have such a flexi content area.
But there is one small portion that i can’t figure. There is this code: #flexifooter{ width: 960px; color: #000000; font-size: 15px; background: #000000; text-align: center; padding: 0px 0px 0px 0px; border-bottom: #000000; } that appears at the bottom of my homepage. and it only appears on my homepage and not the rest.
Are you able to figure what’s wrong?
Here is the website: http://okrescue.weebly.com/
Thanks again!
Am a pro customer and have noticed a custom footer on my site. Now how do you change the background color of this footer? I can not find it in the CSS…?
Okay, so I have WeeblyPro, and I’d like to be able to put some of the “Blog Sidebar” widgets, such as the “Archive” and so forth, into my footer. But I can’t figure it out or find out how anywhere online. D: So um, yeah if anyone has ideas, I’d be super grateful.
It may not be possible, though, I don’t know. XD
Hi Kait,
I’m not sure about this but please give me a credit. If you have a blog page, just simply drag the element into your footer.
Hope this helps!
John Raw
Hi,
on my theme, where do I paist part 1 in the CSS coding please? And will I be able to follow the rest of your listed instructions for this flexifooter without any amendments?
Will the footer help my SEO page ranking?
Free user currently.
See this one in your stylesheet?
/* Footer
——————————————————————————–*/
Do you see the #footer below that??
Then have to enters (pressing the enter key) on the #footer and paste the CSS code….
Hope this helps!
Hi.
When I try and left align my footers text is snaps to the right when I move to another area or save the footer.
It happens the minute I press the text area. Snaps to the fra right and will not come back.
What to do about his?
Hello, Thank you for this valuable information. My footer was all the way to the left and I simply put in a margin-left of 291px and it is now in the middle. I do have a question though…I put my logo in through the drag and drop picture element and it seems the footer area is not supporting transparency. Any thoughts or fixes for this. Thank you for your time:)
Thought I was all straight, then noticed the editable areas are still not centered on different size monitors. By the way…the logo is showing as transparent, however when I crop it, it is no longer transparent. I know I can’t crop it before bringing it in, as it does the same thing. I have no problem with the top logo area and cropping it there. It keeps it’s transparency. Any help with these 2 problems is greatly appreciated.
All, This tutorial works perfectly for the old themes (first themes) in Weebly. But for new themes (or elegant by the way), we have problems. Sometimes the content is in the left of the footer, or not showing up. In my opinion, it is because of the type of the language (or version of it). Because maybe Weebly used a different version of CSS or its structure. If you are having problems with the footer, it is not because that it is Raju’s fault, it is the problem of the theme. So I recommend you to edit its CSS even the HTML files.
It should work for all themes (old and new). Like you say, style itself is controlled by the theme. So, if the footer alignment is in question, the corresponding styles need to be modified.