Images in the Pricing Tables

• furious

  said

  Is there a way to add images to the pricing tables, styled preferably.

  Thanks,
  Walter

  http://www.furiouscigars.com

• landon

  said

  Hi there,

  could you please provide a link to the page with the pricing table?

  Thanks,
  Landon

• furious

  said

  I’m not currently using them, but was thinking of doing so. Just asked the question before I go and set up a bunch of pages then have them all jacked up….lol…..can you help?

• andy

  said

  It should work just fine. The pricing tables are styled DIV tags so any HTML element can be included inside.

  Before implementing it on a bunch of pages I’d give it a try. Create a pricing table and in the content area where you add the description, insert your image. Make sure the image is sized properly to fit the container and allow for the padding when you determine the size.

• furious

  said

  So the styled image shortcodes won’t work on this? Just wondering, would be cool to use with styled image and lightbox. I will play with it some.

  Awesome support forums bro…thx.

  Walter
  http://www.furiouscigars.com

• andy

  said

  Shortcodes will also work if you wanted to use the styled shortcode. You would need to set the width to account for the styled image container as well, but I don’t see any reason they wouldn’t work.

  Glad you like the forums I’ve just added some thread tracking features so you can keep up with replies to your posts and such. There’s even more on the way!

• scott74

  said

  I am trying to do this also…i am trying to use the thumbs up like button next to content (text) but I cannont figure out how to align properly…

  [icon size=”medium” class=”alignleft” icon=”facebooklike”]Force the like (aka..fangate)
  https://fanpage4me.com/pricing/

  appreciate any help to get the icons to lign up next to text evenly

  also any input on opening the icons inline or in a lightbox describing each option in pricing table would be cool or a tool tip?? is this all possible….. need to get the alignment right first..

• andy

  said

  @scott74

  You could use something like this:

  <a href="#ShowDetails-123" class="popup icon24 iconFile acrobat" style="width: auto; padding: 0 0 0 30px; line-height: 24px;"> Item 123 Details</a>
   
  <!-- My popup with details for item 123 -->
  <div class="hidden">
    <div id="ShowDetails-123">
      These are the details in the popup
    </div>
  </div>
  

  In the link, change the classes “iconFile acrobat” to the icon you want (in the CSS you’ll notice there is an icon group for each type so you must have the right “icon[group]” to match the icon name. For example “iconSocial digg” or “iconSymbol check“.

  To load the popup you set the “href” of your link to “#[ID of your hidden container]” so if you set the ID of the DIV inside the popup to “Product-6” the “href” would read “#Product-6“.

• scott74

  said

  tried that but not aligning at all.. whats the icon24 for? I dont see this stuff on http://themeforest.net/item/mingle-multipurpose-wordpress-theme/full_screen_preview/235056

  right now the Fangate link is sitting ontop of the thumbs up icon all the way to the left of the pricing table..

  Fangate

  http://codepaste.net/ypu4ii

  These are the details in the popup
• andy

  said

  You did not do what I said… Your code leaves out all the styles from the link style="width: auto; padding: 0 0 0 30px; line-height: 24px;" I didn’t include that for fun. It’s why your image is not placed beside the image and is on top instead.

  As I suggested before, look in the CSS file and you’ll understand the “icon24″ and other classes related to the image.

• andy

  said

  You don’t see it on the demo site link you provided because it’s custom. You’re asking how to do something custom and I’m providing custom code to answer your question. You will have to experiment and figure out how to make changes, add content and customize the theme as you need.

• scott74

  said

  sorry…. this (style=”width: auto; padding: 0 0 0 30px; line-height: 24px;” ) I did not see anywhere in the above example