Contact Widget
Support Area › Forums › Epic › Contact Widget
- This topic has 26 replies, 3 voices, and was last updated 11 years, 5 months ago by Bill Robbins.
-
AuthorPosts
-
July 19, 2012 at 19:15 #6829David WollParticipant
The contact widget – right now it reads “Service Times,” but there are no service times listed. How can I edit this contact widget?
Maybe I missed it, but the instructions say “more about this later,” but I couldn’t find anything more later.
Maybe I’m missing something obvious?
Thanks in advance, Bill
DavidJuly 19, 2012 at 20:08 #6830Bill RobbinsModeratorDavid,
Great question. Where it says “Service Times” is actually the title of the widget. You could use it to say “Service Times” or anything else (you can even leave it blank). In the demo we have it saying “Connect With Epic” (demo).
If you run into any trouble, let me know,
BillJuly 25, 2012 at 16:45 #6881David WollParticipantThanks, Bill. My question still is, how do I change it? Where?
July 25, 2012 at 17:22 #6882Bill RobbinsModeratorDavid,
It’s the first field in the left hand column when you’re working with the contact widget. Here’s what it looks like in the demo (it’s the title where it says “Connect With Epic”).
If you run into trouble, let me know,
BillJuly 25, 2012 at 17:24 #6883David WollParticipantI see it now, thanks for patiently helping.
July 25, 2012 at 17:32 #6884Bill RobbinsModeratorNo problem at all. Glad you found it.
September 24, 2012 at 14:07 #7691Dorian KovacsParticipantHi Bill,
I try to move the hours and contact widget from left to right in Foxy theme. But unfortunetly I’m lost. I tried to overwrite the h4 widget code, and many other in the editor, but nothing worked. Could you help me?
Thanks a lot,
DorianSeptember 24, 2012 at 14:18 #7692Bill RobbinsModeratorDorian,
You can right align the text in you widgets. Here’s how:
- Go to the theme options page and select the styling tab.
- Select “yes” at the top to include custom styling.
- Scroll down to the bottom and paste this in the “Custom CSS” box:
.widget { text-align: right; }
That will change all of your widgets to be right aligned. If you’d only like to do that for the contact widgets, then you’d use this snippet instead:
.widget_ot_contact { text-align: right; }
If you have any questions or trouble, let me know,
BillSeptember 25, 2012 at 13:26 #7696Dorian KovacsParticipantBill,
Thanks for your quick reply. I tried both of your advices, but non of them worked. Still lost… 🙁
September 25, 2012 at 13:57 #7697Dorian KovacsParticipantI copied the widget’s whole code here, maybe I screwed up something before…
h4.widget-title {
float: right
background-color: #640e68;
margin: -10px -10px -10px;
padding: 10px;
text-transform: uppercase;
}aside.sidebar .widget p,
aside.sidebar .widget li {
font-size: 12px;
margin-bottom: 3px;
}#searchform label {
display: none;
}#searchform input {
border: none;
}#searchform input#s {
width: 90px;
font-size: 13px;
line-height: 1.2;
}input#searchsubmit {
border: none;
color: #fff;
background-color: #971012;
font-size: 11px;
line-height: 1.2;
padding: 3px 8px;
cursor: pointer;
-webkit-appearance: none;
}.widget ul {
margin: 0;
list-style: none;
}ul.adr, ul.hours {
margin-bottom: 15px;
}/* @end */
September 25, 2012 at 14:31 #7698Bill RobbinsModeratorDorian,
Just to make sure I understand, you’re wanting to make the widget have text that’s right aligned. If you just want to make the contact widget’s title be right aligned, you’d use this:
.widget_ot_contact h4.widget-title { text-align: right; }
If you still have trouble, or that’s not what you’re wanting to do, let me know. If you could also send a link to where you’re working with it, I’ll be glad to take a look and see if something is overriding that.
Bill
September 25, 2012 at 14:37 #7699Dorian KovacsParticipantYes, you’ re right, I want the widget right alined. And I tried exactly what you told me to. I copied the code you wrote to the theme options styling tab custom css box. And nothing happened. The truth is that I am using localhost now, so my webpage is not published yet, so I cannot send you the link.
That’s why I copied the code from Stylesheet. I thought it would be helpful.
Dorian
September 25, 2012 at 14:44 #7700Bill RobbinsModeratorGotcha,
In the code you pasted above, you can change this:
h4.widget-title { float: right background-color: #640e68; margin: -10px -10px -10px; padding: 10px; text-transform: uppercase; }
to this:
h4.widget-title { text-align: right; background-color: #640e68; margin: -10px -10px 10px; padding: 10px; text-transform: uppercase; }
and see if that helps. The Custom CSS box may be affected on your site by a bug in WordPress 3.4.2 that occasionally causes that to not output. They have a core fix for it in 3.5.
If you have any trouble, let me know,
BillSeptember 25, 2012 at 14:47 #7701Dorian KovacsParticipantNope, still not working. Sorry.
September 25, 2012 at 14:53 #7702Bill RobbinsModeratorThen something else is causing the problem outside of this code. When I apply this snippet:
h4.widget-title { text-align: right; background-color: #640e68; margin: -10px -10px 10px; padding: 10px; text-transform: uppercase; }
to bottom of the style.css file in the demo, I end up with this:
September 25, 2012 at 15:09 #7704Dorian KovacsParticipantOh, sorry. We misunderstood each other. You were right. The TITLE is on the right side on my page as well. But I want the whole box to the right side of the page. From the title to the end of the box (info@foxtheme.com). Sorry!!!
September 25, 2012 at 15:40 #7705Bill RobbinsModeratorAlight. Here’s how to change the entire contact widget then. First change the widget title back to this:
h4.widget-title { background-color: #640e68; margin: -10px -10px 10px; padding: 10px; text-transform: uppercase; }
Then add this to the bottom of your style.css file:
.widget { text-align: right; }
That’ll align the title and all the content in your widgets to the right.
Let me know if you have any trouble,
BillSeptember 25, 2012 at 17:00 #7706Dorian KovacsParticipantNo, you still didn’t get me. Maybe I was not certain enough. Now all the text in the widget went right in the box. But I need the whole widget on the right side of the screen. Now it is on the left below the menu. But I need the contact widget on the right side. Is that possible?
September 25, 2012 at 17:22 #7707Bill RobbinsModeratorGotcha,
You can move the entire sidebar (the navigation and the widgets) to the right and the content to the left. To do that, you could use this CSS snippet:
aside.sidebar {
float: right;
}.page-content,
.staff-list {
float: left;
}That would be the easiest option. I wouldn’t recommend separating the navigation from the widgets with one on the left and the other on the right as you won’t have enough space on smaller screens.
September 26, 2012 at 01:21 #7708Dorian KovacsParticipantYeah, got me! 🙂 That’s what I wanted. Thanks a lot. Sorry for being so dumb. You told me not to separate the contact widget from the navigation bar. But I alredy had to. The thing is that the webpage’s logo is a huge horizontal one, so I had to separate from the navigation bar and put it on the right side of the screen. All I want is, to put the contact widget below the logo, and leave the navigation bar on the left. I will minimalize the space between the two sides, and the page contain. This way I hope it will fit on smaller screens as well.
September 27, 2012 at 03:52 #7710Dorian KovacsParticipantHi Bill,
Could you please tell me how to seperate the contact widget from the navigation bar?
Thanks in advance!
September 27, 2012 at 10:47 #7711Bill RobbinsModeratorIf you want to keep the navigation on the left and add a contact widget to the right, you’ll need to follow these steps:
- Go to the appearance section and select “edit” to open up the theme editor.
- From the list of files on your right, choose functions.php and look for this spot:
register_sidebar( array( 'name' => __('Page Sidebar', 'organizedthemes'), 'id' => 'sidebar-page', 'description' => __('This sidebar is used only on static pages.', 'organizedthemes'), 'before_widget' => '
', 'after_widget' => '', 'before_title' => '', 'after_title' => '
' ) ); - Right above that paste this:
register_sidebar( array( 'name' => __('Right Sidebar', 'organizedthemes'), 'id' => 'sidebar-right', 'description' => __('New right hand sidebar', 'organizedthemes'), 'before_widget' => '
', 'after_widget' => '', 'before_title' => '', 'after_title' => '
' ) ); - Save your changes.
- Next open up footer.php and paste this:
right above this:
<footer>
- Save your changes.
- Next open up style.css. Scroll down to the bottom and paste this:
#right-sidebar { position: absolute; width: 180px; right: 22px; top: 185px; } #right-sidebar .widget { padding: 10px; margin-bottom: 20px; background: url(images/header-background.png) repeat; } @media only screen and (max-width: 767px) { #right-sidebar { display: none; } }
- Save your changes.
That will add a sidebar on the right hand side.
Let me know if you have any trouble,
BillSeptember 27, 2012 at 14:02 #7712Dorian KovacsParticipantBill,
I bet I’m the worst user ever, but it didn’t work. I did exactly what you told me above, I double checked it, but nothing has changed.
But thanks anyway for the long-term assistance. 🙂
Dorian
September 27, 2012 at 14:34 #7713Bill RobbinsModeratorDid you happen to add the contact widget to the new “Right” sidebar in the widget manager (Appearance > Widgets)? I failed to mention that you were creating a new sidebar area and that you’ll need to add your contact widget to it.
September 27, 2012 at 15:13 #7714Dorian KovacsParticipantCorrect! Just the grey background has lost. Where did it go?
-
AuthorPosts
- The topic ‘Contact Widget’ is closed to new replies.