I can`t customize Botstrap theme

[Blanka]

Hi my friends!

 

A few times I asked for some help, and you were very kind to me and helped me resolve my problems.

 

Now I have a new theme, I am happy because it`s beautiful, but I have some problems.

 

I have to tell you that I readed several topics in this forum and internet articles, but solutions doesn`t work in my Botstrap

 

First;

I would like to set logo in the middle of the page, shooping cart in the right side, search bar in top navigation menu.

I tried manage the posisions, change css files...Nothing happens. 

 

Second:

I would like to change background colour in header container (languages, log in..) but I can`t. I manage colours in css and nothing happens.

 

Third:

Foooter! I don`t know what`s going wrong, because in other themes I didn`t had that problems, but I just can`t aploud a picture, neighter change the colour. I readed topics, went step to step, but nothing

 

I cleaned cache, but nothing.

 

Please, help me.

 

Thank youuu!

 

Blanka

Edited October 26, 2016 by Blanka (see edit history)

[rocky]

Can you provide a link to your website? I suggest playing with Firebug to change colours, then you can apply the same changes to the files.

[vcopleutre]

If you use bootstrap you can try to change the header.tpl file in your theme with code like this :

<div class="col-lg-3">
   {hook h='diplayTop' mod='nameofthemoduleyouwanthere'}
</div>
<div class="col-lg-6">
  <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
     <img class="img-responsive" src="{$img_ps_dir}logo.png?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
  </a>
</div>
<div class="col-lg-3">
   {hook h='displayTop' mod='blockcart'}
</div>

Note : the module you want to display should be hooked to displayTop.

Note 2 : try to change the tpl of the modules (themes/modules/nameofthemodule/) to be sure they fit with the space they are allowed to use (if it doesn't existe, create it by copying the tpl files in www/modules/nameofthemodule/ (if tpl are in folders, keep the folders)

Note 3 : add some col-xs-12 depending on what you want to show for mobile-users.

Note 4 : change css but have a look at scss

[Blanka]

 

Can you provide a link to your website? I suggest playing with Firebug to change colours, then you can apply the same changes to the files.

 

Hi! 

 

Thnk you for helping me.

 

Here is my website : 

http://lovelyshop.si/

 

I will install Firebug and we will see.

It`s a strange to me, because I have prestashop for about 6 years, in every theme I changed colours and everything in the past was working. But now, just nothing happens  

[rocky]

1. It's tricky. It will require changing the TPL and CSS files.

2. It's the header .nav section on line 5744 of themes/default-bootstrap/css/global.css that has the background colour. It's #333 by default.

3. Can you be more specific about what you're trying to change?

[Blanka]

I made some PRTSC, I sign with a pink-white circle: 

 

1.)

 

Here I would like to change top of the top black square where is LOg in and languages. And a colour of shooping cart. And I would like to put shooping cart in the right corner, and LOGO on the middle of the page. 

 

2.)

Here, I would ike to chaange colour of product price square, "V košarico" (add to shooping cart) colour and NEW label colour.

 

3.) 

Here, I wuld like to change colours of this dark grey square ( "obvestila" ) and I would like to add an image to all this white square in footer.

 

I done this things in past themes, but now doesn`t work anything :/ 

 

THANK YOU!!!! 

[vcopleutre]

Hi

 

First of all when you are done with the modifications of css files, check your website in private mode or do ctrl+f5, (chrome browser) it will wipe the cache and your browser will download the updated css files.

 

For the colour of shooping cart : line 30 of blockcart.css (default-bootstrap/modules/blockcart)

 

For the background bottom : theme8.css in modules/themeconfigurator/css/themes (line 189)

(For the image, you already have one but it's very little and on large screen it's not perfect)

 

For the logo, check tpl file

 

For the price, i let you search, this way you'll learn more

[Blanka]

Hi.

 

Ouuuu, I now see changes and footer photo in Firefox, but not in Chrome. It`s ok, changes happening. I will work with Firefox now   ))))) 

 

Ockej, so colours working! Thank you for this! )))

 

What about logo on the middle of the page and cart on the right side? How can I change posisitions ?

 

And the colour of top black square (log in...) ? This I can`t find  

Edited October 27, 2016 by Blanka (see edit history)

[vcopleutre]

Hi,

 

As i said, to get your logo on center of your page you have to modify a tpl file : yourtheme/header.tpl

You have then to wrap your logo and your blockcart in responsive parts of the bootstrap grid (col-xs- col-sm- etc...)

like the exemple below !

<div class="col-lg-3"><!--  Here is the left part of the grid (width : 3 on large screen, on a 12 width grid) -->
  
</div>
<div class="col-lg-6"> <!--  Here is the middle part of the grid containing the logo (width : 6 on large screen, on a 12 width grid) -->
  <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
     <img class="img-responsive" src="{$img_ps_dir}logo.png?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
  </a>
</div>
<div class="col-lg-3"> <!--  Here is the right part of the grid containing your cart (width : 3 on large screen, on a 12 width grid) -->
   {hook h='displayTop' mod='blockcart'}
</div>

It should work

 

for the last color... your website is in maintenance so I don't know !

 

cheers

[Blanka]

Thanks. I will try this now.

 

One more problem.

 

Whats wrong with this product box??

I have al pictures 720 x  960 px. Photos which were in shop before are ok, but when  I now add now product is like this-smaller

 

What can I do?

 

[vcopleutre]

Maybe you just uploaded a smaller picture ? Without access to code, I can't say  

 

Inspect the element and look at the href of the picture, is it the same type of the others pictures (calling the same "type" means : "tm_home_default" or similar)

[Vinum]

Hi,
if you want an easiest way to customize your theme, you can use that module:
http://addons.prestashop.com/en/22092-css-magician-le-configurateur-de-themes-theme-maker.html

Best regards,

[Blanka]

Maybe you just uploaded a smaller picture ? Without access to code, I can't say

 

Inspect the element and look at the href of the picture, is it the same type of the others pictures (calling the same "type" means : "tm_home_default" or similar)

 

Sorry because I disconected shop. Visitors watching this mess of store so I keep it disconected.

I opened it now.

 

Images are not to small I aploud images in the same size, they were before ( 720 px 960 px ) . Older images are ok, everythink looks fine, but yesterday I added a new product with the same first photo size, and looks smaller than others. 

I tryed to aploud bigger photo (1000px +), but its the same. Box is small.   

 

I have this settings in PS panel:

 

 

I changed in PS panel size of this

22

home_default

250 px 250 px

in 720 x 960 but nothing. 

Edited October 28, 2016 by Blanka (see edit history)

[vcopleutre]

check your pm