[SOLVED] How To Change Margin or Padding of Homepage Logo?

[Mehdi72]

I am using the prestastore_alt theme and there is nothing in the header.tpl file relating to the logo and I can't figure out which part of the global.css file sets the margin or padding. I want to align my logo with the homepage icon. Any ideas?

 

This is the store :

 

http://indiansuitsdirect.co.uk/store/

[tdr170]

This will be in global.css look for IMG.logo and add this line margin-right: 12.5em;

its not to far down from the top.

 

should look like this when done.

 

img.logo {

float: left;

font-size: 2em:

font-weight: bold:

margin-right: 12.5em

}

 

If you do this right your page will look like this.

 

[CraigMeade]

I did this my modifying the logo itself. Creating the right amount of padding in the image. But the code solution looks good too.

[Mehdi72]

This will be in global.css look for IMG.logo and add this line margin-right: 12.5em;

its not to far down from the top.

 

should look like this when done.

 

img.logo {

float: left;

font-size: 2em:

font-weight: bold:

margin-right: 12.5em

}

 

If you do this right your page will look like this.

 

 

 

Thanks. That didn't work but I uploaded the logo under Homepage logo then it aligned correctly. I couldn't remove the Homepage ad logo so replaced it with a dummy image (1 px x 1 px). Is there a way to remove the logo in css without using a dummy image? The other things I want to customise is the colour of the search button and checkout buttons. I want to use an orange gradient but can't figure out which part of the global.css to edit. It looks like the buttons use the button-medium_exclusive.gif but I replaced that and it didn't change the colour.

 

Why is it the simplest things are the most difficult to change!?!?!?

[tdr170]

That absolutly should have worked you probably did not re-compile your page after making the change to your global.css. (force compile under preferences/ performance)

The pic is your site with the margin line added using my developer tool, but glad you got it to work anyway.

 

When you make a change you must force compile what you are seeing is the cached version of your page.

[Mehdi72]

Thanks. I've figured out how to change the size of the search bar (center column) but how do I change the size of the navigation bar? I want it in line with the sign-in and search button. At the moment it overhangs.

[tdr170]

I took a look and the Nav bar does not overhang that is the actual size of your page the other items Sign in and Search bar are not correctly padded or margined to line up to the right side of your page.

You will have to play with the associated CSS files ( global.css at .v2 signin and blocksearch.css) and maybe a couple of others.

I am not sure what the homepage add logo is since I can not see it I can't tell you the correct way to remove it.

I am also not 100% sure of exactly what your talking about (add logo).

If you want to temporarily replace so I can see it I may be able to tell you where to properly remove it.

[Mehdi72]

I took a look and the Nav bar does not overhang that is the actual size of your page the other items Sign in and Search bar are not correctly padded or margined to line up to the right side of your page.

You will have to play with the associated CSS files ( global.css at .v2 signin and blocksearch.css) and maybe a couple of others.

I am not sure what the homepage add logo is since I can not see it I can't tell you the correct way to remove it.

I am also not 100% sure of exactly what your talking about (add logo).

If you want to temporarily replace so I can see it I may be able to tell you where to properly remove it.

 

See the attached screenshots re overhang and homepage ad (from modules > Front Office features > Header logos). The sign in and search align correctly for me. I have tested on 2 browsers and also dropped the resolution to 1024 x 768. I adjusted some figures in blocksearch.css but they didn't resolve the overhang problem.

 

 

[tdr170]

The blue navigation bar is correct the sign in and search bar are not aligned to the right side of your page.

I confirmed this with my developer tool, the Nav bar is 980px wide, that is the default page size for Prestashop.

Locate .v2 signin in your global.css and you will see that the Sign In button has a 75px right margin I changed to 0px and here is what the page looks like.

 

 

 

I am sure it is the other elements that are not correct not the Nav bar.

[Mehdi72]

I added the right padding myself in order to align the sign in button with the search button. I wanted the nav bar to align with the sign-in and search buttons not the other way round. Oh well.

[tdr170]

I would move the search button to the right and then remove the padding from the sign in button otherwise you will have other problems in the future.

Sorry but you are thinking in reverse.

[Mehdi72]

I would move the search button to the right and then remove the padding from the sign in button otherwise you will have other problems in the future.

Sorry but you are thinking in reverse.

 

