[solved]PS1.6.0.9 how to modify theme configurator at homepage

[sbt]

Hi,

I want to increase the numbers the pics at homepage of theme configurator but I dont know how as I am not a coder. 

By default, there will be 3 pics per line and I would like there will be 4 or 5 pics per line.

In addition, when I change the pics, the pics are not aligned properly as shown in attachment. 

Anyone who can help with this?

Thanks

Kent

Edited August 7, 2014 by sbt (see edit history)

[NemoPS]

They all have to be the same height. Also, you need the width to fit the space of the page in order for 4 of them to fit in a row

[sbt]

Thank you for your clarification. Yet still no success for me. 

 

I made all my images at the size of 100*60 from the setting in the module, and still only 3 pics for the first line. I guess the change of code will be  needed for displaying more pics?

 

Please see the attached screenshot. 

Kent

 

They all have to be the same height. Also, you need the width to fit the space of the page in order for 4 of them to fit in a row

 

[dioniz]

Try to open yourdomain\modules\themeconfigurator\views\templates\hook\hook.tpl

 

Find this code:

<li class="htmlcontent-item-{$smarty.foreach.items.iteration|escape:'htmlall':'UTF-8'} col-xs-4">

Change col-xs-4 to col-xs-3

[sbt]

Try to open yourdomain\modules\themeconfigurator\views\templates\hook\hook.tpl

 

Find this code:

<li class="htmlcontent-item-{$smarty.foreach.items.iteration|escape:'htmlall':'UTF-8'} col-xs-4">

Change col-xs-4 to col-xs-3

Thank you, and I am almost there!

When I change col-xs-4 to col-xs-3, it shows 4 pics per line, but it does not spread to the full length of the page.

I also tried change to col-xs-2 or col-xs-1, it shows more pics per line, but only spread half of the page.

Would prefer these pics to be centered or display even more pics. Anywhere else can be modified as well?

Please see the attachment for reference.

[dioniz]

Is it possible to see your site?

[sbt]

Is it possible to see your site?

Sorry, I am testing on my local wamp server. 

Thanks again, at least I can put four pics in one line.

Kent

[HH Services Limited]

I have the same problem, but I am ok displaying only 3 pictures. The broblem is that the second line leaves one blank and the third one too. I would wish to show 3 picts per line and not 3 then 2 then 1. Any idea how to do this?

 

Thanks

[NemoPS]

As mentioned above, you must have them all the same height. Is it possible to see your site so we can try pointing you more precisely?

[HH Services Limited]

yes, it is http://www.highesthelp.com

I tried having all the pictures 250 px x 250 px and it gave the same order, so I end up putting them back at their better adjusted size (better downloading weight=seo).

The solution must to be made then in the code somewhere, but I dont know how. Anyways, not having control over where to position these images is a prob that I am sure many ppl will find...

 

Thank you Nemo, you always give good advices!!

[NemoPS]

It seems to be because of this rule

 

#htmlcontent_home ul li.htmlcontent-item-5

 

 

Hard to tell where it comes from as you have ccc enabled

[HH Services Limited]

What should I do then Nemo??

[NemoPS]

well disable ccc for css, so we can identify the source

[HH Services Limited]

well disable ccc for css, so we can identify the source

on advance parameters performance i disabled all 5 CCC

Try now Nemo...

[NemoPS]

modules/themeconfigurator/css/hooks.css, line15

 

Get rid of

 

#htmlcontent_home ul li.htmlcontent-item-5 {

1. width: 66.6667%;

}

[HH Services Limited]

 

modules/themeconfigurator/css/hooks.css, line15

 

Get rid of

 

#htmlcontent_home ul li.htmlcontent-item-5 {

1. width: 66.6667%;

}

 

I did so Nemo, but no changes are shown on the front office... Still images are placed leaving blanks...  Any idea as why?

[NemoPS]

Are you using any kind of cache? It's still there in hooks.css

[HH Services Limited]

Nemo, this is how it looks on my side at the time you saw it the last time:   (read at the end)

/* Home hook CSS */

