Shortcode font size, type

This thread is resolved. Here is a description of the problem and solution.

Problem:

How to use CSS codes to style shortcodes outputs?

Solution:

You can customize it by HTML + CSS codes, for example:

https://toolset.com/forums/topic/shortcode-font-size-type/#post-2131267

Relevant Documentation:

https://www.w3schools.com/css/css_font_style.asp

https://www.w3schools.com/css/css_font_size.asp

This support ticket is created 3 years, 4 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

This topic contains 6 replies, has 2 voices.

Last updated by rajivG 3 years, 3 months ago.

Assisted by: Luo Yang.

Author

Posts

July 29, 2021 at 2:39 pm #2128909

rajivG

Hi,

I've a query, please.

How can I customise the output/result text from a shortcode? I would like to know how to change its font family, size, etc.

Thanks,

Rajiv

July 30, 2021 at 7:34 am #2129493

Luo Yang

Hello,

WordPress shortcode won't setup text font size + type by default.

You can consider these:
1) Create two custom post fields, for example:
- font-size
- font-type
https://toolset.com/course-lesson/creating-custom-fields/

2) In the post content, setup the DIV tag with HTML codes manually, for example, in a shortcode block, display below codes:

<div style="font-size: [types field='font-size'][/types]px; font-style: [types field='font-type'][/types];">
...
Here display something
...
</div>

More help:
hidden link

July 31, 2021 at 2:32 pm #2130383

rajivG

I am unable to understand, Luo. Probably there could be a simpler solution.

In the numerical output from the shortcode, I would like to know the default font and font size that it selects. I would like to change those parameters. May I know where Toolset picks them from?

Thank you.

August 2, 2021 at 3:45 am #2131135

Luo Yang

To avoid more misunderstandings, please elaborate your questions with more details:

In the numerical output from the shortcode, I would like to know the default font and font size that it selects. I would like to change those parameters. May I know where Toolset picks them from?

Which shortcode are we talking about? please provide detail steps to reproduce the same problem, thanks

August 2, 2021 at 3:59 am #2131173

rajivG

This is the only shortcode output where I would like to tweak the font and its size:

[wpv-items-count] of [wpv-found-count] results

August 2, 2021 at 7:04 am #2131267

Luo Yang

The shortcodes you mentioned above won't output any font CSS styles, it can only output result in plain text directly.

But you can customize it by HTML + CSS codes, for example:

<div style="font-size: 25px; font-style: italic;">
[wpv-items-count] of [wpv-found-count]
</div>

See the document I mentioned above:
hidden link
hidden link

August 3, 2021 at 4:30 am #2132061

rajivG

Yes! It worked. That was what I was looking for. Thank you for helping out, Luo. Appreciated.