[SOLVED] Transform attributes text from Uppercase to Capitalize

[cristian.neculai]

Hi there,

I need some help if is possible. I need to transform attributes text from Uppercase to Capitalize but I don't know how.

Thanks

[razaro]

You could try to inspect elements in the browser. Right-click on the text then choose "Inspect element".

Text CSS styles most likely have this:    text-transform: uppercase;   but you may want text-transform: capitalize;

That code is in your theme (assets) css file. But you will see that also when you inspect element.

[cristian.neculai]

26 minutes ago, razaro said:

You could try to inspect elements in the browser. Right-click on the text then choose "Inspect element".

Text CSS styles most likely have this:    text-transform: uppercase;   but you may want text-transform: capitalize;

That code is in your theme (assets) css file. But you will see that also when you inspect element.

Thanks for support Razaro

I found the code in product.tpl but I don't know how to make chances.

The code is:

-----------------------------------------------------------------------------------------------

<fieldset class="attribute_fieldset">
                          <label class="attribute_label" {if $group.group_type != 'color' && $group.group_type != 'radio'}for="group_{$id_attribute_group|intval}"{/if}>{$group.name|escape:'html':'UTF-8'}&nbsp;</label>
                          {assign var="groupName" value="group_$id_attribute_group"}
                          <div class="attribute_list">
                            {if ($group.group_type == 'color')}
                              <ul id="color_to_pick_list" class="clearfix">
                                {assign var="default_colorpicker" value=""}
                                {foreach from=$group.attributes key=id_attribute item=group_attribute}
                                  {assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
                                  <li{if $group.default == $id_attribute} class="selected"{/if}>
                                    <a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}">
                                      {if $img_color_exists}
                                        <img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20"/>
                                      {/if}
                                    </a>
                                  </li>
                                  {if ($group.default == $id_attribute)}
                                    {$default_colorpicker = $id_attribute}
                                  {/if}

---------------------------------------------------------------------------------------------------------

Can You give some steps to follow please?

 

[razaro]

Hi

I did not mention product.tpl but your  .css file.

If you post a link to that page it could be easier or mention your PrestaShop version and custom theme you are using.

[cristian.neculai]

1 minute ago, razaro said:

Hi

I did not mention product.tpl but your  .css file.

If you post a link to that page it could be easier or mention your PrestaShop version and custom theme you are using.

Ok...here is the link  https://www.diamondstone.ro/inele-de-logodna/306-inel-logodna-il068.html

Prestashop version 1.6.1.23

Thanks

[razaro]

OK you will find code in /themes/theme1377/css/product.css  open file and find 

#attributes fieldset label {
    color: #333333;
    margin-top: 10px;
    margin-right: 5px;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1.68px;
}

and change that to

#attributes fieldset label {
    color: #333333;
    margin-top: 10px;
    margin-right: 5px;
    display: block;
    text-transform: capitalize;
    font-weight: bold;
    letter-spacing: 1.68px;
}

Save file and clear your PrestaShop cache in Advanced parameters > Performance.

Changes should be visible https://nimb.ws/P5msFA

[cristian.neculai]

7 minutes ago, razaro said:

OK you will find code in /themes/theme1377/css/product.css  open file and find 

#attributes fieldset label {
    color: #333333;
    margin-top: 10px;
    margin-right: 5px;
    display: block;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1.68px;
}

and change that to

#attributes fieldset label {
    color: #333333;
    margin-top: 10px;
    margin-right: 5px;
    display: block;
    text-transform: capitalize;
    font-weight: bold;
    letter-spacing: 1.68px;
}

Save file and clear your PrestaShop cache in Advanced parameters > Performance.

Changes should be visible https://nimb.ws/P5msFA

It works

Thanks for your help Razaro