#htmlcontent_home ul {

  margin: 0 -5px; }

  #htmlcontent_home ul li {

    padding: 0 5px 10px; }

    @media (max-width: 479px) {

      #htmlcontent_home ul li {

        width: 100%; } }

    #htmlcontent_home ul li img {

      max-width: 100%;

      height: auto; }

      @media (max-width: 479px) {

        #htmlcontent_home ul li img {

          min-width: 100%; } }

    

      @media (max-width: 479px) {

        #htmlcontent_home ul li.htmlcontent-item-5 {

          width: 100%; } }

 

/* Top hook CSS */

  #htmlcontent_top {

    float: right;

    width: 33%;

    max-width: 391px;

    padding-left: 5px;

}

  @media (max-width: 767px) {

    #htmlcontent_top {

      width: 100%;

      max-width: 100%;

      padding-left: 0;

      padding-top: 0px; } }

  @media (max-width: 767px) {

    #htmlcontent_top ul {

      margin: 0 -5px; } }

  #htmlcontent_top ul li {

    width: 100%;

    margin-bottom: 10px; }

    @media (max-width: 767px) {

      #htmlcontent_top ul li {

        float: left;

        padding-left: 5px;

        padding-right: 5px;

        width: 50%; } }

    #htmlcontent_top ul li:last-child {

      margin-bottom: 0; }

    #htmlcontent_top ul li img {

      max-width: 100%;

      height: auto; }

 

/* Left hook CSS */

/* Right hook CSS */

/* Footer hook CSS */

 

 

Now I made on my own a new change by getting rid of: 

 

 

      @media (max-width: 479px) {

        #htmlcontent_home ul li.htmlcontent-item-5 {

          width: 100%; } }

 

And it seems to be working fine now...

 

What do you think about the change I made on my own?

 

The new code looks like this now:

 

/* Home hook CSS */

#htmlcontent_home ul {

  margin: 0 -5px; }

  #htmlcontent_home ul li {

    padding: 0 5px 10px; }

    @media (max-width: 479px) {

      #htmlcontent_home ul li {

        width: 100%; } }

    #htmlcontent_home ul li img {

      max-width: 100%;

      height: auto; }

      @media (max-width: 479px) {

        #htmlcontent_home ul li img {

          min-width: 100%; } }

    

      

 

/* Top hook CSS */

  #htmlcontent_top {

    float: right;

    width: 33%;

    max-width: 391px;

    padding-left: 5px;

}

  @media (max-width: 767px) {

    #htmlcontent_top {

      width: 100%;

      max-width: 100%;

      padding-left: 0;

      padding-top: 0px; } }

  @media (max-width: 767px) {

    #htmlcontent_top ul {

      margin: 0 -5px; } }

  #htmlcontent_top ul li {

    width: 100%;

    margin-bottom: 10px; }

    @media (max-width: 767px) {

      #htmlcontent_top ul li {

        float: left;

        padding-left: 5px;

        padding-right: 5px;

        width: 50%; } }

    #htmlcontent_top ul li:last-child {

      margin-bottom: 0; }

    #htmlcontent_top ul li img {

      max-width: 100%;

      height: auto; }

 

/* Left hook CSS */

/* Right hook CSS */

/* Footer hook CSS */

 

 

I use Akamai, but I dont think its the problem sinceit only caches things for a few hours and I did the changes 2 days ago...

I cleared cache and disabñled cache too and nothing......

Edited December 8, 2014 by De La Riviere (see edit history)

[NemoPS]

Yeah it might have been cache. That snippet should only affect small sized versions of the site (that's... tablet portrait I think, or phone landscape (I forgot ))

[HH Services Limited]

Thank you Nemo!!!

 

So the final solution to this is by deleting:  

 

#htmlcontent_home ul li.htmlcontent-item-5 {

      width: 66.6667%; }

      @media (max-width: 479px) {

        #htmlcontent_home ul li.htmlcontent-item-5 {

          width: 100%; } }

 

From:  modules/themeconfigurator/css/hooks.css, line15

Edited December 9, 2014 by De La Riviere (see edit history)

[asksen2003]

modules/themeconfigurator/css/hooks.css, line15

 

Get rid of

 

#htmlcontent_home ul li.htmlcontent-item-5 {

1. width: 66.6667%;
   

}

 

Problem is resolved... thanks!

 

Also Image size should be the same.....