Columns ordering

Hello, as far as I can see, you are using the template JSN DONA (bootstrap v2) and JSN PageBuilder (bootstrap v3) inside the plan description, right? The latter bootstrap grid can't behave responsive, because it is wrapped by the Emerald Plans table markup. The plans list-template has to be changed or overidden.

I think I can provide a solution... stay tuned...

thanks

Im trying to use this on the emtemplate corrsponding to the group.

Doesnt work. What can I do? Bests

LM

lmarazzo Im trying to use this on the emtemplate corrsponding to the group. ...

Sorry, can't see your last comment. Seems to be stripped-off by the editor. Remember to use "Code-Block" to wrap your markup. Would you mind to re-post again?

Sorry, I had no free-time to check my bootstrap template replacement (override).
Hopefully I am able to attach it here or place it in downlads area this weekend.

Go to components/com_emerald/views/emlist/tmpl any copy default_list_*.php to any other name with save prefix. For instance default_list_my.php.

Now you can edit it and create bootstrap grid that you like.

Open plan groups, edit default group and select that template there.

well... i mean... whats the point of having a subscription when I have to do the work... I mean... I can modify little things in the code to hide price and other stuff... but I do not like the fact that this is supposed to be a finished product and it does not even responds to iphone and samsung... most checkouts and conversions are done on phones... I strongly recomend you make that bootstrap since it is a benefit for your product.

thanks

pepperstreet I think I can provide a solution... stay tuned...

Bootstrap v2 plans list

Column spans are calculated out of plans amount. So, it should work with up to 12 plans... theoretically ;) For instance: 12 total columns devided by 2 plans will result in SPAN6 columns with 50% width, 12 devided by 4 plans become SPAN3 columns with 33,3% etc.

Equal Column heights

Since plans might have different properties, alerts and buttons... you might get different column heights. I have included an experimental CSS flex-box solution to match different heights. (See media-query part)
Personally, I am no fan of inline CSS, so you might remove those lines or copy them to your own custom CSS file. If your plans have the same properties and description text-length, you won't need that equal-height fix anyway. It's just to make the template and frontend more universal.

Screenshot / Example

Code Example

Follow Sergey's advice for the file location and naming conventions.

Headsup: Pasted PHP/HTML markup has an formatting issue, so I had to remove the code. I have to attach the template as a .ZIP file!

Bootstrap 2 template example

TODO: Attachment

Hope this helps.

Would like to get some feedback. If everything works, I could upload the file in the downloads area, or it would make it into the default templates. Variants for other popular CSS/template frameworks would make sense, too ;)

awesome! it works!

How can i increase the padding in the responsive layout for the plans title and buttons not to be confused? thanks

LM

lmarazzo How can i increase the padding in the responsive layout for the plans title and buttons not to be confused?

I knew you would ask that question :D ;)

I assume you are talking about the stacked order on narrow screens, right?
Sure this needs some space between the plans, but I didn't want to add more CSS styling.
Just added useful classes and the extra equal-height stuff...

However, you can easily style the plan container and the "gutter" for smaller screens like this...:

@media only screen and (max-width : 767px) {

.plan-wrapper {
    margin-bottom: 40px;
}

}

Increase px to your liking
Or use a % value like 10%
You may also add a visual border like the HR on your "learn" page. border-bottom: 1px solid black;
Maybe add a light background color to the entire plan?

BTW, I have noticed the space above and below your JSN pagebuilder content. There seem to be a lot of empty elements and their padding/margins. Small, but it seems to sum up. Please, check plan description for unnecessary Paragraph tags. And also the PageBuilder content itself. This should clean up your plans and reduce the "gutter" on top and below.

By the way. This is a great code you gave me but there is a problem with the payment button. Look at the / on the href...

I took it out and now it works... You should keep this template in your product. its great!

thanks!