1

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
1
  • Could you explain a bit more why you have to change the HTML rather than change the CSS as you have been recommended to do?
    – A Haworth
    Nov 22, 2021 at 19:18

3 Answers 3

1

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);
0

I fixed this by looking for "widgettitle" in my website files with notepad++. There was a php file containing widget title defaults and I changed them from h2 to h3.

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

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.

1
  • Thanks, but I only need to change the heading number. I already have defined styles in my theme, I only have to change this element from h2 to h3.
    – deeresther
    Nov 22, 2021 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.