different background for footer category.

[dln]

Hi,

 

I'm on prestashop 1.6.0.5 and the default theme that i have modified.

 

So i'm a newbie but i learn each time i want to modify my site.

 

Ok i'want in the footer, to have a different background for each title of category and sub-category

 

I can have it for socialblock and the (i don't now how to say) block where is "adress, mail, etc...)

 

I can have it because in the global.css of the theme, this block was clearly identified in the footer.

 

My problem is with the other information display in the footer like "category", "information" and "my account"

 

in the global.css, section footer, you can't have different background. If i modified for exemple the background for "H4", all the "H4" have the same background. (same for sub-category)

 

I want to know if it's possible to "disconnected" each title of category to have different background.

 

This is a copy of what i can do but also what i want to do:

 

 

Thanks for all that can help me

 

ps: Sorry for my english!

[NemoPS]

Ok, what if you try with a class? The category object should still be available in the footer, therefore try with

 

class="cat_{$category->id}"

 

 

for the footer, then you can target this class in your css

[sooroos]

i have used in one of my shop something like

 

 

<div class="columns-container" style="
            {if $category->id == 1}background:url({$img_dir}/first.jpg){/if}
            {if $category->id == 2}background:url({$img_dir}/second.jpg){/if}
            {if $category->id == 3}background:url({$img_dir}/third.jpg){/if}
            {if $category->id == 4}background:url({$img_dir}/fourth.jpg){/if}
            ;background-repeat: no-repeat;background-attachment: fixed;background-size: cover;">

 

so i have edited the header.tpl file and it works without problems but i am not sure if this is a good way regarding site speed

[dln]

Thanks nemo1 to help me.

 

ok like i said i'm a newbie so excuse me if i have some question.

 

In witch files must have to put this line?

 

a .tpl i think, no?

[NemoPS]

if you want to go my way, footer.tpl, to the footer element

[dln]

i have that in my footer.tpl:

{if !$content_only}
					</div><!-- #center_column -->
					{if isset($right_column_size) && !empty($right_column_size)}
						<div id="right_column" class="col-xs-12 col-sm-{$right_column_size|intval} column">{$HOOK_RIGHT_COLUMN}</div>
					{/if}
					</div><!-- .row -->
				</div><!-- #columns -->
			</div><!-- .columns-container -->
			<!-- Footer -->
			<div class="footer-container">
				<footer id="footer"  class="container">
					<div class="row">{$HOOK_FOOTER}</div>
				</footer>
			</div><!-- #footer -->
		</div><!-- #page -->
{/if}
{include file="$tpl_dir./global.tpl"}
	</body>
</html>

so i put it here, that's correct? (after <div class="footer-container">)

{if !$content_only}
					</div><!-- #center_column -->
					{if isset($right_column_size) && !empty($right_column_size)}
						<div id="right_column" class="col-xs-12 col-sm-{$right_column_size|intval} column">{$HOOK_RIGHT_COLUMN}</div>
					{/if}
					</div><!-- .row -->
				</div><!-- #columns -->
			</div><!-- .columns-container -->
			<!-- Footer -->
			<div class="footer-container">
			     class="cat_{$category->id}"
				<footer id="footer"  class="container">
					<div class="row">{$HOOK_FOOTER}</div>
					
				</footer>
			</div><!-- #footer -->
		</div><!-- #page -->
{/if}
{include file="$tpl_dir./global.tpl"}
	</body>
</html>

sorry sooroos, i post in same time as you!

 

So you put your lines in the footer.tpl at the same place that i put the line of nemo?

 

But if you said that's not ok for site speed,i prefer another solution.

 

Thers is a file name blockcategories_footer.tpl, that's not a good place?

 

What i must to do after in the globlal.css?  

 

 

[dln]

it doesn't work but i think it's not in the good place or i write a wrong code!

 

Must have to replace the term in the code:

 

category byname of category i want to change and ID by the number of the category?

 

i'm lost!!!

[sooroos]

if you follow nemo's example your footer.tpl should look like

 

{if !$content_only}
                    </div><!-- #center_column -->
                    {if isset($right_column_size) && !empty($right_column_size)}
                        <div id="right_column" class="col-xs-12 col-sm-{$right_column_size|intval} column">{$HOOK_RIGHT_COLUMN}</div>
                    {/if}
                    </div><!-- .row -->
                </div><!-- #columns -->
            </div><!-- .columns-container -->
<!-- Footer -->
            <div class="footer-container">  
                <footer id="footer" class="container cat_{$category->id}">
                    <div class="row">{$HOOK_FOOTER}</div>
                </footer>
            </div><!-- #footer -->
        </div><!-- #page -->
{/if}
{include file="$tpl_dir./global.tpl"}
    </body>
</html>

 

then you have to define in global.css styles for

.cat_1{

 background: URL(images/background.jpg)

}

.cat_2{

}

.cat_3{

}....

 

 

in terms of speed i dont know which one is better, i have just asked

Edited September 1, 2014 by sooroos (see edit history)

[dln]

Thanks a lot sooroos to help me!

 

So i change the .tpl -->ok

 

That's i'm not sure it's for the global.css

 

I'll put this in the global.css 

.footer-container#footer.cat_5{
    background-image:url(../img/first.png);}

in the section .footer-container of the css. That is correct? but it doesn't work nothing in background.

.footer-container {
  #background-image: url(../img/footer-bg.png);
  border-top: 3px solid #0066ff;
  border-bottom: 1px solid #0066ff  }
  @media (min-width: 768px) {
    .footer-container {
      #background: url(../img/footer-bg.png); } }
  .footer-container .container {
    padding-bottom: 100px; }
  .footer-container #footer {
    color: #777777; 
	background-image:url(../img/footerback.png);}
    .footer-container#footer.cat_5{
    background-image:url(../img/first.png);}

Sorry i'm a "drag" in css and coding!

 

the cat_5 correspond at "produits" in my footer

[sooroos]

just add these lines at the VERY end of global.css,

 

 

.cat_12{
      background:url(../img/body1.jpg);

 

just tested and it works, be carefull to have the correct category id, turn on compilation...

[dln]

i don't know why but it doesn't work!

 

I turn on compilation,i put your code at the end of my global.css (i put a } at the end). I change the ID by one of mine.

 

The ID is the number you have when you create a category et the left, no?

 

If it is i have the cat_3 that is correspond to "Boxs" but no background!

[sooroos]

and did you surf to that category and no background?

[dln]

no background when i surf to these category

[sooroos]

.cat_12{
      background-color:red;

}

 

try the one above and if it does not change, than i dont why, i have tested and it works

[dln]

when i put this code:

 

.cat_3{

      background-color:red;}

all the footer background turn red!

[sooroos]

it means it works, the problem is then with your image, image url

Edited September 2, 2014 by sooroos (see edit history)

[dln]

i think there is also a problem with ID

 

ID=3 seems to be the background of all the footer.

 

how i can found the ID of "Boxs" or "produits"?

[sooroos]

can you give me the link to your shop?

you are doing something wrong and i dunno what

[dln]

i'll send you i PM