Community Forums › Forums › Archived Forums › Design Tips and Tricks › How to modify Pricing Tables in Academy Pro theme for different purposes
- This topic has 2 replies, 1 voice, and was last updated 3 years, 6 months ago by copious.
-
AuthorPosts
-
October 3, 2020 at 5:44 am #501302copiousParticipant
When I saw the demo of the Academy Pro theme, I loved the design, thought it would be perfect for the website I need to redesign and immediately envisioned an alternate use for the pricing tables. I'm redesigning my friend's driving school website, and thought the pricing tables would work well for displaying the content for four phases of graduated licensing.
I got the raw code and practiced with it on a new page, using the two column design twice (since they were nice and wide to accommodate the amount of content I needed). I deleted the 3 and 4 column templates. Aside from a few styling glitches, which I'll address later, the bigger issue is that when I followed the instructions and made a new page, and selected the "Pricing" template from the Page Attributes drop-down, it worked fine on its own, but not when integrated to an existing page. Here it is on its own:
http://wendysdrivingschool.com/wds/phases/
And here it is integrated into an existing page, where I wanted the pricing tables to appear below the content already on that page. Only the first of the four boxes showed up. It also centered ALL of the content on the entire page (I would like it left justified as it was before), and made it even wider, as wide as the home page. In the Theme Settings>Site Layout, I've selected Full Width Content, but it's wider on the home page, and this Courses page than on all other pages, not sure why there's an inconsistency:
http://wendysdrivingschool.com/wds/courses/
Any suggestions on what might be causing this? I'd love to use these pricing boxes for the content shown, and hoping there's a way to make it work. I don't make websites that often, but I've made a few WordPress websites over the years, so I know my way around, and tried hard to get as far as I could before asking for help.
Occasional WordPress designer, learning more with each website!
October 3, 2020 at 6:05 am #501303copiousParticipantI'm not sure if I should create another topic or just add to this - since it's related to the pricing tables, but are more minor glitches I wanted to take care of, and I'm not sure how. The instructions were great, I learned a lot from them, but they don't cover the following:
- Add red line around all boxes used as pricing tables (currently only the right side box has it, when I tried to copy the code
<div class="one-half featured">
instead of
<div class="one-half first">
it made the two tables stack vertically with no spacing between them. There must be a way to keep the same spacing but just add the red line around the left side boxes (pricing tables).
- Within the pricing table boxes, how can I left justify everything inside boxes except titles and descriptions (first two lines, for example "Phase 2
Guided Driving" should stay centered), but all other content should be left justified.- Can the bullets be made visible? Possibly red to match the lines around the boxes). Most of the content within the boxes is actually an unordered list, but the bullets do not appear but I would like them to.
- How to have a space between paragraphs. I tried and it worked if I added it in the unordered list, but not elsewhere. I removed it since it's probably bad practice, there must a better way to add a blank line before or after something. For example, in the Phase 1 box "Phase 1 is a minimum..." should be a new paragraph, but it's stuck right beside the end of the previous sentence. I didn't want to start messing with the HTML as it's usually preferable to fix with CSS.
- Could the horizontal gap between the pricing boxes be the same as the vertical gap?
Once again, thank you in advance for any suggestions or help you may be able to offer.
Occasional WordPress designer, learning more with each website!
October 3, 2020 at 6:07 am #501304copiousParticipantI should have included a link to the demo theme for quick reference, it's the Academy Pro theme, here's the direct link to the Pricing Tables page:
https://demo.studiopress.com/academy/sample-page/pricing-table/
Occasional WordPress designer, learning more with each website!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.