Bootstrap

alt=
DannyA
@dannya
8 years ago
584 posts
Is there a way to use easily use bootstrap or some other modern framework for your skin? I frequently get feedback from design snobs that the controls and design of my skin look dated and I should be using something more modern like bootstrap. Is there an easy way to do this without re-doing my skin from scratch?
updated by @dannya: 12/10/16 02:07:36AM
michael
@michael
8 years ago
7,715 posts
There is a base bootstrap skin that is un-supported but used by some here:

https://github.com/ussher/bootstrap

Its a community thing though, so if a community wants to fork it and keep improving it they can.
alt=
DannyA
@dannya
8 years ago
584 posts
So it does have to be done from scratch.
michael
@michael
8 years ago
7,715 posts
?? bootstrap is a css design framework, not a designed template.
brian
@brian
8 years ago
10,148 posts
DannyA:
So it does have to be done from scratch.

Correct - if you want a bootstrap based skin for Jamroom, you'll need to build it - we don't have one for you outside the unsupported one Michael linked to.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
alt=
DannyA
@dannya
8 years ago
584 posts
I guess what I was hoping for is for some kind of hybrid skin. Where we could, for example, start using some of the bootstrap controls, typography, and icons with our existing skin.
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
You can do this, for example the icons in bootstrap 3.

Include the icon css file in your skin header.
Include the icon font in your css.
Then use the icon spans wherever you like in your html.

http://getbootstrap.com/components/#glyphicons


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
alt=
DannyA
@dannya
8 years ago
584 posts
Cool. That's what I was hoping for. Does the same work with other controls? e.g. form fields and buttons?
SteveX
SteveX
@ultrajam
8 years ago
2,584 posts
Buttons are the same as icons if you are using them in your skin. We use them like that here:
http://academicskills.uwe.ac.uk/has/workbooks/has-low/7205/academic-skills

But it's going to mean a lot of js and css if you want to "override" the core buttons. To do that you'd probably be better off using the less or sass features of bootstrap to restyle the core html. I stuck with the page submit and cancel buttons jamroom styling as it was a time-saving corner to cut.

You can replace core form fields by overriding them in your skin. e.g. place a file jrCore_page_notice.tpl in your active skin directory, copy in the contents of /modules/jrCore/templates/page_notice.tpl and then edit the html to suit your site's needs.

If you are going to restyle core form fields my best advice would be to avoid the ACP altogether - use jrAdminSkin to always use jrElastic in the ACP and then modify your jrElastic header and footer to more or less match your skin. Only admins see the Elastic look anyway, users see your custom skinned forms in the profile views.

You will have to deal with the differences between Jamroom and Bootstrap variable naming (like "error" in Jamroom and "danger" in Bootstrap, so the jrCore_page_notice.tpl might look like this:
{* page_notice shows notices, warnings, errors and success messages under a page_banner *}
{* NOTE: This is NOT SHOWN for AJAX response *}
{* $notice_label will contain the actual notice level - i.e. "error, "success", "warning", "notice" and in bootstrap: "danger, "success", "warning", "info" *}

{if $notice_type == 'success'}{assign var='alert_type' value=' alert-success'}{elseif $notice_type == 'error'}{assign var='alert_type' value=' alert-danger'}{elseif $notice_type == 'warning'}{assign var='alert_type' value=' alert-warning'}{elseif $notice_type == 'notice'}{assign var='alert_type' value=' alert-info'}{/if}
    <div id="page_notice" class="page_notice alert{$alert_type} alert-block">
    	<button type="button" class="close" data-dismiss="alert">×</button>
    	<strong>{$notice_label}!</strong>   {$notice_text}
    </div>



--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

updated by @ultrajam: 09/09/16 01:35:31PM
alt=
DannyA
@dannya
8 years ago
584 posts
Great. Thanks. That's helpful

Tags