Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 2, 2014 at 10:02 pm #312515
    tgdigitalsolutions

    I’ve got a web page (responsive pricing table and some other info) I put together using Bootstrap framework for what was going to be a separate website. So the whole site was being built with Bootstrap as the core.

    Now the project has changed and instead they want to incorporate the pricing page into our existing website, which was done with Enfold WordPress theme.

    I’d prefer not to have to redo that pricing page as I’m not really a coder per se, so it can take quite a while for me to get things figured out.

    Is there a way that I can just plug in the appropriate references for Bootstrap (and Font Awesome since I used those for icons) and leave the page pretty much intact?

    Thanks in advance!

    Tom

    September 3, 2014 at 3:58 am #312609
    Devin

    Hey tgdigitalsolutions!

    Probably not :(

    I *love* working with Bootstrap but there are going to be conflicts which you’ll need to resolve one way or another. So it would be less time consuming I would guess to copy over the raw HTML into a code element and then re-style it with css that doesn’t conflict with any theme rules.

    You could *try* adding the code for it into a code element and then enqueing bootstrap but it’ll be a gamble on what/any conflicts might pop up.

    You could also try using the themes pricing table too: http://kriesi.at/themes/enfold/shortcodes/pricing-and-data-tables/

    Regards,
    Devin

    September 3, 2014 at 6:29 pm #313047
    tgdigitalsolutions

    thanks Devin.

    Yeah, those Enfold pricing tables look pretty close to what I had done (the top set on the page you sent) so those should work fine with some minor adjustments to colors. But all in all, very much the same concept.

    Are there some instructions on how to create those various table styles within Enfold?

    September 4, 2014 at 10:56 pm #313630
    Devin

    Once you add in the pricing table shortcode/layout builder element to the page it should be pretty straight forward since the tables are limited in what they can do.

    If you do have questions though let us know.

    September 4, 2014 at 11:36 pm #313657
    tgdigitalsolutions

    Adding the table element is easy enough (had already done that). However, figuring out exactly how to change it from the default colors and do things like add icons next to text,etc. does not seem straight forward and I haven’t been able to find any documentation. I’m under a bit of time crunch so hopefully you can steer me in the right direction. Here’s an image of the general idea I’m shooting for:
    Table Sample

    Here’s a link to the actual sample page:
    Sample website page

    Thanks!

    September 6, 2014 at 2:17 am #314251
    Josue

    Hey!

    You can target pricing table columns individually this way:

    .avia-table .pricing-table-wrap:nth-child(1) .pricing-table .avia-heading-row{
background: red;
}
.avia-table .pricing-table-wrap:nth-child(2) .pricing-table .avia-heading-row{
background: green;
}
.avia-table .pricing-table-wrap:nth-child(3) .pricing-table .avia-heading-row{
background: blue;
}

    Cheers!
    Josue

    September 6, 2014 at 2:54 am #314268
    tgdigitalsolutions

    Thanks. That part I’d been able to figure out thru CSS trial and error.

    The one that I’m stuck on now is how to make the cells that currently have a slight gray background be white instead. I’ve tried the nth-child you suggested in my other topic thread.

    What I’m not having any luck doing while attempting that is how to NOT affect the first row (the header with the red / green / red colors). If I do the nth-child(odd), for example, it removes the header background as well.

    Is there a way to do the nth-child and somehow tell it to skip the first one and instead only apply to 3, 5, 7, 9, etc.?

    September 10, 2014 at 2:07 pm #316561
    Devin

    You could add a second rule right after those for first-child and put !important on it.

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.