Will do. Thanks.

[Mehdi72]

Not sure if you can help. I'm having problems with the contact form.

 

http://www.prestashop.com/forums/topic/154587-cannot-receive-messages-sent-through-contact-form/

[Mehdi72]

I would move the search button to the right and then remove the padding from the sign in button otherwise you will have other problems in the future.

Sorry but you are thinking in reverse.

 

I edited blocksearch.css in the blocksearchcenter folder and changed :

 

#searchbox div {height:35px;width:610px;background: url('../../../img/v2-searchbar.png') no-repeat;color:#FEFFFF}

#search_query_top {background:transparent;/*border:1px solid red;*/border:none;outline:0;width:448px;height:24px;line-height:20px;vertical-align:middle;margin:5px 0 0 34px;float:left}

#searchbox .button{ background-image: url('../../../img/button-medium_exclusive.png'); color: #FEFFFF !important;margin: 8px 0 0 3px;display:block;float:left}

 

to this :

 

#searchbox div {height:35px;width:710px;background: url('../../../img/v2-searchbar.png') no-repeat;color:#FEFFFF}

#search_query_top {background:transparent;/*border:1px solid red;*/border:none;outline:0;width:520px;height:24px;line-height:20px;vertical-align:middle;margin:5px 0 0 34px;float:left}

#searchbox .button{ background-image: url('../../../img/button-medium_exclusive.png'); color: #FEFFFF !important;margin: 8px 0 0 3px;display:block;float:left}

 

This moves the search button in line with the sign-in button but the search bar isn't wide enough so I created a new search bar using v2searchbar.png from the images folder as a template and increased the width to 710px.

 

The issue now is the search button is too close to the search bar but if I make the bar smaller the text overruns - hold a key down in the search bar to see what I mean. What I need to figure out is how to move the starting position of the cursor back a few pixels. Then I could remove the magnifying glass icon and make the search bar smaller.

 

http://indiansuitsdirect.co.uk/store/

[tdr170]

What I would do is make the search button the same height as the search bar, then change the width so it could have a centered look to the right of the search bar.

This would allow larger font size to match the font in the sign in button.

 

You could remove the icon of the magnify. glass look in blocksearch.css (themes/prestashop/css/modules/blocksearch)

 

Also you can make your entire seach bar to 680 it is overhanging to the right probably cut off, it will not effect what you see, try it.

when I click on it with my tool there is a box that highlights what I am viewing that box over hangs to the right.

 

Overall the sight is looking good, glad to see you moved things right, I looked at some products and noticed had you moved the nav bar to the left then your products would be overhanging to the right.

[Mehdi72]

This adjusts cursor position in search bar :

 

#search_query_top {background:transparent;/*border:1px solid red;*/border:none;outline:0;width:520px;height:24px;line-height:20px;vertical-align:middle;margin:5px 0 0 90px;float:left}

 

I have designed a new search bar. I want to use an arrow instead of the search button but the text link (for search.php) and mouse over are still active so it doesn't display correctly and I can't move it back on the same line as the search bar. How do I hide the text link behind the button? I have attached the arrow so you can see what it's supposed to look like.

 

http://indiansuitsdirect.co.uk/store/

[tdr170]

Well I was able to get it in the position you want but I could not move the actual search bar to the right.

Maybe you can look at the pics and get an idea how to do it.

I am someone limited by not being able to edit the actual files.

But I did notice that in your global.css the button height is only 18 needs to be 35 (first pic).

 

Hope this helps.

 

 

 

[Mehdi72]

I want the arrow positioned to the right of the search bar. If I adjust the margin over 130px the arrow drops to the next line. Also you'll notice increasing the height to 35px :

 

