Is it possible to change the font on a characteristics dropdown ?

  • Posts: 135
  • Thank you received: 5
5 years 9 months ago #294739

-- HikaShop version -- : 3.4.1
-- Joomla version -- : 3.8.10
-- PHP version -- : 5.6.3
-- Browser(s) name and version -- : Chrome 67.0.3396.79 (Official Build) (64-bit)
-- Error-message(debug-mod must be tuned on) -- : No error message

@forum, @support,

I am thinking this in not possible, but if I have a FONT Variant as a dropdown.
Is there anyway, I can change each line to represent the actual Font?

See attached font list.

Thanks in advance,
MSF

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 12953
  • Thank you received: 1778
5 years 9 months ago #294756

Hello,

Can you give us more information about what you want to achieve through some screenshots so that we can properly help you ? Thank you.

Best regards,
Mohamed Thelji.

Please Log in or Create an account to join the conversation.

  • Posts: 135
  • Thank you received: 5
5 years 9 months ago #294787

Thanks for the reply.
I have attached the drop down of the font list, can those be changed to the corresponding font types ?

So if strikethrough was on that list could it show as stritkethrough

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 4508
  • Thank you received: 610
  • MODERATOR
5 years 9 months ago #294808

Hello,

I see 2 solutions :
Each value have his own html class and you can add some custom css code in your frontend file css, this kind of code may do the trick :

html_class_font_1 {
    font-family: value 1
}
html_class_font_2 {
    font-family: value 2
}
Note : See this tutorial .

OR, you add directly in each dropdown value your inline style css :
Before :
font-family name
After :
<span style="font-family: value 1">font-family name 1</span>

Hope these solutions will fit your needs.
Regards

Last edit: 5 years 9 months ago by Philip.
The following user(s) said Thank You: markfell

Please Log in or Create an account to join the conversation.

  • Posts: 135
  • Thank you received: 5
5 years 9 months ago #294817

Philippe,

Thank you a simple <span style="font-family:Brush Script MT Italic;">Brush Script MT Italic</span> in the Characteristics works and displays like a charm for the radio button.

The drop down looks like this, and the <span> is dropped by the front end.

<select id="hikashop_product_characteristic_60" name="hikashop_product_characteristic[60]" class="inputbox" size="1" onchange="return hikashopUpdateVariant(this);">
<option value="61" selected="selected">Brush Script MT Italic</option>
<option value="62">Calibri Regular</option>
<option value="63">Cooper Black</option>
<option value="64">Forte Regular</option>
<option value="65">Lato Bold</option>
<option value="68">Monotype Corsiva</option>
<option value="66">Montserrat Black</option>
<option value="67">Montserrat Bold</option>
<option value="69">Shadows Into Light</option>
</select>

Thank you.

MSF

Last edit: 5 years 9 months ago by markfell. Reason: The dropdown gets the class="inputbox" against it. How do I change the attributes for this class for each dropdown option ?

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13063
  • MODERATOR
5 years 9 months ago #294876

Hi,

You would have to remove it from the file administrator/components/com_hikashop/types/characteristic.php
However, a better solution would be to edit the file "show_block_characteristic" via the menu Display>Views and change the line:

echo $this->characteristic->displayFE($this->element, $this->params) . '</div>';
to:
echo str_replace('class="inputbox"','',$this->characteristic->displayFE($this->element, $this->params)) . '</div>';

Please Log in or Create an account to join the conversation.

  • Posts: 135
  • Thank you received: 5
5 years 9 months ago #294897

Hi,

Thanks for the code change. Didn't help with the dropdown, just removed the class.

In the characteristic for the first dropdown I have this: <span style="font-family:Brush Script MT Italic">Brush Script MT Italic</span>
and the same for the respective font characteristics.

But that gets stripped out.

<select id="hikashop_product_characteristic_60" name="hikashop_product_characteristic[60]" size="1" onchange="return hikashopUpdateVariant(this);">
<option value="61" selected="selected">Brush Script MT Italic</option>
<option value="62">Calibri Regular</option>
<option value="63">Cooper Black</option>
<option value="64">Forte Regular</option>
<option value="65">Lato Bold</option>
<option value="68">Monotype Corsiva</option>
<option value="66">Montserrat Black</option>
<option value="67">Montserrat Bold</option>
<option value="69">Shadows Into Light</option>
</select>

Any other Ideas on how this will work.. Its works perfect with a radio button, see attached.

Thanks,

MSF

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13063
  • MODERATOR
5 years 9 months ago #294915

Hi,

You should not add the CSS directly in the characteristic value.
You can do that will simple CSS code that you can add in the HikaShop CSS or your template CSS and no PHP modification.
For example:

.hikashop_product_characteristic_60 option[value=61] { 
   font-family:Brush Script MT Italic;
}

The following user(s) said Thank You: markfell

Please Log in or Create an account to join the conversation.

  • Posts: 135
  • Thank you received: 5
5 years 9 months ago #294999

Hello,

I tried this, put it in the custom1.css in the CSS Options.
It didn't get picked up, also tried in the custom.css of the template, same result.

Why does it work with radio buttons and not the dropdown ?

Regards,
MSF

Please Log in or Create an account to join the conversation.

  • Posts: 26000
  • Thank you received: 4004
  • MODERATOR
5 years 9 months ago #295022

Hi,

Selector is :

#hikashop_product_characteristic_60 option[value="61"]

Please understand that we are going outside the limit of our support since it's related to customization and creation of CSS rules (which is not direct HikaShop stuff).

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.
The following user(s) said Thank You: markfell

Please Log in or Create an account to join the conversation.

  • Posts: 135
  • Thank you received: 5
5 years 9 months ago #295067

Thank you, Thank you, Thank you,
Works like a dream : )

You guys rock.

MSF

Please Log in or Create an account to join the conversation.

  • Posts: 506
  • Thank you received: 21
  • Hikashop Business
5 years 9 months ago #295206

Hi,

I would like to achieve the same effect in a custom field dropdown where one can select a font. I added a ccs line in my template:

.test_lettertypen option[value=1] {
font-family:Courier New;
}

where the single dropdown has the column_name "test_lettertypen" (see attachement).

Unfortunately, this does not work. Is there a simple solution?

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13063
  • MODERATOR
5 years 9 months ago #295214

Hi,

You can do that yes. However, the class test_lettertypen doesn't exists.
The class is hikashop_item_test_lettertypen_line if you look at the HTML of the area where the select is with the HTML inspector of the developer tools of your browser.

Please Log in or Create an account to join the conversation.

  • Posts: 506
  • Thank you received: 21
  • Hikashop Business
5 years 9 months ago #295248

Hi Nicolas,

Yes, I found that before in Firebug, but that also didn't work when using:

.hikashop_item_test_lettertypen_line option[value=1] {
font-family:Courier New;
}

Please Log in or Create an account to join the conversation.

  • Posts: 81504
  • Thank you received: 13063
  • MODERATOR
5 years 9 months ago #295260

Hi,

Try like that then:
.hikashop_item_test_lettertypen_line option[value="1"] {
font-family:Courier New !important;
}
Please understand that this is purely CSS customization, and has nothing to do with HikaShop itself.

Please Log in or Create an account to join the conversation.

  • Posts: 506
  • Thank you received: 21
  • Hikashop Business
5 years 9 months ago #295314

Hi,

Thanks, allready tried that. I understand, will figure it out myself.

Please Log in or Create an account to join the conversation.

Time to create page: 0.100 seconds
Powered by Kunena Forum