Pure Comparison order form - more columns than 4

[sitesme]

Hi,

 

We are trying to make some changes on the Pure Comparison order form template and so far so good, it is looking with the colors we want: http://dns.d.pr/1e97x/185AEDgC

 

However, we would like to add 5 or 6 columns (not only 4) per row but not sure how to do this.

 

Could someone please point us out to the right code that needs to be changed either on CSS or anywhere else?

 

Many thanks.

[brian!]

the value you'll need to tweak is in pure_comparison/css/style.css...

 

#order-pure_comparison .price-table-container .price-table {
   padding:0 0 0 0;
   margin:0 0 0 0;
   width:215px;
   background:#ffffff;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   -ms-border-radius:5px;
   border-radius:5px;
   -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.30);
   -moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.30);
   box-shadow: 0 1px 2px 0 rgba(0,0,0,0.30);
}

specifically the width value - reduce the value and you should be able to display more columns... on the v6 dev, it shows 5 by default, if the width value is changed to 175px, it will show 6.

 

also, instead of editing style.css, it would probably be better to add the updated code to your Six (or your custom theme)/css/custom.css - that way, you won't have to update style.css after every update.

[sitesme]

Thank you brian!

 

It worked perfectly.

 

As for your recommendation to update the code on custom.css - does it mean that the code under custom.css will override whatever is on style.css?

 

At this moment I decided to copy the whole theme folder (six), rename it and make the changes on it. Does it still make sense to add changes on custom.css if I am using a custom theme?

 

Thank you

[brian!]

As for your recommendation to update the code on custom.css - does it mean that the code under custom.css will override whatever is on style.css?

yes.

 

http://docs.whmcs.com/Customising_the_Six_Theme#Applying_Custom_CSS_Styling

 

If you want to make changes to any of the CSS that is applied by default, we recommend making those customisations inside of the /css/custom.css file

 

This file is included after styles.css allowing you to override any of the CSS defined within it, and will not be affected by future updates to the WHMCS software and therefore will help ensure that any customisations you have made do not get overwritten or lost while still allowing you to keep the styles.css file up-to-date and current.

At this moment I decided to copy the whole theme folder (six), rename it and make the changes on it. Does it still make sense to add changes on custom.css if I am using a custom theme?

yes as you are now customising the order-form templates - if you modified style.css directly, you'd need to update it every time you upgrade WHMCS... moving these css changes to custom.css should mean, assuming you haven't made any template changes to the order-forms, that they will continue to work as you want after updating.

[sitesme]

Hmmm,

 

I am certainly doing something wrong...

 

I installed the original style.css under pure_comparison folder and then made the changes under six/css/custom.css - is this what I was supposed to do?

 

The changes I made under custom.css are all related to pure_comparison only but it doesn't seem to work.

 

Any guidance please?

 

Thank you again.

[brian!]

I am certainly doing something wrong...

I installed the original style.css under pure_comparison folder and then made the changes under six/css/custom.css - is this what I was supposed to do?

The changes I made under custom.css are all related to pure_comparison only but it doesn't seem to work.

you're absolutely right - my mistake.

 

I was sure that it previously worked with standard_cart, but obviously not - style.css is the last css to be called and therefore takes precedence over those called before it... perhaps I was thinking of the admin hook I wrote that would allow you to add a custom.css in your admin template.

 

anyway, you could still use a custom.css file but just add it to the pure_comparison folder instead and modify products.tpl to use it...

 

<link type="text/css" rel="stylesheet" href="{$WEB_ROOT}/templates/orderforms/{$carttpl}/css/style.css" property="stylesheet" />
<link type="text/css" rel="stylesheet" href="{$WEB_ROOT}/templates/orderforms/{$carttpl}/css/custom.css" property="stylesheet" />

I suppose it's a case of which is easier for you during an update - modify style.css directly, or modify products.tpl - perhaps for this one minor tweak, it doesn't matter... but if you start modifying the order-form template css further, then having a custom.css might be more useful.

 

apologies for the earlier confusion.

[sitesme]

Thank you for the clarifications brian!

 

I guess I prefer to stick with the changes directly in the style.css for the time being as I find it easier for now.

 

Thank you for your help so far.