Contact Widget

Support Area Forums Forward Contact Widget

Viewing 15 posts - 1 through 15 (of 15 total)
URL to the page in question: http://beta.swedishamericanmuseum.org
  • Author
    Posts
  • #36643
    Allison Deerr
    Participant

    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!

    #36645
    Allison Deerr
    Participant
    This reply has been marked as private.
    #36650
    Bill Robbins
    Moderator

    Hi 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,
    Bill

    #36653
    Allison Deerr
    Participant
    This reply has been marked as private.
    #36655
    Bill Robbins
    Moderator

    Hi 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,
    Bill

    #36663
    Allison Deerr
    Participant

    Thanks, 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.

    #36664
    Allison Deerr
    Participant
    This reply has been marked as private.
    #36665
    Bill Robbins
    Moderator

    Let’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;
    	}
    
    }
    
    #36666
    Allison Deerr
    Participant

    Hi 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,
    Allison

    #36669
    Bill Robbins
    Moderator

    Adding 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.

    #36704
    Allison Deerr
    Participant
    This reply has been marked as private.
    #36707
    Bill Robbins
    Moderator

    Perfect. 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,
    Bill

    #36708
    Bill Robbins
    Moderator

    One 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.

    #36771
    Allison Deerr
    Participant

    Hi Bill,

    I finally got around to making these adjustments and it worked perfectly. Thanks again for all your help!

    Allison

    #36772
    Bill Robbins
    Moderator

    Hi Allison,

    Glad to hear that did the trick 🙂

    Bill

Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Contact Widget’ is closed to new replies.