[SOLVED] centre the footer links

[jdmorrisn]

Hi, anyone know how to make it so that the footer links are in the centre rather than to the left? Also how can I add a link to the footer?

[rocky]

You can add a CMS page to the footer by going to Modules > Footer links block (in the Blocks section) > Configure, then tick which CMS pages you want. To add a non-CMS link, you'll need to edit modules/blockvariouslinks/blockvariouslinks.tpl and add a new <li>.

It is the following code in global.css that controls the appearance of the footer links:

/* Footer links */
ul.footer_links {
   list-style-type: none;
   clear: both;
   height: 2em;
   margin-top: 2em
}
ul.footer_links li {
   float: left;
   margin-right: 2em;
   height: 2em
}
ul.footer_links li a { text-decoration: none }
ul.footer_links li a:hover { color: black }
ul.footer_links li img.icon { vertical-align: -2px }

To centre the links, I think you'll need to change the above to:

/* Footer links */
ul.footer_links {
   list-style-type: none;
   clear: both;
   height: 2em;
   margin-top: 2em;
   text-align: center
}
ul.footer_links li {
   display: block;
   margin-right: 2em;
   height: 2em
}
ul.footer_links li a { text-decoration: none }
ul.footer_links li a:hover { color: black }
ul.footer_links li img.icon { vertical-align: -2px }

[jdmorrisn]

I think I must have actually tried this before, but I tried it again just in case. I have placed 'align-text: centre at every place where the footer is mentioned, again one at a time. Download, edit, upload and try again. I used firebug which I saw in one thread which is useful to tell you the code where to look and tried all these options including yours but it doesn't work, I think I tried evrything - the best I got was pretty much all the text on the page centering. It seems the footer text is linked to the body css which is aligned left, with no way to separate the two. Somehow I can't get past this one, so I guess I have to accept it. But it just looks odd.

[frizzle]

In globals.css
around line 811

/* Footer */
#footer {
   border-top: 1px solid #d0d3d8;
   padding: 0.5em 0;
   clear: both;
   text-align: center; <-- line to add
}

[dixie]

I centered my footer by doing the following:


Line 817 #footer .block_various_links

after this line: list-style: none;

add this line: text-align: center;

[jdmorrisn]

Super, thanks - I was beginning to give up hope!

Take a look at my other posts - see if you can work some magic there also