[SOLVED] Image background 1.6

[OCP]

Hi,

 

I am trying to upload a background image to my front office, but I cant get it to work.

 

All I can see is my image 3 CM in the bottom.

 

I inserted this code in Global.css;

 

body {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 13px;

  line-height: 1.42857;

  color: #777777;

  background: #FFF url('../img/bakgrunn.jpg')!important;

}

 

Please help me someone, www.northshop.no

[vekia]

i described whole process here:

background in prestashop 1.6

[Yzzy]

i described whole process here:

background in prestashop 1.6

 

Thats awesome thank you BUT... with mine I get a few inch section of the header showing the background image and then it repeats under...

[OCP]

i described whole process here:

background in prestashop 1.6

Thanks, thats one step in the right way!

 

But, my image is messed up since its made with white marks in PS 1.5, what resolutions is it in PS 1.6? 

 

Thanks.

[vekia]

resolution depends on device that you use, not prestashop

[OCP]

Okay, I understand. I will make a new background to this upgrade, no problem.

 

But from "shoppingcart" and up, it was white. 

My background didn't cover the whole site.

 

I hope it can be resolved.

 

Thanks Vekia!

[vekia]

it can, but it will be much easier if i will get a possibiltiy to see it

so my question is simple: can you share url to your shop, please?

[OCP]

You can see my shop at www.northshop.no .

The background and the header? is a mess.

 

thanks. 

[vekia]

your header is misaligned due to the contact-us link that you use there.

 

your image is: http://northshop.no/themes/default-bootstrap/img/bakgrunn.jpg

and it will not work due to the responsiveness and various devices resolution

 

 

take a look how it looks like on my device:

 

this image is just so big...

[OCP]

Oh wow, that image is too big.

I used the same image in PS 1.5, but now it is too big.

 

For the perfect fit for 1.6, how big can my background image be, to be absolutely perfect?

 

And about this header, please give me information in how I remove header and footer.

 

Thanks!

[vekia]

background like you trying to use will not work in your store because it is with responsive design.

find some other background which contains only wood (without white colors) something like:

http://psdvibe.com/wp-content/uploads/2009/06/wood3.jpg

 

 

then for page container we will add white background color

 

 

then it will work also on other devices

[OCP]

Okay, then I will add full background without customization, and let you add the white areas.

 

But one thing, how can I remove the header (the white that goes on the side) I just want it to be white in the middle, from top to bottom, and remove footer and header.

[vekia]

add backgrund to #header too, or remove from #header background:white;

[OCP]

Okay, so now I am a step closer thanks to Vekia! 

 

My whole shop is too optimized, so I had to zoom out 50% with my Google Chrome to see better.

 

As you can see, the footer is gone, wich is great!

 

Look at the attachment.

 

 

1) I need the white spot, and the black header to dissapear.

 

2) I need to fill inside of the marker with white color.

 

Thanks.

[vekia]

use this code somewhere in you stylesheet file

.header-container, header, .columns-container {background:none!important;}
body {background: #FFF url('http://northshop.no/themes/default-bootstrap/img/bakgrunn.jpg')!important;}
#columns {background:white;}

[OCP]

Oh, I forgot to mention that I want everything in the middle coloured white.

 

See attachment

 

 

1) The white marks on each side deleted.

 

2) The Black header deleted, but where does account login end up?

 

3) Fill the inside of the blue mark, with white color.

 

I really hope this can be done, because I had it in 1.5

 

Thanks Vekia!

[vekia]

3,2,1)

 

use this code:

.header-container, header, .columns-container {background:none!important;}
body {background: #FFF url('http://northshop.no/themes/default-bootstrap/img/bakgrunn.jpg')!important;}
.container, #columns {background:white;}
.container {margin-bottom:-15px!important; padding-top:15px;}
.nav {display:none;}

[OCP]

Very nice Vekia, Thank you! 

 

But now the 'Login' sign is gone.

 

Vekia, you are PrestaGod!

[vekia]

Very nice Vekia, Thank you! 

 

But now the 'Login' sign is gone.

 

Vekia, you are PrestaGod!

yes login sign disappeared because we removed top navbar

where you want to display login ? 

[OCP]

yes login sign disappeared because we removed top navbar

where you want to display login ? 

 

Okay, I understand.

 

You can see attachment of where I want it, if possible.

 

 

As you can see, I have a lot to do with Left/Right columns, bit U may believe I can handle it on my own.

 

Thanks Vekia!

[vekia]

go to modules > postiions

click on green translant button and try to transplant module: blockuserinfo to dispalyTop hook

[OCP]

go to modules > postiions

click on green translant button and try to transplant module: blockuserinfo to dispalyTop hook

 

If I am doing it right, I get this error:

 

"This module has already been transplanted to this hook."

 

[vekia]

brukerinfo ? it's a blockuserinfo module?

[OCP]

Brukerinfo is Userinfo in Norwegian.

[vekia]

thank you for clarification

 

open this file:

 

themes/default-bootstrap/modules/blockuserinfo/blockuserinfo.tpl 

 

and paste there this code:
 

<!-- Block user information module NAV  -->
{if $is_logged}
	<div class="header_user_info">
		<a href="{$link->getPageLink('my-account', true)|escape:'html':'UTF-8'}" title="{l s='View my customer account' mod='blockuserinfo'}" class="account" rel="nofollow"><span>{$cookie->customer_firstname} {$cookie->customer_lastname}</span></a>
	</div>
{/if}
<div class="header_user_info">
	{if $is_logged}
		<a class="logout" href="{$link->getPageLink('index', true, NULL, "mylogout")|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Log me out' mod='blockuserinfo'}">
			{l s='Sign out' mod='blockuserinfo'}
		</a>
	{else}
		<a class="login" href="{$link->getPageLink('my-account', true)|escape:'html':'UTF-8'}" rel="nofollow" title="{l s='Login to your customer account' mod='blockuserinfo'}">
			{l s='Sign in' mod='blockuserinfo'}
		</a>
	{/if}
</div>
<!-- /Block usmodule NAV -->

[OCP]

Perfect, a 'Login' button! 

 

Look at the attachment, as you can see the button is completely white and hard to locate.

 

On the other hand, is it possible to move the Login button few inches to left, so it's not outside the white line?

 

[vekia]

jut use somewhere in global.css code:

.header_user_info .login {
  background:black; margin-right:15px;
}

[OCP]

 

jut use somewhere in global.css code:

.header_user_info .login {
  background:black; margin-right:15px;
}

I pasted it here;

 

.header-container, header, .columns-container {background:none!important;}

body {background: #FFF url('http://northshop.no/themes/default-bootstrap/img/bakgrunn.jpg')!important;}

.container, #columns {background:white;}

.container {margin-bottom:-15px!important; padding-top:15px;}

.nav {display:none;}

.header_user_info .login {

  background:black; margin-right:15px;

}

 

But still no results. 

[vekia]

refresh your website with: ctrl+f5

i see changes

 

[OCP]

refresh your website with: ctrl+f5

i see changes

 

 

 

The 'Sign in' button is now active, I can see and press it.

 

But once a login happens, 'Sign out' and accountname is invisible.

 

[vekia]

can i create there test account?

[OCP]

Yes, please.

[vekia]

use this code:

.header_user_info a {
  background:black; margin-right:15px;
}

will be enough

 

effect:

[OCP]

Thank you very much, Vekia!! 

 

You have made my shop looking better, thanks!

 

We can now mark this as solved, finally! 

[vekia]

you're welcome :-)

 

i marked topic title as solved

with regards,

Milos