Bootstrap [responsive, mobile-ready]

[Kyttias]

Bootstrap​

* / / / / / / / Version Notice *
I'm running this on Mysidia v1.3.4 - however, I can't think of too many reasons why it wouldn't be backwards compatible with older versions, so it's worth a shot?
* End Notice / / / / / / / *

Features:

• Brings you Bootstrap.
• No editting of php files. (It's done with jQuery!)
• CDN hosted CSS and jQuery, for faster cache load times.
• Bootswatch.com theme changer (thirteen themes)!
  
  
• Create your own theme easily at StyleBootstrap.info.
• Responsive, mobile-friendly design. ( Click here to check that out! )
• Fully commented code.
• Open source and license free - all of it. No credit necessary.

Download: http://sta.sh/0ny9dwq3t9o​

* / / / / / / / Update *
FEB.04.2014:
- 99% of css related things moved from js-kyt to style-kyt
- sidebar login inputs no longer clip out of the sidebar
- all form input fields are now fully mobile ready
- available adoptables table narrower on desktops
- all table cells are now vertically aligned
- added first optional mod
FEB.02.2014:
- profile tab bug fix and prettification
- classes added to input, textarea, and selection form elements
- classes added to table elements
- page flicker fix added
JAN.31.2014:
- launch

* / / / / / / / To Do *
- swap out icons in Manage Adopts, Trade Center, Members List, etc
- swap out social networking icons in the Profile
- remove MSN from contact info in the Profile, add Tumblr?
- remove carets entirely, at least until I can place them only on drop downs
- wrap Search form elements in .form-groups divs

* / / / / / / / Known Bugs *
n/a


Bugs will be fixed in the next major release. Until then, check back here and attempt replacing your js-kyt.js with the above before reporting a bug. But please do report bugs!

Installation​

To install this theme, all you need to do is upload one folder inside your templates folder. No edits to Mysidia's PHP class files are required, this is done for you client-side via jQuery.

The theme folder is called 'Bootstrap' and it belongs in templates/. So, for example, the path to your template.tpl will be templates/Bootstrap/template.tpl.

Admin side:
Once you have the files in place, go to Admin CP and down to Themes and install the theme there. Enter the theme name (Bootstrap) and folder (Bootstrap). Leave the header, body and style part all blank. (In Mysidia v1.3.4 you must click on the checkbox beside 'The style has been uploaded to the site, and is pending for installation' at the very bottom of the theme creation form. Not doing so will wipe the template files you just put in place.) Submit!

It can now be found in your list of themes that members can choose from. (http://YOURSITEHERE/changestyle/)

Please note:
You will NEED to go into Links > Edit Links and make sure your top-level categories are pointing to pages other than index, as the drop down menus have been removed for devices smaller than tablets! Make pages for your top-level categories that include all relevant links, so users on smaller screens can navigate all parts of your site. You can safely remove the link to 'Home' as it is redundant and will inaccurately display a drop down caret even though it has no drop down children.

Setting it as the default Mysidia template:
If you would like to set it as your main theme later, in the Admin CP go down to Settings > Basic Settings and this will open up a page for Global Site Settings. Write 'Bootstrap' in the Default Theme input box and hit 'Change Global Settings' to save it. If you'd like to remove people's ability to select other Mysidia themes, in the Admin CP go to Links > Edit Links and it will open up the Site Links Manager. All you have to do is remove the link that would take visitors to changestyle.

Setting default Bootswatch theme:
The theme changer remembers what the user's preference is, but if YOU have a preference for the initial look of the site, read the commentary in the header.tpl.

Disabling the Bootswatch theme switcher:
Don't want your users to be able to change the theme on their own? Remove the link to themeswitcher-kyt.js at the bottom of the template.tpl - and/or if you're sure you'll never need it again, just delete themeswitcher-kyt.js. Consider only removing themes just the themes you hate from the list (the list must remain all in one line, sorry). (Said list is also populated within the themeswitcher-kyt.js - if you need help, don't be afraid to contact me.)

Adding your custom StyleBootstrap.info theme:
If you want it as your site default, again, view the the header.tpl for instructions. (( If you want to add it to the Bootstrap theme switcher, open up themeswitcher-kyt.js and read the commentary there for instructions. edit: I AM NO LONGER SUPPORTING THE THEME SWITCHER WHATSOEVER, DELETE IT IF IT CONFUSES YOU. ))

Further Implentating Bootstrap​

Visit the official Bootstrap site for documentation on other cool features you can add to your page's content.

Read up on Bootstrap's:
CSS classes and helpers (including a grid system): link
Components (wells, panels, thumbnails, etc): link
and Javascript (tooltips, modal boxes, dismissable notices): link

 

[squiggler]

This is amazing! Thanks!

 

[Hall of Famer]

Ditto to what Squiggler said, its amazing and thats no doubt about it. This must be the first responsive theme/template we've ever had on this community. ^^

 

[Abronsyth]

This is absolutely brilliant! I'll be testing it out (been needing a new theme anyways). I've been dying for a responsive theme lately XD

Thank you so much for sharing this with us!


Edit;

Installed and I must say it does look good! I love the clean design of Bootstrap! However, there is a problem where the buttons on a users' profile become disabled. I'm assuming there's some interference in there...

 

[Kesstryl]

Me too me too!

 

[Kyttias]

Installed and I must say it does look good! I love the clean design of Bootstrap! However, there is a problem where the buttons on a users' profile become disabled. I'm assuming there's some interference in there...

I've not gotten to the profile page yet, it's still using whatever came standard with Mysidia. Upon closer inspection, it appears as though the profile page is using a class that Bootstrap uses: the ul has a class of 'nav'. I can remove it with jQuery, but the tabs still may not work. I'll dynamically rewrite the entire tab system to use Bootstrap's. Sorry about this!

I'll immediately work on the profile page, thanks for the bug report!

edit: Manually fixing this bug is unnecessary now, just download the newest release!

 

[Kyttias]

* / / / / / / / Update *
FEB.02.2014:
- profile tab bug fix and prettification
- classes added to input, textarea, and selection form elements
- classes added to table elements
- page flicker fix added

edit: newer version released

 

[LucasA33]

This is absolutely amazing! I've wanted bootstrap for this for a while and after many attempts just gave up.

Thank you very much!

 

[Abronsyth]

Awesome! All is working well now

It's such an excellent theme, I love the clean, easy to use look. My sister tested it on her iPhone as well, and it functions great on there as well!

Love responsive themes~

 

[Kyttias]

This is absolutely amazing! I've wanted bootstrap for this for a while and after many attempts just gave up.

Thank you very much!

Sure, sure, no problem. No credits are necessary so go ahead and take it and build on it. At the core, all I want to do is provide a framework that meshes Bootstrap with the Mysidia defaults. It'll recognize any table or input and automatically add a class to it. At that point, you won't even have to look up Bootstrap's classes even on custom pages (at least not for things like tables, inputs, and buttons). Obviously there's still a lot more cool stuff Bootstrap has to offer.

People should definitely build themes on TOP of this, and then distribute them here, if they like. I want this to be partner to any theme builder who wants Bootstrap as part of their theme. By itself, Bootstrap will make any site look at least 30% cooler, but there's a lot of room to expand on that. I don't want to impose any features someone may not want to use. It's very easy to overwrite Mysidia's core code with jQuery, perhaps even too much. I don't want to overstep and assume what features people want, so eventually progress will halt on my Bootstrap theme, and I'll start a specialized version.

And while I'm working on the specialized version, I should be able to create mods specifically meant for a Bootstrap theme. So if someone wants, say, a 150px image underneath their navbar (won't scroll with it, of course), I'd be to go "here just add in this code right over there" and then, voila, people can pick and choose.

 

