Moving category title & description overlay off category image

[jwbc46]

I recently updated to 1.6.x and ran into the problem with the category titles and description being on top my category images. I understand that is a new feature, but it didn't fit with my existing images so I had to figure out how to move them back above the image. The link below is the old discussion related to the topic with no resolution besides removing category images all together or redoing all images. 

 

https://www.prestashop.com/forums/topic/310422-bug-catergory-text-overlays-category-picture/

 

 

Here's what worked for me (default theme). I'm an amateur so it's entirely possible that there is a better way to do this and I'd be glad to hear criticism. 

 

Category.tpl

   <!-- Category image -->
                    <div class="content_scene_cat_bg" >
                        {if $category->description}
                            <div class="cat_desc">
							
                            <span class="category-name">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
							
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>

                            {else}
							
                                <div class="rte">{$category->description}</div>

                            {/if}
							
						<div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) center no-repeat; min-height:{$categorySize.height}px;"{/if}>
					
						</div> 
                            </div>

                        {/if}

                     </div>
					
                  {/if}
				  
            </div>
			
		{/if}

To work correctly on mobile or lower res screens I had to add two lines to category.css

 

Category.css

  .content_scene_cat .content_scene_cat_bg {
     background-size: contain !important;
     padding: 1px 10px 10px 14px;
	 background-color: #464646 !important; }
    @media (max-width: 1199px) {
      .content_scene_cat .content_scene_cat_bg {
	min-height: 250px !important;
        padding: 10px 10px 10px 15px; } }

Edited August 17, 2015 by jwbc46 (see edit history)

[shacker]

you can do with css only

edit the global.css in themes/default-bootstrap/css/

 

add this lines at the end

 

.cat_desc{

 

 

1. position: relative;
2. float: left;
3. clear: both;
4. margin-top: 128px;
5. width: 100%;

}

 

#center_column h1 {

1. font-size: 1.5em;
2. text-transform: capitalize;
3. width: 100%;
4. clear: both;

}

 

 

the margin-top need to be changed if your category images are bigger

Edited August 23, 2015 by shacker (see edit history)

[jwbc46]

Awesome thank you! I'll try that out