Pricing table active option

StatusIDPriorityType
Closed9134NormalZero Theme HTML
Profile Reply
fibreiv Client

Is there a way to make one of the pricing columns active without hovering over it.  I want the recommended option to appear as if I were to hover over it with the mouse.

Thanks,
Brett

Replies

User Description Posted On
Shindiri Support team Administrator

Greetings,

 

It is possible, though it will require a little bit of copying.

Can you please send us link to your site, so we can provide you code that you'll only have to paste to your HTML / CSS files?

 

Kind regards,

Br0
fibreiv Client

I don't have a page with the pricing table on it yet. I was going to add it to one of my pages but decided not to but there will be some pages I need it.  Can you just modify your documentation example to do this?  Thanks!

<div class="pricing-body-wrap row">
  <div class="col-md-4 margin-top24">
    <ul class="pricing-list margin0 no-style text-center relative padding0">
      <li class="white-border headline logo-price text-left"><img src="images/pricing/logo.png" alt="" /></li>
      <li class="white-border pricing-text"><div class="inline-block"><div class="pricing-summ">choose <span class="white-letters">your</span> plan</div></div></li>
      <li class="odd-elem">Available Space</li>
      <li class="even-elem">Bandwidth</li>
      <li class="odd-elem">e-mail Accounts</li>
      <li class="even-elem">Subdomains</li>
      <li class="odd-elem">24/7 Tech Support</li>
      <li class="white-border even-elem">Enhanced Security</li>
      <li class="pricing-button-wrap">
        <a class=" pricing-button invisible" href="#">Buy Now!</a>
      </li>
      <li class="opacity-effect"></li>
    </ul>
  </div>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-3 margin-top24">
        <ul class="pricing-list margin0 no-style text-center relative pricing-items padding0">
          <li class="white-border headline">GOLD</li>
          <li class="white-border pricing-text"><div class="inline-block"><div class="pricing-summ"><span class="price white-letters"><span class="price-valute">$</span>99<br /><span class="darker-letters">per month</span></span></div></div></li>
          <li class="odd-elem">unlimited</li>
          <li class="even-elem">1 TB</li>
          <li class="odd-elem">unlimited</li>
          <li class="even-elem">unlimited</li>
          <li class="odd-elem">yes</li>
          <li class="white-border even-elem">yes</li>
          <li class="pricing-button-wrap">
            <a class=" pricing-button" href="#">Buy Now!</a>
          </li>
          <li class="opacity-effect"></li>
        </ul>
      </div>
      .......
      <div class="clearfix"></div>
    </div>
  </div>
  <div class="clearfix"></div>
</div>
Shindiri Support team Administrator

Greetings,

 

Well, there is no need to modify anything here except adding on main wrapper class or ID.

For example, add id="active-table-cell" to one of the cells you want to be active (they are <div class="col-md-3 margin-top24">);

And then, at the bottom of the style.css simply place all of this code:

#active-table-cell .light-variant ul.pricing-list.pricing-items li.headline, #active-table-cell .light-variant ul.pricing-list.pricing-items  li a.pricing-button, #active-table-cell .light-variant ul.pricing-list.pricing-items li.pricing-text {background: #2e373c !important;}
#active-table-cell ul.pricing-list.pricing-items li.pricing-text .price-valute, #active-table-cell ul.pricing-list.pricing-items li.pricing-text .darker-letters {color: #fff !important;}
#active-table-cell [class*="col-md"] ul.pricing-list.pricing-items {transform: scale(1.1); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); -moz-transform: scale(1.1); box-shadow: 0 0 16px #000; z-index: 50;}

Feel free to change values for everything here, since it will help you customize all effects you get on hover.

 

Kind regards,

Br0

× This ticket is closed.