Replacing “Twenty Seventeen” Theme’s header image with a map widget

  • I am using a plugin called “Google Maps Easy Pro” to create a map that website visitors can add markers to. I’m attempting to use the theme Twenty Seventeen, who’s fullscreen custom image header function is the perfect layout for the way I want the map to be displayed ~~ but I am running into some issues.

    Here is what I’ve done:
    1) I created a map with the plugin and copied the php code they provided for inserting the shortcode into a .php file.

    2) I went into “template-parts/header/header-image.php” and replaced the command that calls the custom image or video to be displayed with this map shortcode. Here is what the code looked like after that:

    <div class="custom-header">

		<div class="custom-header-media">
			
			<?php /*<?php the_custom_header_markup(); ?>*/ ?>
			
			<?php echo do_shortcode('[google_map_easy id="1"]')?>
		</div>

	<?php get_template_part( 'template-parts/header/site', 'branding' ); ?>

</div><!-- .custom-header -->

    3) Now the map displays in some chopped up pixelated glitchy form. If I then remove the class="custom-header-media" from the div that contains the custom header content, the map displays perfectly fine and looks beautiful. But the problem then is that if I go to any of the other pages, the header still displays full page rather than becoming a thinner banner at the top, and the header text gets positioned incorrectly. So that doesn’t seem like a good solution.

    4) I then started deleting small bits at a time of styling that referenced the “.custom-header-media” class from the Twenty Seventeen style.css file — each time refreshing the page and hoping to see a difference and locate which part of the css might be causing the issue. I eventually deleted all styling referring to that class and still no change ~~ which is perplexing to me because if I remove that class from the div and just have the map sitting in an unstyled div there is no issue and the map displays fine. It is something about that style itself causing the problem. Any ideas?

    Fresh thoughts greatly appreciated! ??

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I appreciate the explanation and I have 2 concerns of the approach;
    1) Not using a Child Theme is dangerous;
    2) Removing CSS may create more problems than it resolves

    If you have time, I would recommend transferring these changes into a Child Theme and I can help with that later.
    https://codex.www.ads-software.com/Child_Themes

    Can you undo the CSS modifications you’ve made and demonstrate the problem with an untouched style.css file?

    Can you also demonstrate the page that looks correct and link us to that page?

    Thread Starter ryanvh22

    (@ryanvh22)

    Okay, completely reset everything to the original code and created a child theme so everything should be good to go now.

    I test first the initial problem, that when the php command calling the map shortcode is within the div that has class=”custom-header-media” it displays pixelated and glitched.

    That problem persisted, until I remove the class=”custom-header-media” from the div that wraps around the map. At this link you can see how the map displays perfectly fine without this class. If you navigate to any other page such as about, the map still takes up the full screen and the title text + nav bar, rather than displaying on-top of the map as it should, is pushed down below the map.
    https://www.smilesaidtheriver.com/IN_VISIBLE/2/

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Replacing “Twenty Seventeen” Theme’s header image with a map widget’ is closed to new replies.