center alignment isn't working -- and other questions

First off, how do I get the map centered on the page? I have "center" selected as the alignment, but it isn't working.

Second, which ID or class do I need to change in order to get the map to show up with a border-radius of 15px? I think I've tried every one that I could find with Firebug and was able to get a border with rounded corners, but the map isn't inside the border and the corners stick out like a sore thumb.

Third, which ID or class do I apply the box-shadow to? Again, I've tried a variety of them with no luck.

Finally, can you recommend the best way to get the shortcode to work in my theme without having to put it directly in the content-locator.php file using "... echo do_shortcode ..."? I've tried using a custom field and "... echo $var ..." with no luck.

Thanks for any help you can provide.

affected page: http://meatthepita.com/find-us/

  • Milan

    Hello Lorie ,

    Hope you are well today and thanks for asking us. :slight_smile:

    Could you please enable support staff login to your site so that I can check well about your issue. ?

    First off, how do I get the map centered on the page? I have "center" selected as the alignment, but it isn't working.

    On my site I am not able to replicate this issue. Its centring map If I chose "center" alignment in settings. So its something specific to your site

    I tried to view page you mentioned here but I got there error of Service Unavailable. Please see this screenshot.

    Please look at that issue and fix it please. :slight_smile:

    Finally, can you recommend the best way to get the shortcode to work in my theme without having to put it directly in the content-locator.php file using "... echo do_shortcode ..."? I've tried using a custom field and "... echo $var ..." with no luck.

    I could tell you more about this if you grant me staff access to your site. I could have checked your theme information myself but I am constantly getting "Service Unavailable" error on your site.

    Looking forward to hearing back. :slight_smile:
    Best Regards,
    Milan

  • Dimitris

    Hey there Lorie,

    hope you're doing good and don't mind chiming in!

    I just went ahead and added some CSS rules in Appearance -> Custom CSS

    /* WPMU DEV Staff - start */
    .agm_google_maps,
    .agm_google_maps > div {
      margin: 0 10%;
    }
    .agm_google_maps > div {
      border-radius: 15px;
      -webkit-box-shadow: -7px 7px 6px 4px rgba(0,0,0,0.50);
      -moz-box-shadow: -7px 7px 6px 4px rgba(0,0,0,0.50);
      box-shadow: -5px 5px 4px 3px rgba(0,0,0,0.50);
    }
    /* WPMU DEV Staff - end */

    1. The map is now centered. The first CSS rule take care of this, as you use a value of "80%" for map width. If you were using pixels then it shouldn't be required. :wink:
    2 & 3. Border radius and box shadow have been added in parent element also. I just used the values that you have already used in child element.
    4. About the do_shortcode() I'm kind of confused... the map shortcode isn't being added from this page edit screen? /wp-admin/post.php?post=20&action=edit Please advise! :slight_smile:

    Warm regards,
    Dimitris

  • Lorie

    The map page now looks AWESOME! Thank you!

    4. About the do_shortcode() I'm kind of confused... the map shortcode isn't being added from this page edit screen? /wp-admin/post.php?post=20&action=edit Please advise!

    The shortcode is added on the content-locator.php page. I would like to be able to add it to a custom field and have WP pick up on it and display it. I've added a custom field with a WYSIWYG editor, but it doesn't provide access to the button for adding a map directly to it, nor does WP seem to notice any shortcode placed in those editors, so the only way I've found to display the map is to write the shortcode into the actual code which prevents it from being easily replaced.

  • Dimitris

    Hey there Lorie,

    I'm glad you're happy with the result. :slight_smile:

    About the shortcode, I can see the issue there, have you thought to create a dummy post in order to use the default editor and use the map action button, and then copy-paste the shortcode that's been generated into a builder element? Not the best solution, but still you can have your favourite page builder. :wink:

    Warm regards,
    Dimitris

  • Lorie

    I think I understand what you're saying -- rather than get the page to work correctly in the theme I designed, I could take a shortcut and use PageBuilder or something similar and force the content into the full-width template.

    Unfortunately, that doesn't help me learn how to write the PHP code to make things work correctly. As it is now, as long as the map's shortcode doesn't change, my client should (theoretically) be able to edit the locations of the pins on the map (can't remember if I ever got that to work in my tests).

    Thanks for the idea, though. :relaxed:

  • Dimitris

    Hey Lorie,

    I trust you're well today! :slight_smile:

    The main issue for your clients would be that they won't have any mean to create a new map through the map button in default WYSIWYG editor of WordPress. That's why I proposed the workaround to create a dummy post just to generate the exact map shortcode that you'll need.

    I even tried to install the famous Advanced Custom Fields and insert a WYSIWYG custo field but the "add map" button doesn't seem to render inside that field.

    The other way round would be to use custom fields for every shortcode argument that you want your members to insert, and use these to build the final shortcode inside the template files. Again, your member won't have any visual representation before submitting, the way popup works.

    Hope that was some help,
    Dimitris