[IntoRain]

Oh wow, nice job with this! Thank you!!

 

[Kyttias]

* / / / / / / / Update *
FEB.04.2014:
- 99% of css related things moved from js-kyt to style-kyt
- sidebar login inputs no longer clip out of the sidebar
- all form input fields are now fully mobile ready
- available adoptables table narrower on desktops
- all table cells are now vertically aligned
- added first optional mod*

* / / / / / / / To Do *
- swap out icons in Manage Adopts, Trade Center, Members List, etc
- swap out social networking icons in the Profile
- remove MSN from contact info in the Profile, add Tumblr?
- remove carets entirely, at least until I can place them only on drop downs
- wrap Search form elements in .form-groups divs

* / / / / / / / Known Bugs *
n/a

* / / / / / / / Mods *
*There is now an AVAILABLE MODS file where I will be placing some optional additions specific to this Bootstrap template. All you have to do is copy over the ones you want to the new mods-kyt.js file.

The first one is a mod that will make Adoptables on the Stats page (top 10 and random 5) smaller. No smaller than 50% of the table cell on any device, however. Because some of you have small adoptables already, you may have absolutely no interest in resizing them, especially if they're pixels. For anyone who has large adoptables, they might be interested in this to save space. (If asked I will release this as a general Mysidia mod, as well.)

 

[Hall of Famer]

Looks like you are making a good deal of progress lately, congratulations. I wonder what do you mean by swapping out icons for manage adopts, trade center, members-list and social networking. You have better and more suitable icons to replace these? Or are you just removing them for some reasons?

 

[Kyttias]

Looks like you are making a good deal of progress lately, congratulations. I wonder what do you mean by swapping out icons for manage adopts, trade center, members-list and social networking. You have better and more suitable icons to replace these? Or are you just removing them for some reasons?

Cleaner ones. Some of them don't look so hot on darker backgrounds (loose pixels around the edges). If I have to replace one or two, I might as well put in a whole new matching set.

 

[Hall of Famer]

I see, sounds interesting. Maybe I will include 'bootstrap' in Mys v1.4.0 as one of the default themes for user to pick(like 'elements' and 'green' in Mys v1.3.x, although the official default is 'main').

 

[LucasA33]

Yeah, it'd be good to implement it officially IMO, since Bootstrap is really an amazing thing.
Seriously, good job OP.

 

[Kesstryl]

*thumbs up* to officially including this in 1.4.0! Responsive templates are necessary in today's online world as more people are using smartphones and tablets. This will keep Mysidia modern for a long time.

 

[Pear]

It looks nice! c: I really love how simple it is<3 c:

 

[pachoofoosh]

Absolutely amazing, thank you so much for this!

 

[Infernette]

I was wondering if anyone knew how to get the current time to show up in the right corner of the navbar (and possibly an image that changes with this time?).

This template appreciated- I've been testing this on my site all day and I love it :3