如何使用自定义 css 将标题从 H2 更改为 H3？

Question

我正在使用这个 google 地图插件，它不允许您更改地图标题的样式。开发人员告诉我用自定义 CSS.

来更改它

由于我是初学者，我不知道该怎么做，因为我没有元素的 ID，只有 class。

这是当我从 h2 更改为 h3 时执行我想要它执行的操作的行，但这仅在检查器中。我需要永久应用它。

<h2 class="widgettitle">Marinas and tours</h2>

然后我在插件文件中唯一能找到的 widgettitle 是下面的代码，将它从 h2 更改为 h3 后，它什么也没做：

  // initialize widgets
  static function widgets_init() {
    $options = GMWP::get_options();

    register_widget('GoogleMapsWidget');

    if (!$options['disable_sidebar']) {
      register_sidebar( array(
        'name' => __('Google Maps Widget PRO hidden sidebar', 'google-maps-widget'),
        'id' => 'google-maps-widget-hidden',
        'description' => __('Widgets in this area will never be shown anywhere in the theme. Area only helps you to build maps that are displayed with shortcodes.', 'google-maps-widget'),
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>',
      ));
    } // if activated
  } // widgets_init

我希望我能得到一些帮助

Answer 1

这可能不是一个好的答案，但一个简单的解决方法是将其添加到您的 css:

.widgettitle { 
    // default h3 styles
    display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

样式代码取自。

Answer 2

也许你可以通过Javascript，创建一个新的 h3 元素并将旧 h2 的内容替换为新的 h3 元素：

var h2 = document.getElementsByClassName('widgettitle')[0];

var h3 = document.createElement('h3');
h3.innerHTML = h2.innerHTML;

h2.parentNode.insertBefore(h3, h2);
h2.parentNode.removeChild(h2);

Answer 3

我通过使用 notepad++ 在我的网站文件中查找“widgettitle”来修复此问题。有一个包含小部件标题默认值的 php 文件，我将它们从 h2 更改为 h3。

    Line 271:       'before_title'   => '<h2 class="widgettitle">',
Line 1168:  *                                 Default `<h2 class="widgettitle">`.
Line 1197:      'before_title'  => '<h2 class="widgettitle">',

如何使用自定义 css 将标题从 H2 更改为 H3？

How do I change heading from H2 to H3 with custom css?

html

css

plugins

html-heading