New Bootstrap template

[ShaunR]

Well, i've been working on this for a while now and it's finally gotten to the point where it can be run and tested! As everybody knows WHMCS released the 'default' template with version 5 and it used twitter-bootstrap's framework. Not too long after WHMCS released this new template TB released a new version that was not just a simple drop in replacement. I talked with support and they made it out like TB 2.0.0 was not in the near future so i started looking at what it would take to do it on my own. After reviewing the HTML/CSS/JS that existed within WHMCS I decided I would be off writing a new version from scratch... So here it is! All the pages have been tested, I have not really done much testing with module output or the order forms so hopefully some of you can chime in. I decided to put this project up on github for everybody so if you find any issues please create them their. Screenshots are available on github also under the screenshots directory, I tried to take one for every page.

 

https://github.com/whmcsapps/template-bootstrap

 

This template is responsive, includes the full version of twitter-bootstrap (including javascript), and contains clean valid HTML!

 

My goal with this template is to keep it up-to-date with Twitter-bootstrap as well as with WHMCS.

[altomarketing]

mmm very interesting , i will examine it ..

[altomarketing]

Maybe you can play with http://twitter.github.com/bootstrap/javascript.html and create a new fresh look to template ? Thanks for sharing...

[sparky]

You could also look at the V5.1 beta default template which now uses bootstrap V2

[ShaunR]

Maybe you can play with http://twitter.github.com/bootstrap/javascript.html and create a new fresh look to template ? Thanks for sharing...

 

Actually if you used the customize section from the twitter-bootstrap site you could create your own theme with your own colors. My template was designed as a drop in replacement, it's not quiet there yet but that's the plan

 

 

You could also look at the V5.1 beta default template which now uses bootstrap V2

 

Yes, they decided to bump the twitter-bootstrap version in the beta but it's still missing most of the script for tb that makes the UI nice and they still barely touch tb.

[hosdes]

Shaun,

Excellent job! .... excellent.

 

Took a look and looks good. The only thing is tables. they do not like smartphone portrait screen size.

[hosdes]

Shaun,

clientareahome.tpl. account info and account overview needs to be side by side like how you have it in clientareadetails.tpl.

 

in clientareahome.tpl, it is showing row, row

[hosdes]

Shaun,

Not sure what version of default you used. I am using whmcs 5.0.3. Here is a change, for the details pages like my details, credit card, there is an include file that links to the subnav for this area. I think there is another area like this but cannot remember off hand.

 

for clientareadetails.tpl, replace the subnav and add this

 

<script type="text/javascript" src="includes/jscript/statesdropdown.js"></script>

 

{include file="$template/clientareadetailslinks.tpl"}

[ShaunR]

Shaun,

clientareahome.tpl. account info and account overview needs to be side by side like how you have it in clientareadetails.tpl.

 

in clientareahome.tpl, it is showing row, row

 

Responsive will make then stack if there is not enough screen resolution, are you looking at the site through a tablet or smart phone? Mine are side by side until a shrink the browser window way down. Can you show me a screen shot?

 

Shaun,

Not sure what version of default you used. I am using whmcs 5.0.3. Here is a change, for the details pages like my details, credit card, there is an include file that links to the subnav for this area. I think there is another area like this but cannot remember off hand.

 

for clientareadetails.tpl, replace the subnav and add this

 

<script type="text/javascript" src="includes/jscript/statesdropdown.js"></script>

 

{include file="$template/clientareadetailslinks.tpl"}

 

Yes, I decided to go away from doing this, that way it didn't require any logic to compare which page we were on to display the correct active tab, any reason why you need it?

 

This template was mainly built against 5.1.0_r1 beta figuring this template would probably end up stable by the release of 5.1.0

[hosdes]

Hi Shaun

thank you for your input. After reviewing your thoughts, I agree. Have you thought of providing this to whmcs itself? The only thing I hate about customizing whmcs original layouts you have to worry each time you upgrade whmcs web app. If this came with whmcs web app itself, then we do not have to worry about customizing. I am going to ticket whmcs to let you know.

[hosdes]

Shaun,

please add this to your templates ... clientareaproductdetails.tpl,

 

tab for change password,

1/ I see in whmcs 5.1.0_r1 beta they did not have to input current password. Your's does.

2/ password strength. line 164

 

<div class="control-group">

<label class="control-label" for="passstrength">{$LANG.pwstrength}</label>

<div class="controls">

{include file="$template/pwstrength.tpl"}

</div>

</div>

[ShaunR]

1. On my 5.1.0_r1 install it asks for an existing password, are you sure yours doesnt?

 

2. My template handles password strength different, it uses bootstraps form validation features so as you type the password the label, input, and help-inline span change color. Is yours not?

 

I have not asked WHMCS to include this template, my guess is that they would say no. I plan to maintain this template and keep it current with all versions of WHMCS from the release of 5.1.0 on. Each WHMCS version will have a tag in my repo matching it.