[solved] Can you help me with Footer

[ankur]

I have been trying to make my footer more clean and authentic, I have done some changes but I wanted to one change which I have found from other website footer, I have attached the file please see the highlighted part and let me know if this changes can be done in Prestashop

 

A big thanks in advance!!

[ankur]

My website link is http://www.rationwale.com/ please see if above mentioned changes can be done

[ankur]

Somehow I have managed to do alternate background change in footer but still don't know how to put a line at the top of footer

[vekia]

this is how your footer looks like:

 

 

so i think that you achieved what you expected Am i right?

[ankur]

Yeah but still havent figured out the line which i need at the top of footer, please see the pic i have attached and also is their any way to have same hieght of background which is highlighted..

[vekia]

sorry but i don't exactly know what you expect now

[ankur]

I am attaching the image and hope this will help you in understanding what i need !!

[ankur]

I have managed to do the same height of highlighted footer part but still got one thing left which is the Line between footer and above it.. which is separating the footer from above !!

[yaniv14]

Add to your global.css in #footer { ..... }

padding-top: 20px;

border-top: 1px solid;

[vekia]

okay, now everything is clear for me

First problem: Follow yaniv14 suggestion, in some cases you have to use !important modifier:

#footer { padding-top:20px!important; border-top:1px solid #000!important}

 

Second problem: it is okay now?

[lina007]

hello Vekia, pouvez vous me dire exactement où mettre mon Netlink dans le Footer ?

merci par avance

[vekia]

hello Vekia, pouvez vous me dire exactement où mettre mon Netlink dans le Footer ?

merci par avance

 

hello

please explain what you exactly expect... and i suggest to create new thread (in english language )

[lina007]

hello, I have already created a thread but nobody answer ! I know I have to go in the Footer to add my Netlink but where exactly ?

please be cool et answer

[vekia]

hello, I have already created a thread but nobody answer ! I know I have to go in the Footer to add my Netlink but where exactly ?

please be cool et answer

 

i checked your profile, no english thread about that... im convinced that if you create it in english you will get an answer. What is Netlink?

[ankur]

Thanks Yaniv and Vekia ,

 

You guys are awesome , my this problem is solved but i am working on footer part to make much better so i'll be doing R&D in other's website and will ask more questions..

 

Hope to seek more help in regards to footer... :)

[ankur]

Hey,

 

I have got one more problem for you, Please see the attached image in which you can see the Icon of facebook, twitter and RSS are not clear i mean if you can see properly their pixels is somewhat not in good shape... It should be proper rounded..

 

I am really sorry if I am keep bugging you with my query

[ankur]

No Update on this one ??

[vekia]

it's because those icons were created for the black background (as you probably know - by default, footer has got dark background)

what to do? You can change icons (just upload own icons to: modules/blocksocial/img/sprite_pict_social_block.png)

 

you can also use external social networks module, for exaple this: free social network links

[ankur]

Thanks, I just installed it but look at my website where they have been posted http://www.facebook.com/rationwale is their anyway I can replace them with current place where it should be because i really like the icon's with effects :)

[vekia]

it's easy to achieve. just move the module to the place, where you've got blocksocial module

 

i think that also little modifiicaiton of the css styles will be necessary (tpl also) but its really easy to achieve

[ankur]

Vekia,

 

I am not as good as you think I can do only tricks with CSS using help of Firebug so can you please be specific like where to add and what to add etc etc and trust me i will not ask anymore questions... This thread will be solved then..

[ankur]

Any help on this one ??

[vekia]

you moved module there? i mean in the modules > positions tab in your back office ?

[ankur]

I did moved the module from Back office but look it all messed up.. I have no idea what to do.. it looks like i have to undo everything because this thing getting ugly and beyond my control ..

[vekia]

No - you haven't got, believe me Now disable the block social module.

let me know if it will be ready - next step will be related to the social links module.

[ankur]