span.exclusive_mini, span.exclusive_small, span.exclusive, span.exclusive_large, span.exclusive_large_disabled {

background-repeat: no-repeat;

background-position: top left;

border: none;

color: black!important;

font-weight: bold;

font-size: 10px!important;

text-align: center;

text-decoration: none!important;

cursor: pointer;

display: block;

line-height: 18px;

height: 35px

 

Also increases the height of the cart and checkout buttons. Any idea how to hide the text link for search?

[tdr170]

If yo are talking about the white letters SEARCH on the right, that is actually part of the v2-searchbar3.png file.

Find that image in your image folder and download to your computer, use a paintshop program to color over it.

OH what the hell here it is.

Just upload this where ever the original is located overwriting it and search will be gone.

 

 

This one I moved the search area left and corrected size to 680.

You will have to move your actual search area left to line up.

 

 

 

Things I noticed your actual search area does not line up top to bottom with the white area

change this :

#search_query_top margin 5px 0 0 108px (this also moves the search button left so it is not cut off)

 

Also change:

#searchbox_button margin 0 0 0

[Mehdi72]

If yo are talking about the white letters SEARCH on the right, that is actually part of the v2-searchbar3.png file.

 

Find that image in your image folder and download to your computer, use a paintshop program to color over it.

 

OH what the hell here it is.

 

Just upload this where ever the original is located overwriting it and search will be gone.

 

 

The text is not part of the png. I have attached my png.

 

This one I moved the search area left and corrected size to 680.

 

You will have to move your actual search area left to line up.

 

Things I noticed your actual search area does not line up top to bottom with the white area

 

change this :

 

#search_query_top margin 5px 0 0 108px (this also moves the search button left so it is not cut off)

 

Also change:

 

#searchbox_button margin 0 0 0

 

 

That didn't really work. I've removed several lines of code. What you will see now is the right arrow with the word search bleeding into it. Although the hover is gone I still can't get rid of the text.

 

I think I need to change the value here :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>

<body id="index">

<div id="page">

<div id="header">

<div id="columns">

<div id="left_column" class="column">

<div id="center_column">

<form id="searchbox" action="http://indiansuitsdirect.co.uk/store/search.php" method="get">

<div>

<input type="hidden" value="position" name="orderby">

<input type="hidden" value="desc" name="orderway">

<input id="search_query_top" class="search_query ac_input" type="text" value="" name="search_query" autocomplete="off">

[i]<input class="button" type="submit" value="Search" name="submit_search">[/i]

</div>

</form>

<div class="clear"> </div>

<script type="text/javascript">

<img width="408" height="300" alt="" src="/store/modules/blockadhome/Splash3.jpg">

<div class="clear"> </div>

</div>

<div id="right_column" class="column"> </div>

</div>

<div class="flatclear"> </div>

</div>

<div id="v2-footer">

<div class="ac_results" style="display: none; position: absolute; width: 500px; top: 169px; left: 453.4px;">

</body>

</html>

 

To :

 

<input class="button" type="submit" value="" name="submit_search">

 

I think this is where the text that is bleeding over the image comes from but I don't know which page I need to edit. I've looked in index.php and header.tpl.

[tdr170]

ooops im sorry I meant to say left. (white search)

Not sure what you did but now I cant access certain files and elements are missing from blocksearch .css.

#search_query_top margin 5px 0 0 108px is completely gone???

[Mehdi72]

I deleted a bunch of code to try and figure out how to remove the search text. I backed up the css so there's no issue. Any idea where I can find this code? :

 

<input class="button" type="submit" value="" name="submit_search">

[tdr170]

Look in blocksearch.tpl, modules/blocksearch.

Replace the css file and start again that did not work.

[Mehdi72]

Look in blocksearch.tpl, modules/blocksearch.

Replace the css file and start again that did not work.

 

There's no blocksearch.tpl. I have restored the css.

 

This is what is should look like :

 

[tdr170]

I saw the other post about the search button and it is not visible in my browser I think you may be seeing some cashed images. (clear all caches Browser and Prestashop)

 

First you need to change the height of the button back to 35 in global.css (i thought you did)

 

 

then make these two changes in blocksearch.css and change these 2 items.

Notice the two lines in the white search area that will be the text area, this way the text will end just short of the search button.

 

[Mehdi72]

I saw the other post about the search button and it is not visible in my browser I think you may be seeing some cashed images. (clear all caches Browser and Prestashop)

 

First you need to change the height of the button back to 35 in global.css (i thought you did)

 

 

Changing the height to 35 also changes the height of the cart and checkout buttons so they're double the height and overlap.

 

then make these two changes in blocksearch.css and change these 2 items.

Notice the two lines in the white search area that will be the text area, this way the text will end just short of the search button.

 

 

I've made the changes and cleared cache. Hasn't resolved the issues.

[tdr170]

The button is still only 18px high you must not be changing the right one or in the right place.

If I change to 35 it looks good with the exeption of the white bar running into it.

Notice this change did not effect the cart button.

 

 

 

 

When this is fixed if you relpace the background image with the one below and you will have a margined search button.

 

 

Should look like this when done.

 

[Mehdi72]

The button is still only 18px high you must not be changing the right one or in the right place.

If I change to 35 it looks good with the exeption of the white bar running into it.

Notice this change did not effect the cart button.

 

 

 

I'll take another look.

 

When this is fixed if you relpace the background image with the one below and you will have a margined search button.

 

 

Should look like this when done.

 

 

 

I don't want the search text! I just want the arrow. There has to be a way to get rid of that text. This is what the search bar should look like.

It's important I learn how to do this because I want to replace the cart and check out buttons and I will have the same problems, as I had with the sign in button which isn't a button but in fact a coloured gradient button with the sign in link text aligned over it. I couldn't find a way to remove the text link. Same issue with the arrow, even though I have replaced the default image the damn text link is still there and I can't figure out how to get rid of it. I want the images to link to the url or relevant php file, I don't want to position a text link near or over an image.

[tdr170]

OHHHHH oh find search.php and change this:

 

<input name="submit_search" class="button" type="submit" value="Search"/>

 

to this:

 

<input name="submit_search" class="button" type="submit" value=""/>

 

 

 

 

[Mehdi72]

Neither search.php or search.tpl have those entries. Same goes for those files in the deault theme. This is what I asked in post #20 of this thread, I don't know which file has those entries.

[tdr170]

There is a search.php I found it, it is in the root folder not in the modules/blocksearch folder. However after looking at mine that s not the place the Search text is, I am looking into that.

 

 

I also thought about what you wanted as far as the search button in global.css there are 2 things you need to change.

 

1) the height to 35

