[SOLVED] How to change selected manufacturer text style?

[Hatti]

Hello there, I'm a beginner in Prestashop.

On my site, when I select a manufacturer in the manufacturers' block, I want the selected manufacturer to appear bold and with a different color, just as the Categories block works. I am using a custom Prestashop theme and it seems I can't handle the css sytax. Here's the css code from my theme for the block:

/* ————— blockmanufacturer.tpl ————— */
div#manufacturers_block_left {}
div#manufacturers_block_left div.block_content {padding:0 20px 3px 20px;}

div#manufacturers_block_left ul {padding:5px 0 0 0;}
div#manufacturers_block_left ul li {}
div#manufacturers_block_left ul li a {width:300px;height:22px;display:block;padding:7px 0 0 0;border-top:1px solid #eaeaea;color:#949494;}
div#manufacturers_block_left ul li:first-child a {border:none;}
div#manufacturers_block_left ul li a:hover {color:#80ac11;text-decoration:none;} 

div#manufacturers_block_left select {display:none;}

As you can see, the manufacturer changes color on mouseover... but I want to change color and text to bold also after has been clicked and selected. Please help, many thanks !

[Hatti]

Well ? anybody ? please help, I tried a lot but it doesn't seem to work

[megsmitley]

Hi!

I accomplished this by altering my blockmanufacturer.tpl and blockmanufactuer.css files.

Head to your blockmanufacturer.tpl can change this:

getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{l s='More about' mod='blockmanufacturer'} {$manufacturer.name}">{$manufacturer.name|escape:'htmlall':'UTF-8'}

To this:

getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{l s='More about' mod='blockmanufacturer'} {$manufacturer.name}" class="{if$smarty.foreach.manufacturer_list.last}last_item{elseif $smarty.foreach.manufacturer_list.first}first_item{else}item{/if}{if $smarty.get.id_manufacturer == $manufacturer.id_manufacturer} selected{/if}">{$manufacturer.name|escape:'htmlall':'UTF-8'}

In your blockmanufacturer.css add the following:

#manufacturers_block_left ul li a:hover { text-decoration: none; color: #dc2127; }
#manufacturers_block_left ul li a.selected { color: #dc2127; font-weight: bold }

Please note that I have created blockmanufacturer.tpl and blockmanufacturer.css files in my theme folder. I did so by copying and pasting the default CSS and TPL files into my theme directory and modifying as appropriate, so my customisations are theme-specific. For example:
/themes/mytheme/modules/blockmanufacturer/blockmanufacturer.tpl
/themes/mytheme/css/modules/blockmanufacturer/blockmanufactuer.css

You can also see a slightly different approach here http://www.prestashop.com/forums/viewthread/59255/general_discussion/how_to_bold_a_selected_menu_option (this bases the selected class on the li element; there's more than one way to skin a cat!)

Hope this is helpful to you. Best of luck.
Meg

[Hatti]

Uhmm... I tried you code but it makes my site disappear completely )

Note that I already have a blockmanufacturer.tpl file in my theme folder, more exactly:

/themes/theme086/modules/blockmanufacturer/

I edited that file and replace the code as you suggested, but this made my site disappear entirely, it just displays a blank page :|

Anyway, your help is much appreciated and just in case you decide to continue helping me, here is the original content of the blockmanufacturer.tpl file of my custom theme, maybe it helps:

<!-- Block manufacturers module -->

{l s='Manufacturers' mod='blockmanufacturer'}

{if $manufacturers}
   {if $text_list}

   {foreach from=$manufacturers item=manufacturer name=manufacturer_list}
       {if $smarty.foreach.manufacturer_list.iteration <= $text_list_nb}
getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{l s='More about' mod='blockmanufacturer'} {$manufacturer.name}">{$manufacturer.name|escape:'htmlall':'UTF-8'}
       {/if}
   {/foreach}

   {/if}
{else}

{l s='No manufacturer' mod='blockmanufacturer'}
{/if}


<!-- /Block manufacturers module -->

PS: sorry for being such a dumbhead about those things, I'm a geologist not a programmer but I have to find a way somehow to make those work

[megsmitley]

Hi.

You've got a syntax error in your a tag.

It should be written:

getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{l s='More about' mod='blockmanufacturer'} {$manufacturer.name}">{$manufacturer.name|escape:'htmlall':'UTF-8'}

As it is, there is a '>' where the href is set, i.e. your code is missing 'href="{$link->'

Tried the code with this corrected on my localhost and it was all good, so hopefully that's the root of your issue.

Meg

EDIT:

Posted this and realised that some of the a tag code gets stripped when posting in a code block, apparently. Let's try this. Your a tag should be written:

getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{l s='More about' mod='blockmanufacturer'} {$manufacturer.name}" class="{if $smarty.foreach.manufacturer_list.last}last_item{elseif $smarty.foreach.manufacturer_list.first}first_item{else}item{/if}
{if $smarty.get.id_manufacturer == $manufacturer.id_manufacturer} selected{/if}">{$manufacturer.name|escape:'htmlall':'UTF-8'}

[megsmitley]

Argh, still no joy.

You a tag should start with an href being set as:

href="{$link->getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}"

Make sense?

Meg

[Hatti]

Starting to make sense, but where to paste this modified "a" tag: in my original file ? or in your code ?

In my original file I think the classes were assigned to the li element, while in your code you assign the classes (including the new selected class) to the "a" element, or am I wrong ?

[megsmitley]

The href has no relationship with the classes and regardless of the styling approach you take (applying to li or a element) the href needs to be correctly set; the incorrect syntax is causing your 'blank screen behaviour', not to mention if you don't set the href, your link won't *link* to anywhere.

So there are two separate issues at play:
1) applying your CSS to the selected element, which you are applying to the li
2) correctly forming your HTML/PHP code

It is only the second of these issues that can cause the behaviour that you are reporting.

I recommend that you start by fixing your href syntax then sort out your CSS as you see fit. (See link to other thread for more on styling the li.)

Meg

[Hatti]

Hi,

I tried to correct the code using your indications, but it kept showing me a black page, and I couldn't trace the error, the a tag seemed to be fine.

However, I got it working like this: I created the "selected" class just for the "a" tag:

getmanufacturerLink($manufacturer.id_manufacturer, $manufacturer.link_rewrite)}" title="{l s='More about' mod='blockmanufacturer'} {$manufacturer.name}">{$manufacturer.name|escape:'htmlall':'UTF-8'}

Then I applied the styling as follows:

div#manufacturers_block_left ul li a.selected {color:#80ac11;font-weight:bold;}

It seems to be working... thank you very much for your time, I think your approach pointed me to the right direction! I'll let the thread opened a short while to make sure I didn't mess up something else while fixing this!

PS: it seems the code still gets chopped off... annoying. But you got the idea I guess.

[megsmitley]

Well done! Glad you got it going.

When you encounter that sort of 'blank page' problem in future, you can be sure it isn't a CSS/HTML issue; that's a problem somewhere in your PHP syntax. Machines are literal things, so even the tiniest error in how a statement is formated can cause a compilation-type failure. On the other hand where your CSS or HTML has problems your page will display but it may not render in the way you would expect it to.