Contact Widget
Support Area › Forums › Forward › Contact Widget
- This topic has 14 replies, 2 voices, and was last updated 7 years, 10 months ago by Bill Robbins.
-
AuthorPosts
-
May 2, 2016 at 11:33 #36643Allison DeerrParticipant
Hi Bill! Is there a way to edit the appearance of the “hours” portion of the contact widget so that my hours don’t run together as one long line? I’d like to insert breaks between each line since we have three separate hours of operation for our organization. Thanks!
May 2, 2016 at 13:02 #36645Allison DeerrParticipantThis reply has been marked as private.May 2, 2016 at 16:57 #36650Bill RobbinsModeratorHi Allison,
Excellent question there. For security reasons, the widget filters out HTML as you’ve discovered to keep it from getting into the database.
If you want to edit the theme, we can add in additional fields for the times. To do that you would go to the Appearance section in your WordPress dashboard and click on Edit. From the files on your right, choose widget-contact.php and replace all the content in that file with the code at https://gist.githubusercontent.com/billrobbins/9121e3ab79ce25f181b58a69f97ce0ad/raw/6fa2cf4ab4ba7bc329a9867eeb06b96a5b51f57b/widget-contact.php . That should add in additional fields for what you’ve described there.
Another option would be to use a couple of text widgets. In one you could place your hours and in another we could place the map. We could then style the map widget so it takes up two “columns” so to speak.
If I can help out with either option, let me know.
Thanks,
BillMay 3, 2016 at 09:49 #36653Allison DeerrParticipantThis reply has been marked as private.May 3, 2016 at 10:40 #36655Bill RobbinsModeratorHi Allison,
I think in this situation, we may need a bit more custom solution than the built in contact widget. It wasn’t really designed to have separate hours for different entities at the same location.
So let’s just use a basic WordPress text widget. It accepts HTML without any fuss so we can craft just about anything we want there. There is a checkbox to automatically insert paragraphs. In this instance we’ll want that turned off.
Then add your hours like this:
<div class="vcard"> <ul class="address"> <li class="fn">Name</li> <li class="adr">Address 1</li> <li>Address 2</li> <li class="locality">City State Zip</li> <li class="tel">Phone Number</li> </ul> <h3 class="widget-title open-title">Hours</h3> <ul class="times"> <li class="name"><strong>Name 1</strong></li> <li class="hours">Hours 1</li> <li class="hours">Hours 1</li> </ul> <ul class="times"> <li class="name"><strong>Name 2</strong></li> <li class="hours">Hours 2</li> <li class="hours">Hours 2</li> </ul> <ul class="times"> <li class="name"><strong>Name 3</strong></li> <li class="hours">Hours 3</li> <li class="hours">Hours 3</li> </ul> </div><!-- .vcard --> <div class="contact-map">Map Code</div>
Replace the “name 1” “hours 1” and so on with the names of your entities and their hours. Also replace “Map Code” with the embed code for your map.
After you add that, we can then craft a bit of Custom CSS to style it like the contact widget.
In this instance I believe this will give you the best results. Plus it will be easier to edit in the future if your times change than if we hard code it into the contact widget.
Let me know when you have it set up and I’ll take a look and send back the CSS.
Thanks,
BillMay 3, 2016 at 15:19 #36663Allison DeerrParticipantThanks, Bill! Not sure which widget you recommend for this, but I used Enhanced Text and it seemed to work fine. Currently all the lines have bullet points next to them, but I’m sure those will go away once it’s styled.
May 3, 2016 at 15:26 #36664Allison DeerrParticipantThis reply has been marked as private.May 3, 2016 at 15:33 #36665Bill RobbinsModeratorLet’s try adding this to your Custom CSS. It won’t pick up on the test contact page because the hooks that the styling will need to grab hold of are different there from the home page. See how this works out:
#home-widgets .textwidget.widget { padding: 0; width: 100%; } #home-widgets .textwidget .vcard { float: left; width: 32%; padding: 20px; min-height: 360px; } #home-widgets .textwidget .contact-map { float: right; width: 66%; min-height: 360px; overflow: hidden; } #home-widgets .textwidget .contact-map iframe { width: 100%; margin-bottom: -4px; } #home-widgets .textwidget ul { list-style-type: none; margin-left: 9px; } #home-widgets .textwidget li { list-style-type: none; } #home-widgets .textwidget h3.open-title { margin-top: 0; } #home-widgets .textwidget .fn { font-weight: 700; } @media only screen and (max-width: 767px) { #home-widgets .textwidget .vcard, #home-widgets .textwidget .contact-map { float: none; width: 100%; min-height: none; } #home-widgets .textwidget .contact-map { padding: 30px; } }
May 3, 2016 at 16:49 #36666Allison DeerrParticipantHi Bill,
I tried adding this to the Custom CSS in the Customizer but it didn’t take. I also tried adding it to the Enhanced Text widget and that didn’t work either. Am I putting it in the correct location? Should I be adding this to the file itself?
I’m going to call it a day and leave the original contact widget on the home page for now since I need something to present to my client tonight but I can try working on this more tomorrow.
Thanks,
AllisonMay 3, 2016 at 17:19 #36669Bill RobbinsModeratorAdding that to the Custom CSS should do the trick. You could also wrap it inside a set of style tags in the text widget. It should only affect the home page though, so I wouldn’t expect to see it make any changes to the test page. That said, since it wasn’t on the home page, I can’t say for certain that it’s correct, unfortunately.
May 4, 2016 at 13:49 #36704Allison DeerrParticipantThis reply has been marked as private.May 4, 2016 at 17:16 #36707Bill RobbinsModeratorPerfect. Let’s make some adjustments. First in the text widget, change the content there to be like this:
<div class="vcard"> <h3 class="widget-title main-title">Visit Us</h3> <ul class="address"> <li class="fn">Swedish American Museum</li> <li class="adr">5211 N Clark St</li> <li class="locality">Chicago, IL 60640</li> <li class="tel">773.728.8111</li> </ul> <h3 class="widget-title open-title">Hours</h3> <ul class="times"> <li class="name"><strong>General Museum</strong></li> <li class="hours">Monday — Friday: 10 a.m. — 4 p.m.</li> <li class="hours">Saturday — Sunday: 11 a.m. — 4 p.m.</li> </ul> <ul class="times"> <li class="name"><strong>Children’s Museum</strong></li> <li class="hours">Monday — Thursday: 1 p.m. — 4p.m.</li> <li class="hours">Friday: 10 a.m. — 4 p.m.</li> <li class="hours">Saturday — Sunday: 11 a.m. — 4 p.m.</li> </ul> <ul class="times"> <li class="name"><strong>Museum Store</strong></li> <li class="hours">Monday — Thursday: 10 a.m. — 4 p.m.</li> <li class="hours">Friday: 10 a.m. — 6 p.m.</li> <li class="hours">Saturday — Sunday: 11 a.m. — 4 p.m.</li> </ul> </div><!-- .vcard --> <div class="contact-map"><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d11864.401080692984!2d-87.6680364!3d41.9766569!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xe543743484c744fa!2sSwedish+American+Museum!5e0!3m2!1sen!2sus!4v1462167887730" width="355" height="400" frameborder="0" style="border:0" allowfullscreen></iframe></div>
and the CSS that goes with it to be like this:
#home-widgets .widget_text.widget { padding: 0; width: 100%; } #home-widgets .widget_text .vcard { float: left; width: 32%; padding: 20px; min-height: 360px; } #home-widgets .widget_text .contact-map { float: right; width: 66%; min-height: 535px; overflow: hidden; } #home-widgets .widget_text .contact-map iframe { width: 100%; margin-bottom: -4px; } #home-widgets .widget_text ul { list-style-type: none; margin-left: 9px; } #home-widgets ul.address{ margin-bottom: 20px; } #home-widgets .open-title.widget-title { margin-top: 0; } #home-widgets .widget_text li { list-style-type: none; } #home-widgets .widget_text .fn { font-weight: 700; } @media only screen and (max-width: 767px) { #home-widgets .widget_text .vcard, #home-widgets .widget_text .contact-map { float: none; width: 100%; min-height: none; } #home-widgets .widget_text .contact-map { padding: 30px; } }
See how that works out now.
Take care,
BillMay 4, 2016 at 17:17 #36708Bill RobbinsModeratorOne more thing. To keep the map even with the list of times next to it, you’ll want to make it a bit taller too. You may need to play around with the height just a bit to get it right.
May 10, 2016 at 14:09 #36771Allison DeerrParticipantHi Bill,
I finally got around to making these adjustments and it worked perfectly. Thanks again for all your help!
Allison
May 10, 2016 at 14:52 #36772Bill RobbinsModeratorHi Allison,
Glad to hear that did the trick 🙂
Bill
-
AuthorPosts
- The topic ‘Contact Widget’ is closed to new replies.