2) I found that near the bottom are references to the images change the one in the pic th 35 and you should have it.

 

 

then change these again

 

 

Follow my directions and this is what you will get I could not make these changes if you did not have the files.

 

[tdr170]

OK found it in mine I can change the search to find or I can remove it, mine was in

../modules/blocksearch/blocksearch-top.tpl

 

I changed this

<input type="submit" name="submit_search" value="{l s='Search' mod='blocksearch'}" class="button" />

 

to this

<input type="submit" name="submit_search" value="{l s='Find' mod='blocksearch'}" class="button" />

 

and my search button then said Find.

[Mehdi72]

I think you meant height not width :

 

 

background-image: url('../img/button-medium.png');height:35px

 

I have made the changes, the search text and the on hover are still there.

 

My blocksearch-top.tpl (/store/modules/blocksearch) reads :

 

<form method="get" action="{$link->getPageLink('search.php')}" id="searchbox">
<p>
<label for="search_query_top"><!-- image on background --></label>
<input type="hidden" name="orderby" value="position" />
<input type="hidden" name="orderway" value="desc" />
<input class="search_query" type="text" id="search_query_top" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{/if}" />
<input type="submit" name="submit_search" value="{l s='' mod='blocksearch'}" class="button" />
<!--<input type="submit" name="submit_search" value="{l s='Search' mod='blocksearch'}" class="button" /> -->
</p>
</form>

 

The changes I make here aren't showing up :

 

<input type="submit" name="submit_search" value="{l s='' mod='blocksearch'}" class="button" />

[tdr170]

No look at the pic again it is width that takes the part with search and shrinks it to the same size as the arrow.

I will look to see if you have removed the right Search as that worked for me.

 

After making that change to the tpl file did you go to back office and turn on force complile and turn cache to off.

[tdr170]

This is what worked for me in order to see the changes I had to turn thr force compile to ON and click the link to the shop on top left of BO.

 

<form method="get" action="{$link->getPageLink('search.php')}" id="searchbox">

<p>

<label for="search_query_top"><!-- image on background --></label>

<input type="hidden" name="orderby" value="position" />

<input type="hidden" name="orderway" value="desc" />

<input class="search_query" type="text" id="search_query_top" name="search_query" value="{if isset($smarty.get.search_query)}{$smarty.get.search_query|htmlentities:$ENT_QUOTES:'utf-8'|stripslashes}{/if}" />

<input type="submit" name="submit_search" value="{l s='' mod='blocksearch'}" class="button" />