I did disabled the social module block..what's next step... we have to drag contact us to left and I need Same follow up block format like Follow up at top and then facebook Symbol of your's and then written facebook as it was earlier then twitter symbol then written twitter in vertical line as it was earlier thanks for your help..

[vekia]

now open the social links module .tpl (views/front/column.tpl) file and change the:

 

<ul id="social" class="isocial">

 

to:

 

<ul id="social_block" class="isocial">

 

 

 

next, open the css file:

socialnetworklinks/css/socialnetworklinks.css

 

change each #social to #social_block

 

 

and add clear:both; to the:

 

#social_block li

[ankur]

did the changes but how to add heading like follow us and also facebook in front of facebook symbol...

[vekia]

steo by step my friend I need to check each step

 

to the <ul></ul> in the social block add:

<h4>{l s='Follow us'}</h4>

[ankur]

Oppss sorry and just done that ... I think we are very close now

[vekia]

in module css file create style:

 

.simplelink {

background: none!important;

color: #000!important;

display: inline-block;

width: 100px!important;

font-size: 12px;

height: 24px!important;

text-indent: 1px!important;

margin-top: 5px;

}

 

in module tpl file use this:

{if $var->snl_facebook==1}<li><a href="{$var->snl_facebook_url}" class="facebook" target="blank"></a><a class="simplelink" href="http://www.facebook.com/rationwale">Facebook</a></li>{/if}

 

instead the simple:

{if $var->snl_facebook==1}<li><a href="{$var->snl_facebook_url}" class="facebook" target="blank"></a></li>{/if}

 

 

do the same for twitter (change url to your twitter)

[ankur]

I have made the changes as given by you but it looks like this method isn't gonna work .. see my link

[vekia]

you probably forgot about css styles

i don't see changes in the css file.

[vekia]

ok i see it, you forgot about dot before the .simplelink

 

now you've got there only simplelink:

 

[ankur]

the Dot is there in css file but i have put the dot in tpl file class .simplelink and got few changes but dot was there in css file at first place..

[vekia]

class=".simplelink"

wrong!

now i see the dot in css

remove it from class="" please

[ankur]

Removed the dot from class in tpl file..

[vekia]

i changed css code a bit, try with this:

 

.simplelink {
background: none!important;
color: #000!important;
display: inline-block;
width: 100px!important;
font-size: 12px;
height: 24px!important;
text-indent: 1px!important;
margin-top: 5px;
}

[ankur]

Vekia,

 

It did work but it isn't align like other footer columns are, i have attached the file for your review and thanks for help, you have been a great help ,it couldn't be possible if you weren't there at first place ...

[vekia]

ewerything depends on css styles, it isn't bug, just css!

[ankur]

Thankss.... I will do it the last part and then i'll let you know when it solved so that we close this topic

 

Thanks for everything

[vekia]

tip:

 

to the #social-block li { } add:

padding-left: 0px!important;

 

(of course in module css file)

[ankur]

Hey Vekia,

 

It's done I have removed this line from global.css " #social_block li {padding-left:22px !important;}" and it worked sorry I didn't see your comment.. Now I have done

[vekia]

you can also move the "Facebook" to the middle:

 

 

just to the href with facebook link add:

 

style="margiin-top:5px;";

 

 

what you think about additional animation (like you hover on icon) after hover on the "Facebook" ?

[ankur]

I didn't understand this "what you think about additional animation (like you hover on icon) after hover on the "Facebook"" and facebook in middle is a good tip..

[vekia]

when you move your mouse over the facebook icon - there is an animation effect,

what you think about the same animation when you move your mouse over the "Facebook" text?

[ankur]

to be honest that animation effect drag me to change everything ... I loved it at first sight that's why I was keen to make it happen ... But I am clueless like what type of animation can be made out of text"Facebook"... If you do have any solid animation idea then share it .. i will try ASAP.

[ankur]

Hey Vekia, Please make this thread solved for other's because my actual problem is solved for which i started this thread...

[vekia]

thanks for information, so I'm going to mark this thread as [solved]

 

regards