I am using this google maps plugin that doesn't allow you to change style of title of the map. Developers told me to change it with custom CSS.

Since I am a beginner, I don't know how to do that since I don't have id of the element, just the class.

This is the line that when I change from h2 to h3 does what I want it to do, but that's only in inspector. I need to apply this permanently.

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

And then the only widgettitle I could find in plugin files was the following code, and after changing it from h2 to h3, it does absolutely nothing:

  // 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

I hope I can get some help with this

CodePudding user response：

This is probably not a good answer, but an easy fix would be to add this to your 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;
}

Styles code taken from this SO question.

CodePudding user response：

Maybe you can do it by Javascript, creating a new h3 element and replace the content of old h2 to the new h3 element:

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

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

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