WordPress - how to make html text be a heading h1-h2 via CSS?

Envato Authors Code Authors
1

I have a plugin, that crates some text for example “NewTitle”. This text at HTML looks like:

<span class="plugin-title">
    <em>NewTitle</em>
</span>

Is it possible via custom CSS code to make this text-title be as heading - h1/h2/h3/h4?

2

No, you can’t change it via CSS.

You need to change it directly in the plugin or to change it via custom JS code.

1 Like
3

Thanks but it’s very pity :frowning:
Can you help with code? How code must look to make this title as heading?

The same for a WooCommerce single product tabs names (description, additional_information, reviews) - how make them as headings?

4

Hi

you can try with this css:

.plugin-title em {
   font-size: 24px;
   font-weight: bold;
}

Change font-size as you like. and also can add another css.

Thanks

5

No, styling does not resolve task problem. It must be exactly a HEADING!

6

yes you can do it using custom css and in that case to get exact style as a heading you have to copy css from that heading and paste into my css rule (it is called css overwrite). Otherwise you have to customize the plugin.

7

How I must customize the plugin? What code must be at place that creates this title to make it as HEADING?

8

in your plugin generated code (

<span class=“plugin-title”><em>

) replace with h1/h2/h3/… as you need and also you can add css in that plugin css for more style.
9

Dear friend,
I found string “plugin-title” at plugin 4 files 14 times. In which I must change or add heading h1/h2???

1 - plugin-public.css: 
plugin-title{font-size:18px;font-weight:700;display:block;margin-bottom:20px}
plugin-title em{font-style:normal}
plugin-title{display:block;position:absolute;left:0;bottom:0;padding:10px;font-weight:700;color:#fff;text-shadow:-1px 1px 0 #000;font-size:18px;line-height:18px;text-align:left}
plugin-title{display:block;position:absolute;left:0;bottom:0;padding:10px;font-weight:700;color:#fff;font-size:18px;line-height:18px}
plugin-title{margin:0}
plugin-title{display:block;font-size:14px;line-height:16px;font-weight:700;margin:0 0 0 90px}
plugin-title{background:#242526;color:#fff;padding:10px 5px;text-align:center;font-size:12px;font-weight:700}
plugin-title a{color:#fff;text-decoration:none;border:none}.
plugin-title a:hover{text-decoration:underline}

2 - plugin-widget.php:
echo '<span class="plugin-title">'. $plugin-title .'</span>';

3 - layout_table.php:
<div class="plugin-title"><a href="<?php echo get_permalink( $review['plugin_post_id'] ); ?>"><?php echo $review['plugin-fulltitle']; ?></a></div>

4 - layout.php:
echo '<span class="plugin-title"><em>'. $title .'</em></span>';

And how exactly?

10

4 - layout.php. please keep a backup first. Thanks

1 Like
11

So it must be like a:
echo '<span class="plugin-title"><em><h2>'. $title .'</h2></em></span>';
?

Also how I can make WooCommerce tabs (description, additional_information, reviews) also be a Heading?