Contact Widget

Support Area Forums Epic Contact Widget

Tagged: ,

Viewing 25 posts - 1 through 25 (of 27 total)
URL to the page in question:
  • Author
    Posts
  • #6829
    David Woll
    Participant

    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
    David

    #6830
    Bill Robbins
    Moderator

    David,

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

    #6881
    David Woll
    Participant

    Thanks, Bill. My question still is, how do I change it? Where?

    #6882
    Bill Robbins
    Moderator

    David,

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

    #6883
    David Woll
    Participant

    I see it now, thanks for patiently helping.

    #6884
    Bill Robbins
    Moderator

    No problem at all. Glad you found it.

    #7691
    Dorian Kovacs
    Participant

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

    #7692
    Bill Robbins
    Moderator

    Dorian,

    You can right align the text in you widgets. Here’s how:

    1. Go to the theme options page and select the styling tab.
    2. Select “yes” at the top to include custom styling.
    3. 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,
    Bill

    #7696
    Dorian Kovacs
    Participant

    Bill,

    Thanks for your quick reply. I tried both of your advices, but non of them worked. Still lost… 🙁

    #7697
    Dorian Kovacs
    Participant

    I 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 */

    #7698
    Bill Robbins
    Moderator

    Dorian,

    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

    #7699
    Dorian Kovacs
    Participant

    Yes, 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

    #7700
    Bill Robbins
    Moderator

    Gotcha,

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

    #7701
    Dorian Kovacs
    Participant

    Nope, still not working. Sorry.

    #7702
    Bill Robbins
    Moderator

    Then 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:

    #7704
    Dorian Kovacs
    Participant

    Oh, 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!!!

    #7705
    Bill Robbins
    Moderator

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

    #7706
    Dorian Kovacs
    Participant

    No, 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?

    #7707
    Bill Robbins
    Moderator

    Gotcha,

    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.

    #7708
    Dorian Kovacs
    Participant

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

    #7710
    Dorian Kovacs
    Participant

    Hi Bill,

    Could you please tell me how to seperate the contact widget from the navigation bar?

    Thanks in advance!

    #7711
    Bill Robbins
    Moderator

    If you want to keep the navigation on the left and add a contact widget to the right, you’ll need to follow these steps:

    1. Go to the appearance section and select “edit” to open up the theme editor.
    2. 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' => '

      ' ) );
    3. 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' => '

      ' ) );
    4. Save your changes.
    5. Next open up footer.php and paste this:

      right above this:

      <footer>
    6. Save your changes.
    7. 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;
      	}
      
      }
      
    8. Save your changes.
    9. That will add a sidebar on the right hand side.

      Let me know if you have any trouble,
      Bill

    #7712
    Dorian Kovacs
    Participant

    Bill,

    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

    #7713
    Bill Robbins
    Moderator

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

    #7714
    Dorian Kovacs
    Participant

    Correct! Just the grey background has lost. Where did it go?

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