How to add a side/floating Contact button to WordPress site

Hi,
I was told to remove the contact menu link and place it as a button by the left side as a side/floating button, how can you aid me solve this? Screenshot: http://awesomescreenshot.com/09656x9sf3
http://www.kaisteventures.com/kaiste1/

Regards

  • Adam Czajczyk

    Hey Barni!

    Ooops, I don't know how this could happen but I read "login" instead of "contact". A real mystery... :slight_smile: I'm sorry!

    Let's go another way then! This will include simple CSS and template editing so it would be great if you could work on your theme's child theme. Here's a guide on creating WP child theme:

    https://premium.wpmudev.org/blog/how-to-create-wordpress-child-theme/

    Add this HTML code (it will be the box itself) to your header.php or footer.php file of your child theme:

    <div id="floatingbox">
    <a href="http://www.kaisteventures.com/kaiste1/contact-us">CONTACTUS</a>/</div>

    Next step is to add CSS rules to child theme's style.css file. This will make the box "float" and "stick" to the left edge of the screen:

    #floatingbox {
    position: fixed;
    left: 1px;
    top: 100px;
    width:80px;
    height:80px;
    z-index:9999;
     }

    You may want to adjust position and size of the box by adjusting "top", "left", "height" and "width" values.

    One last step would be to make the link look like a button. Here's an example:

    #floatingbox a {
      font-family: Arial;
      color: #ffffff;
      font-size: 20px;
      background: #e04226;
      padding: 10px 20px 10px 20px;
      text-decoration: none;
    }
    
    #floatingbox a:hover {
      background: #e04226;
      text-decoration: none;
    }

    This button code was generated with this generator:
    http://css3buttongenerator.com/

    It's a handy tool that you may want to use to make your "Contact button" look whatever you like. Once you got the code just replace every occurrence of ".btn" with "#floating a".

    I hope that helps!

    Cheers,
    Adam

  • Adam Czajczyk

    Hey Barni!

    I've visited your site and I can see it's working, I'm happy I could help! Let's now make it even better then :slight_smile:

    Please replace this code

    #floatingbox {
    position: fixed;
    left: 1px;
    top: 100px;
    width:80px;
    height:80px;
    z-index:9999;
     }

    with this

    #floatingbox {
    position: fixed;
    left: 1px;
    top: 250px;
    width:80px;
    height:80px;
    z-index:9999;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    padding:10px;
    }

    I hope that helps!

    Cheers,
    Adam

  • Adam Czajczyk

    Hey Barni!

    1. To add some more paddings replace this line inside "#floatingbox {":

    padding: 10px;

    with

    padding: 10px 10px 10px 10px;

    Replace the 10px values with your own, remembering the the order is as follows: top padding, right padding, bottom padding, left padding. For example, to make set top padding to 25px, right to 15px, bottom to 10px and left to 20px the line would go:

    padding: 25px 15px 10px 20px;

    A thing worth noting here is that in case of this particular button everything is rotated 90 degrees counterclockwise.

    2. Hover effect.

    Adjust this part of code that I gave you previously:

    #floatingbox a:hover {
    background: #e04226;
    color:#FFFFFF;
    text-decoration: none;
    }

    Currently it's set to the same colors for background and text as the button. You may change the "#e04226" value to other color for background and "#FFFFFF" (white) value for text. Here's a handy color value generator (see screenshot):

    http://www.colorschemer.com/online.html

    3. Twitter text

    The screenshot you've attached isn't available but I believe I know what are you referring to. This code should get rid of it:

    .twitter_feeds_two {display:none;}

    Cheers,
    Adam

  • Adam Czajczyk

    Hey Barni!

    I'm sorry, may fault. I should have been more clear about it. You've added paddings to

    #floatingbox a {

    rule set (which is a set of rules for link only) instead of

    #floatingbox {

    which is a box itself.

    Let me then give you an entire code with adjustments included once again. I've also included comments in the code, you may leave them intact:

    /* the rules below create the floating box and rotate it 90 degrees counterclockwise */
    
    #floatingbox {
    position: fixed;
    left: 1px;
    top: 250px;
    width:80px;
    height:80px;
    z-index:9999;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    padding: 25px 15px 10px 20px;
    }
    
    /* the rules below a related to the "Contact Us" link only */
    
    #floatingbox a {
      font-family: Arial;
      color: #ffffff;
      font-size: 18px;
      background: #e04226;
    padding: 25px 15px 10px 20px;
      text-decoration: none;
    }
    
    /* the rules below are for hover effect */
    /*please change colors as described before */
    /*in order to see the effect */
    
    #floatingbox a:hover {
    background: #e04226;
    color:#FFFFFF;
    text-decoration: none;
    }

    I think you do not need add any other code to this for the floating box. Instead just adjust parameters such as:
    - "top" and "left" to position the box on page
    - "background" and "color" to change background color and text color
    - "padding" (as described before) to add paddings around the link

    Cheers,
    Adam

  • Adam Czajczyk

    Hey Barni,

    I'm sure it can, we're just missing something here.

    I have visited your site once again and I can see that the box is now looking fine and including a word 'Contact" only. It also does feature a nice "on hover" effect, so it seems that putting a longer "Contact Us" text is the only thing that left, am I right?

    Let's try one more time then :slight_smile:

    Please change the link string to "Contact Us" and then again replace this CSS code:

    #floatingbox {
    position: fixed;
    left: 1px;
    top: 250px;
    width:80px;
    height:80px;
    z-index:9999;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    padding: 25px 15px 10px 20px;
    }

    with this one:

    #floatingbox {
    position: fixed;
    left: -85px;
    top: 250px;
    width:220px;
    height:80px;
    z-index:9999;
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    padding: 25px 15px 10px 20px;
    margin:0!important;
    }

    I've attached a screenshot for you so you could see how this code works when I'm checking it via browser.

    Cheers,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.