(Solved) Change footer links to horizontal

[Whispar1]

Hello,

 

I'm trying to figure out the best way to change the footer links in the default 1.6 theme from vertical to horizontal - here is a good example : http://addons.prestashop.com/demo/FO8173.html

 

Thanks for any input

Edited July 30, 2014 by Whispar1 (see edit history)

[dioniz]

You will need to open modules tpl files and change sections to be full width.

For example open blockcms.tpl and change

<section class="footer-block col-xs-12 col-sm-2" id="block_various_links_footer">

to

<section class="footer-block col-xs-12 col-sm-12" id="block_various_links_footer">

Then change in global.css

.footer-container #footer ul li {
    padding-bottom: 8px;
}

to

.footer-container #footer ul li {
    padding-bottom: 8px;
    display:inline
}

to get links displayed horizontal

[Whispar1]

Thanks dioniz - works perfectly!

How about now centering it and adding the divider pipes between each item (like in the photo)?

[dioniz]

For borders you need to do something like this:

.footer-container #footer ul li {
    padding-bottom: 8px;
    display:inline;
    border-left: 1px solid #000;
}

and

.footer-container #footer ul li.first_item{
    border:none
}

to remove first left border.

 

For centering i would need to see your site because it depend on your code.

[Whispar1]

It's still in development so go easy on it http://www.lux-puff.com

I applied the above and it works except for first <li> - I just need a little styling to make it look aesthetically pleasing

Edited July 30, 2014 by Whispar1 (see edit history)

[dioniz]

I don't see first_item code on that page.

For centering add:

 

text-align:center;

 

to .footer-container #footer .footer-block

[Whispar1]

Centering is good - thank you. I also changed the padding to look more even. For some reason the first_item is not taking. I added this code and can be found on line 6842

.footer-container #footer ul li.first_item{
    border:none } 

Edited July 30, 2014 by Whispar1 (see edit history)

[dioniz]

Sorry i gave you wrong info.

 

Do it like this:

.footer-container #footer ul li:first-child{
    border:none;
}

[Whispar1]

No worries - thank you for catching it.

Everything looks good now.

 

BTW, I have been working on the default header... Ideally I would like it laid out like this one:

http://addons.prestashop.com/demo/FO6606.html

 

I am partly there (the logo and top menu are aligned but it looks a little "too clean"  Any suggestions?

 

Edit: I have another thread on the header topic

http://www.prestashop.com/forums/topic/344912-adjusting-positions-of-logo-nav-and-menu-layers/?do=findComment&comment=1748582

 

Perhaps is best to mark this one as solved and move to the other for my question above since it does not pertain to the footer.

Edited July 30, 2014 by Whispar1 (see edit history)

[dioniz]

Yes you better mark this as solved and i will look into your other thread