Community Forums › Forums › Archived Forums › Design Tips and Tricks › Emphasize Widget Like Price Tables in Altitude Pro
Tagged: Altitude Pro, emphasize, price table, widgets
- This topic has 13 replies, 4 voices, and was last updated 8 years, 7 months ago by Vasilis.
-
AuthorPosts
-
June 26, 2015 at 10:56 pm #157640VasilisMember
Hello awesome people!
I have a question about the Altitude Pro theme and the way widgets work there.
My website is http://cleancar.me
If you check there is a price table already using the home page widget arrangements from Altitude Pro
Now my question is , how can I make one of the 4 price tables to be emphasized (promoted more) like in the photos below
- http://cdn.tripwiremagazine.com/wp-content/uploads/2012/04/free-professional-pricing-tabel-psd1.jpg
I would like to make my number 3 price table to be more emphasized as the most popular packet.
Is this possible via Altitude Pro theme and how?
Kind Regards
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 27, 2015 at 9:29 am #157676emasaiParticipantYou could add a box shadow around the 3rd element:
#text-6 .widget .widget_text{
box-shadow: 0 0 20px #000;
}
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comJune 30, 2015 at 1:55 am #157900VasilisMemberHey Emasai
Thanks for your reply
You mean add this CSS into my styles file?
How would this define only the fourth widget of the fourth widget area on homepage?
Thank you very much
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
June 30, 2015 at 7:48 am #157923emasaiParticipantYes add it to style.css, it targets #text-6 which is the Rich price box.
Need Website Customization or a Responsive CSS fix? Contact Me
Lynne emasai.comJuly 1, 2015 at 3:47 am #158017VasilisMemberHey Emasai,
I've added this code in my style.css but I can't see anything happening...
Any idea?
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
July 3, 2015 at 10:39 pm #158320TomParticipant@Vasilis Lynne has it correct, just a slight tweak to the CSS selector should help. I also made the shadow your highlight color. Style your own with this easy to use tool.
#text-6.widget.widget_text { -webkit-box-shadow: 0px 0px 20px 10px rgba(118,193,79,1); -moz-box-shadow: 0px 0px 20px 10px rgba(118,193,79,1); box-shadow: 0px 0px 20px 10px rgba(118,193,79,1); }
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]July 3, 2015 at 10:58 pm #158321VasilisMemberOk great , that did the trick
Appreciate it.
However If I would like to make a little more 3d'ish...like the example images I have before?
Or put a shadow around the box?
What would your suggestion be on this?
Thank you!
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
July 3, 2015 at 11:53 pm #158324TomParticipantOr put a shadow around the box?
That *is* a box shadow 🙂
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]July 3, 2015 at 11:56 pm #158325VasilisMemberBut in this case the shadow appears ONLY on the right and under side of the box...
What if I want to make it appear all around the box?
Left, right, under & above in order to make it more 3d'ish?
Thank you
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
August 3, 2015 at 11:34 pm #161361VasilisMemberAny new ideas for this?
How about creating a 3D'ish box shadow around a specific price box in altitude pro?
Something to make a specific box more emphasized to focus customers on this?
Kind Regards
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
August 4, 2015 at 9:51 am #161388ChristophMemberHmm...
Lynne and Tom gave you the code for a 3D'ish looking colored box-shadow around a specific price box...
I don't understand what else you want?
August 4, 2015 at 11:23 pm #161454VasilisMemberWhat they gave me is a code that works for only 2 sides of the 4 sided box...
What I want is a code that can work around ALL sides of the box + can change it's color.
Kind Regards
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
August 4, 2015 at 11:32 pm #161455ChristophMemberDid you even try the code?
The box shows on all four sides.
I believe you are confusing how the values for margin and padding are written in short hand and what the values of box-shadow are. http://www.w3schools.com/cssref/css3_pr_box-shadow.aspThe color can be adjusted by changing the values after rgba(
And Tom gave you the link to a tool to create your own box-shadow.
August 5, 2015 at 1:12 am #161465VasilisMemberLol....
My Safari is not reading this...(do you know why?)
That's why I never saw it...
Apologies
Thanks once again to all of you 🙂
Marketing & Business Development Consultant Located in Bangkok, Thailand @ PowerHouse Consulting Group
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.