</p>

</form>

[tdr170]

Also note that when I look at your shop with my tool the Search is still showing up in that line????

[Mehdi72]

Force compile is on, cache is off.

 

I pasted your code in both the blocksearch-top.tpl and blocksearch.tpl. Still no joy. Chrome shows :

 

<input class="button" type="submit" value="Search" name="submit_search">

 

I edited the attribute in chrome and changed it to :

 

<input class="button" type="submit" value=" " name="submit_search">

 

The search text disappears. Problem is of course I don't know where the code is! In chrome you can switch elements on and off and also edit attributes. I could shrink the width to 1px and make the block disappear but it also changes the width of the check out button.

[tdr170]

That code it wrong for blocksearch.tpl.

I use IE and maybe thats an issue have you deleted all your cache files.

I will have another look Im a little stumped here.

[tdr170]

If you want give me log in details to your server files and I will have a look.

You will then need to change your password after I am done so as to block access.

If something happened in the future I would not want you to think it was me.

Send in PM.

[Mehdi72]

That code it wrong for blocksearch.tpl.

I use IE and maybe thats an issue have you deleted all your cache files.

I will have another look Im a little stumped here.

 

I've checked in :

 

IE 9

Opera

Firefox

Chrome

 

I check at least 2 different bowsers every time I make a change.

[Mehdi72]

If you want give me log in details to your server files and I will have a look.

You will then need to change your password after I am done so as to block access.

If something happened in the future I would not want you to think it was me.

Send in PM.

 

Done.

[tdr170]

Done, Fixed, Finished, Complete have a look.

added some code to blocksearch.css and found that you have blocksearchcenter that contained the tpl file with the search text in it.

 

modules/blocksearchcenter/blocksearchcenter.tpl

 

 

#searchbox .button{height:35px; width:35px; background-image: url('../../../img/right_arrow2.png'); margin: 0px 0px 0px 18px;display:block;float:left}

[Mehdi72]

Unbelievable two lines of code was causing all this. Thanks but hold you horses! Almost done. If you hover over the arrow it shrinks so there appears to be a on mouse over effect?

[tdr170]

Yes I saw that thought thats the way you had it.

Do you want that gone.

[Mehdi72]

Yes I saw that thought thats the way you had it.

Do you want that gone.

 

Yes!

[tdr170]

What do you want it to do have a look I took the mouse over effect off and changed the mouse over color of text.

OOOps I tought you wanted it gone I will wait to hear from you.

[Mehdi72]

I didn't want a mouse over effect. I don't think they're appropriate for icons. It's working fine. Thank you very much. Can you explain what changes you made to the code? I'm sure I will have similar problems if/when I replace the cart and check out buttons so want to avoid going through this headache again.

[tdr170]

Hey are you having issues with the forum I have lost my avatar pic, all my friends, visitors and everybodys pic is the default liitle guy.

This happened to me at about 6pm today, when I go in a forum everybodys pic says guest underneith and I can see anyone profile.

Its like I am a guest.

[tdr170]

I changed hover button and exclusive see below in global.css

 

/* hover button */

input.button_mini:hover, input.button_small:hover, input.button:hover, input.button_large:hover,

input.exclusive_mini:hover, input.exclusive_small:hover, input.exclusive:hover, input.exclusive_large:hover,

a.button_mini:hover, a.button_small:hover, a.button:hover, a.button_large:hover,

a.exclusive_mini:hover, a.exclusive_small:hover, a.exclusive:hover, a.exclusive_large:hover {

background-position: left 0px (was 18)

}

/* exclusive hover button */

input.exclusive_mini:hover, input.exclusive_small:hover, input.exclusive:hover, input.exclusive_large:hover, a.exclusive_mini:hover, a.exclusive_small:hover, a.exclusive:hover, a.exclusive_large:hover {

color: black !important (was white)

[Mehdi72]

Hey are you having issues with the forum I have lost my avatar pic, all my friends, visitors and everybodys pic is the default liitle guy.

This happened to me at about 6pm today, when I go in a forum everybodys pic says guest underneith and I can see anyone profile.

Its like I am a guest.

 

I never set an avatar pic or had added friends so haven't noticed anything apart from I didn't get an e-mail when you made post 47 but got one just now.