How to make pretty title for blocks?

[kotkotan]

Friends tell me how to do title like this (screen)

I found it here

[vekia]

you can do it with css styles + template file modification.

<div id="categoriesprodtabs" class="block products_block exclusive blockleoprodcarousel">
<h3 class="title_block title_duo"><span class="first-word">New</span> Products</h3>
</div>

+

.title_block {
background: url("../img/bg_h4.png") repeat scroll 0 0 transparent;
border: 1px solid #B22222;
display: inline-block;
font-size: 24px;
font-weight: lighter;
margin-bottom: 15px;
padding: 0 14px;
text-transform: uppercase;
line-height: 30px;
}

+

.first-word {
color: #B22222;
font-weight: bold;
}

 

 

do the same for each heading in your store

[kotkotan]

thanks! i try do this early but how to achieve the effect of brackets without border?

[vekia]

i don't know exactly how they achieved this effect, but when i remove the border param, brackets disappear:

[vekia]

okay i've got it:

 

.title_block:before {
background: none repeat scroll 0 0 #EEEEEE;
content: "";
display: block;
height: 1px;
position: relative;
top: -1px;
}

 

+

 

.title_block:after {
background: none repeat scroll 0 0 #EEEEEE;
bottom: -1px;
content: "";
display: block;
height: 1px;
position: relative;
}

[kotkotan]

can't undertand how full code should be

[vekia]

in the css styles use:

.title_block:after {
background: none repeat scroll 0 0 #EEEEEE;
bottom: -1px;
content: "";
display: block;
height: 1px;
position: relative;
}

.title_block:before {
background: none repeat scroll 0 0 #EEEEEE;
content: "";
display: block;
height: 1px;
position: relative;
top: -1px;
}

.first-word {
color: #B22222;
font-weight: bold;
}


.title_block {
background: url("../img/bg_h4.png") repeat scroll 0 0 transparent;
border: 1px solid #B22222;
display: inline-block;
font-size: 24px;
font-weight: lighter;
margin-bottom: 15px;
padding: 0 14px;
text-transform: uppercase;
line-height: 30px;
}

 

in module .tpl files just:

<div id="categoriesprodtabs" class="block products_block exclusive blockleoprodcarousel">
<h3 class="title_block title_duo"><span class="first-word">New</span> Products</h3>
</div>

[kotkotan]

my code is

.block .title_block, .block h4 {
background: url("../img/bg_h4.png") repeat scroll 0 0 transparent;
border: 1px solid #B22222;
display: inline-block;
font-size: 24px;
font-weight: lighter;
margin-bottom: 15px;
padding: 0 14px;
text-transform: uppercase;
line-height: 30px;
}

.block .title_block, .block h4:before {
background: none repeat scroll 0 0 #EEEEEE;
content: "";
display: block;
height: 1px;
position: relative;
top: -1px;
}
.block .title_block, .block h4:after {
background: none repeat scroll 0 0 #EEEEEE;
bottom: -1px;
content: "";
display: block;
height: 1px;
position: relative;
}

 .block .title_block a, .block h4 a {color:#fff}
.block ul {list-style-type:none}
 .block li.last { border:none}
  .block li a {
display:block;
color:#333
  }

 

it is for category menu. but nothing

[vekia]

okay, and can you show how the .tpl code looks like?

[kotkotan]

blockcategoryes.tpl is

<!-- Block categories module -->
<div id="categories_block_left" class="block">
<h4 class="title_block">{l s='Categories' mod='blockcategories'}</h4>
<div class="block_content">
 <ul class="tree {if $isDhtml}dhtml{/if}">
 {foreach from=$blockCategTree.children item=child name=blockCategTree}
  {if $smarty.foreach.blockCategTree.last}
   {include file="$branche_tpl_path" node=$child last='true'}
  {else}
   {include file="$branche_tpl_path" node=$child}
  {/if}
 {/foreach}
 </ul>
 {* Javascript moved here to fix bug #PSCFI-151 *}
 <script type="text/javascript">
 // <![CDATA[
  // we hide the tree only if JavaScript is activated
  $('div#categories_block_left ul.dhtml').hide();
 // ]]>
 </script>
</div>
</div>
<!-- /Block categories module -->

[PascalVG]

Hi Kotkotan,

1) Can you tell me to which file (please include full path to file) you added the css code?

 

2) Where (please specify full path) is your blockcategories.tpl located?

Is it in /themes/<your theme folder>/modules/blockcategories/blockcategories.tpl?

 

3) What Prestashop version do you use?

4) A link to you site would be useful...

 

Let us know,

pascal

[vekia]

it's weirdy because i used exactly the same code, and here is the effect:

 

i think that the problem is strictly related to the theme that you use - exactly as Pascal suggested above. Url will be really helpful

[kotkotan]

Hi Kotkotan, 1) Can you tell me to which file (please include full path to file) you added the css code? 2) Where (please specify full path) is your blockcategories.tpl located? Is it in /themes//modules/blockcategories/blockcategories.tpl? 3) What Prestashop version do you use? 4) A link to you site would be useful... Let us know, pascal

 

1. global.css in /themes/MyTheme/css/

2. /modules/blockcategories/blockcategories.tpl

3. 1.5.4.1 (address will send by PM)

[PascalVG]

Hi Kotkotan,

Problem is probably in:

2. /modules/blockcategories/blockcategories.tpl

 

In Prestashop you can 'override' Prestashop Files (this is a way to change the behaviour of Prestashop WITHOUT having to change the original files of Prestashop. You sort of 'redirect' the original file to a new file where you make the real changes.)

 

Therefore, you should make the changes in the overriding file, which you can find here:

/themes/<your theme folder>/modules/blockcategories/blockcategories.tpl

 

So, edit this file just mentioned and make your changes in here. Save and reload the Shop page.

See if that works,

pascal