Themeforest

Adding vertical text to the contact form tab

The best way to add vertical text to the contact form tab (and be compatible across all browsers) is to use a CSS background image.

First create your contact form tab in any graphics program – as a rough estimate you can use the “Contact Us” tab on our contact form, which is 40 pixels wide.

Delete any text in the contact form tab text field in the widget control panel.

In your theme’s style sheet add the following CSS rule:

.dc-contact-slick .tab {
background: url(images/tab_image.png) no-repeat 0 0;
width: 40px;
height: 150px;
padding: 0!important;
}

Change “images/tab_image.png” to be the same file name and path as your own image and set the width and height according to your actual image dimensions.

13 Comments

  • i have solve the problem with the vertical image this way

    .dc-contact-slick .tab {
    width: 40px;
    height: 150px;
    background: no-repeat url(http://www.marinadoralquiler.es/wp-content/images/tellamamos.png)!important;
    padding: 0!important;
    }

  • Hi,

    I have done as described here, but my image is not showing up. I have tried the following:

    uploaded image to: /wp-content/uploads/contact_us.png
    tried path in css:
    /wp-content/uploads/contact_us.png
    wp-content/uploads/contact_us.png

    i alos tried

    uploaded image to: /wp-content/plugins/slick-contact-forms/skins/images/contact_us.png
    used path in css:
    /images/contact_us.png
    images/contact_us.png
    /wp-content/plugins/slick-contact-forms/skins/images/contact_us.png
    wp-content/plugins/slick-contact-forms/skins/images/contact_us.png

    Why is my image not showing up? I’am just about to leave this plugin :(

    • Hi,

      If its not showing then either the path is not correct or the CSS has an error. Try using the full URL – e.g. http://www.domain.com/wp-content/…...

      Make sure that you can browse to the image if you enter the URL in your browser address bar

  • I cannot figure out why when I copy and paste the above code into the stylesheet, that the image will not display. The other parameters of the CSS seem to function (I can adjust the height and width for the image space), however the image will not appear. And, yes, I have double checked to make sure I have the proper path to the image (I have also tried the full URL).

    • If the path is correct then there is no reason why the image shouldnt appear

      • Is there any possible way that the existing wordpress theme could be screwing it up?

        • It may be. Check if your theme’s style sheet also has any CSS rules for “.tab”

      • By the way, amazing plug in. We like it a lot.

  • Great plugin!!! Adding this css rule will result in the fact that all the contact forms on the page (we will be using 2 at the same time) will use these properties. Is it possible to keep it different per form (example the background images needs to be different)?

    • Hi,

      Yes, each instance of the form has a unique ID, which you can use to make the CSS selector more specific. The ID will be different for each site depending on how many other widgets are installed. You can check this by looking at the page source code.

      Substitute the .dc-contact-slick for the form ID. E.g for the top-left form on our demo page this would be:

      #dc-contact-17 .tab {
      background: url(images/tab_image.png) no-repeat 0 0;
      width: 40px;
      height: 150px;
      padding: 0!important;
      }
      
  • Ok – I’ve sorted it – What I have done is edited the source styles directly rather than use my own style sheet and it worked no problem. Hope it helps! Once again great plugin – Thankyou!

  • Great plugin but there are bugs. You cannot chnage the background colour or image as detailed on your FAQs. But its free so shouldn’t complain – just thought you’d like to know.

    • Thats not exactly a bug since its correct behaviour for CSS.

      The selector in the FAQ is not correct if one of the skins is being used since there is a CSS rule in the skin, which uses the ID and therefore takes precedence over just using the class name. One option is to add !important to the rules – e.g.

      .dc-contact-slick .tab {
      background: #000!important;
      }
      

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags