Design Chemical

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

4 Comments

• 
  ToniM 2011 Sep 26 at 5:54 pm

  I LOVE C.D. plugins! If we manage to raise some cash I am going to ask that we donate some!

  Thank you both for these invaluable explanations about this, I managed the vertical tab on your Slick Contact forms, but I am afraid I am not sufficiently proficient at HTML/CSS3 to attempt the IE workaround, though, I’d only fumble it! (yet most of our community will use that as their browser, so I would need it).

  I tried adding the .dc-slick .tab rule to our theme, but then realised that I have another problem: 2 menus. Unfortunately the C.D. fix creates a single rule that can only pick up one tab.

  If the above integration is imminent, I’ll wait for that, else, could you suggest a temporary workaround, so I can put both menu tabs on the margins?

  Thank you very much for your time.

  Best regards.

  Toni Massari, Bristol, UK

  Reply
  • 
    Lee 2011 Oct 02 at 12:04 am

    Hi,

    You can make the CSS more specific for each tab so it targets the individual menus by using the ID of the menu instead:

    #dc-slick-4 .tab – for the left-hand menu on your site

    #dc-slick-3 .tab – for the left-hand menu on your site

    Reply
• 
  Josh Johnson 2011 Jul 20 at 9:57 am

  First off, thanks for the great plugins!

  Second, I wanted to add that it is possible to have vertical text (rotated text) using HTML + CSS3 alone. Granted this will probably only work in Webkit, Firefox 3.5+, IE 9, and Opera 11+ but through a little searching you can find sites that can help with IE text-rotation using the

  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

  option

  here’s the CSS3 styling I used to rotate my tab text

  /* Positioning for tab and alignment */
  .dc-slick .tab {
    cursor: pointer;
    font-size: 12px;
    line-height: 12px;
    background: #333;
    padding: 10px;
    color: #fff;
    font-weight: bold;
    font-size:20px;
    width:40px;
    height:130px;
    padding:0!important;
  }
  .dc-slick .tab span {
    display:inline-block;
    margin: 55px 0 0 -25px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
  

  Reply
  • 
    Lee 2011 Jul 20 at 1:11 pm

    Hi,

    Thank you for your suggestions. We have been looking at options to add rotated text to the plugin and this will definitely help with that. Hopefully we can add it in the near future

    Reply