Karuna How to add a three column page

  • Unknown's avatar
    cfsampson · Member ·

    I would like to display pricing, in the Karuna theme, as it looks on this page https://www.freshbooks.com/pricing

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    You can create an HTML table

    Table coding for wordpress.com users

  • staff-loquaciousloon · Staff ·

    I agree with @timethief, you’d need to build it by hand, so some comfort with HTML and CSS will come in handy.

    This sounded like fun, so I put together a quick similar setup. It’s not identical, and I’ve used different colors to better match Karuna’s default color scheme, but it should give you a good starting point.

    Note that this uses Custom CSS, as doing something like this with only inline styles would pretty tedious!

    First, the HTML. This should go into the HTML editor of your page.

    <div class="pricing-table">
<div class="pricing-card">
<h2 class="card-name">One</h2>
<div class="price">$15 <span class="pay-term">/Mo</span>
<div class="description">This is the first really cool thing.</div>
<a class="button" href="http://WordPress.com">Learn More</a></div>
</div>
<div class="pricing-card special">
<h2 class="card-name">Two</h2>
<div class="price">$30 <span class="pay-term">/Mo</span>
<div class="description">This is the second, cooler thing.</div>
<a class="button" href="http://WordPress.com">Learn More</a></div>
</div>
<div class="pricing-card">
<h2 class="card-name">Three</h2>
<div class="price">$45 <span class="pay-term">/Mo</span>
<div class="description">This one is just the coolest.</div>
<a class="button" href="http://WordPress.com">Learn More</a></div>
</div>
</div>

    Then, under My Site > Customize > CSS, this will create handle the alignment and colors. This doesn’t impact the editor, so you’ll want to preview the page to see the actual pricing cards.

    .pricing-card {
    width: 90%;
    margin: 0 auto;
    border: 2px solid #ccc;
    text-align: center;
    border-radius: 20px;
    box-shadow: 2px 2px 1px #eee;
    overflow: auto;
    margin-bottom: 25px;
}
.pricing-card .card-name {
    background-color: #6636cc;
    color: white;
    margin-top: 0;
}
.pricing-card .price {
    margin: 25px auto;
    font-size: 2em;
}
.pricing-card .price,
.pricing-card .description {
    padding: 0 10px;
}
.pricing-card .price span,
.pricing-card .description {
    font-size: .5em;
}
.pricing-card .button {
    display: inline-block;
    margin-top: 25px;
}
@media screen and (min-width: 800px) {
    .pricing-card {
        width: 30%;
        float: left;
    }
    .pricing-card:nth-of-type( 3n + 2) {
        margin: 0 5% 5%;
    }
    @media screen and (min-width: 800px) {
        .pricing-card {
            width: 30%;
            float: left;
        }
        .pricing-card:nth-of-type( 3n + 2) {
            margin: 0 5% 25px;
        }
    }

    On smaller screens, it switches down to a single column to avoid things getting too squished.

    Hopefully this gets you part way to your goal, and you can tweak it a bit to fit your specific needs :)

  • The topic ‘Karuna How to add a three column page’ is closed to new replies.