Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Templates and Themes

Reply
 
Thread Tools Display Modes
  #1  
Old 01-31-2014, 07:57 PM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 843
Gender: Unknown/Other
Credits: 36,369
Kyttias is on a distinguished road
Arrow Bootstrap [responsive, mobile-ready]

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

Last edited by Kyttias; 08-12-2016 at 08:45 AM. Reason: new release
Reply With Quote
  #2  
Old 01-31-2014, 08:13 PM
squiggler's Avatar
squiggler squiggler is offline
Squiggling since 1995
 
Join Date: Jul 2013
Posts: 185
Gender: Unknown/Other
Credits: 4,218
squiggler is on a distinguished road
Default

This is amazing! Thanks!
__________________
Avatar courtesy of Doll Divine.
Reply With Quote
  #3  
Old 01-31-2014, 10:34 PM
Hall of Famer's Avatar
Hall of Famer Hall of Famer is offline
Administrator, Lead Coder
 
Join Date: Dec 2008
Location: Somerville
Posts: 4,388
Gender: Male
Credits: 128,521
Hall of Famer is on a distinguished road
Default

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. ^^
__________________


Mysidia Adoptables, a free and ever-improving script for aspiring adoptables/pets site.
Reply With Quote
  #4  
Old 02-01-2014, 03:46 PM
Abronsyth's Avatar
Abronsyth Abronsyth is offline
A Headache Embodied
 
Join Date: Aug 2011
Location: NY
Posts: 996
Gender: Male
Credits: 41,214
Abronsyth is on a distinguished road
Default

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...

Last edited by Abronsyth; 02-01-2014 at 04:07 PM.
Reply With Quote
  #5  
Old 02-01-2014, 08:50 PM
Kesstryl's Avatar
Kesstryl Kesstryl is offline
Member
 
Join Date: Feb 2012
Posts: 120
Gender: Female
Credits: 5,419
Kesstryl is on a distinguished road
Default

Me too me too!
Reply With Quote
  #6  
Old 02-01-2014, 09:30 PM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 843
Gender: Unknown/Other
Credits: 36,369
Kyttias is on a distinguished road
Default

Quote:
Originally Posted by Abronsyth View Post
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!

Last edited by Kyttias; 02-03-2014 at 03:32 AM.
Reply With Quote
  #7  
Old 02-02-2014, 05:50 AM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 843
Gender: Unknown/Other
Credits: 36,369
Kyttias is on a distinguished road
Default

* / / / / / / / 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

Last edited by Kyttias; 02-04-2014 at 07:45 AM.
Reply With Quote
  #8  
Old 02-02-2014, 02:43 PM
LucasA33's Avatar
LucasA33 LucasA33 is offline
Member
 
Join Date: Jul 2011
Posts: 141
Gender: Male
Credits: 2,939
LucasA33 is on a distinguished road
Default

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

Thank you very much!
Reply With Quote
  #9  
Old 02-02-2014, 02:50 PM
Abronsyth's Avatar
Abronsyth Abronsyth is offline
A Headache Embodied
 
Join Date: Aug 2011
Location: NY
Posts: 996
Gender: Male
Credits: 41,214
Abronsyth is on a distinguished road
Default

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~
Reply With Quote
  #10  
Old 02-03-2014, 04:27 AM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 843
Gender: Unknown/Other
Credits: 36,369
Kyttias is on a distinguished road
Default

Quote:
Originally Posted by LucasA33 View Post
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.
Reply With Quote
Reply

Tags
bootstrap, jquery, mobile-first, responsive

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Bootstrap [AdminCP version] Kyttias Templates and Themes 9 02-25-2016 10:51 AM
Basic Browser Game Tutorial using Smarty and Bootstrap Kesstryl Programming and Game Development 3 10-29-2014 10:15 PM
I created a responsive template audition Questions and Supports 0 02-01-2014 06:02 PM
Request - Responsive Themes Kesstryl Templates and Themes 4 01-29-2014 11:21 PM
Responsive design Kesstryl Suggestions and Feature Requests 5 03-06-2013 03:34 PM


All times are GMT -5. The time now is 05:41 AM.

Currently Active Users: 215 (0 members and 215 guests)
Threads: 3,949, Posts: 31,450, Members: 15,539
Welcome to our newest members, Blufox.
BER





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2018, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636