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)!
  http://fc08.deviantart.net/fs71/f/20...as-d74jv5i.gif
• 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

This is amazing! Thanks!

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

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

Me too me too!

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!

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

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

Thank you very much!

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~

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.

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

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

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.

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

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

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

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

Absolutely amazing, thank you so much for this! :happycbig:

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

Both of these tasks can be done with a bit of Javascript. ^w^~

html - This goes just after the list of links ends, but before the end of the navbar.
javascript/jquery - This can be included near the bottom, just before the end of the body INSIDE <script> </script> tags.
I think you can get the jist of what's going on if you stare at it enough. ovo/ Right now it's got the same image displaying for everything, of course, but you can see where to change it from the examples above (as you can probably guess, the basis is military time, yet I've hacked the date to read as AM/PM).

A css fix has been added to the class of "timeboth" with a bit of jQuery to align it with the links of the Bootstrap header, but this fix has not been applied to "time" and "timeimg" in case you want to use those elsewhere. Feel free to copy that fix to the other two, imitate the format, or make css amends in an actual stylesheet. (I wasn't sure whether you wanted to use these separately or not. For all I know, you may want to change your entire header to a sunrise/sun/sunset/moon based on the time of day!)

Check out this jsbin I've made for a working example.

Keep in mind that this code is a mix of both Javascript and jQuery (for convenience). The Bootstrap theme comes bundled with jQuery already, anyone who doesn't have it will have to include a link to prior to inserting a script that requires it.

To anyone staring at this and going "wow that's neat" - yes, getMonth(); and getDate(); exist as well (and for full homework, see how the entire Date(); object in Javascript is constructed).

On a final note, the data received is only as current as the page load. So it will display information based on the time the page was loaded, and pulls it's time directly from the user's computer, and not the server. It will be up to the script creators to make something accurate to server time that a user cannot change simply by messing their computer clock. It's good for visual effects, but I wouldn't rely on it to do much more than that. And unlike server side code, anyone can view the source of the page and view its Javascript - so if you're hiding promo codes in images, someone could easily find them all.

It's also theoretically possible to pull data on the moon phase...... but I don't really feel like going into that. >_o

If you want the php version to keep doing it like what you have in Creche: http://stackoverflow.com/questions/6...me-from-server

After getting the server time, do a smarty assign like $mysidia->template->assign("time",$variableYouCreated), this makes it possible to use the variable {$time} in the template.tpl (just like {$sidebar} or {$menu}!) inside the tags Kyttias has mentioned.
Or like this http://www.smarty.net/docs/en/langua...tpl#idp6286592

It's definitely smarter to do it with PHP if for any reason it has to do with promo codes, for obvious security reasons! The best designed sites flawlessly integrate beauty with purpose. It's nice to know Smarty has a built in function for server time! Definitely would have saved me half the effort last night.

- On what file does the smarty assign need to be made?
- To get an image to appear a specific time of day, but not display the time, I would still need at least this in Javascript:
- I'd love a quick lesson on how to format PHP for this instead. ovo~ It should be nearly the same? (There's a bit of shortcutting above as far as format goes, but I don't know how chill PHP is with forgoing conventional brackets.) So, safely, this would be the basic start, right? What would the next steps be, to make showing an image be as convenient showing the time like the Smarty assign?

I'd like the end result to be as easy as going {$timeimg}? (I'm learning, I like this!) I think it needs to go in function (object?) that the smarty variable will be assigned to read the outcome of??

It works extremely perfect *_* Thank you so much, I even got it to display the server time by modifiying the script just a little.

This theme is awesome, btw, thanks for all the hard work :D

- It can be used on any file through $mysidia->template->assign(), as long as you declare mysidia ($mysidia = Registry::get("mysidia")). I've been using most assigns in class_template though, in assignTemplateVars() function, or in class_frame, but that's personal choice I guess. I chose those two since they are always loaded for every page

- You can also do an assign for the image link and then in the template use it wherever you want, like:

//in class_template
//in template.tpl or header.tpl, wherever you want it
<img src={$timeimg}>

You can assign both the time and the image at once like this if you wish. Of course, it will only refresh with a page refresh xD

- PHP is pretty much normal with brackets, if the IF condition only has one line, you need no backets, like in Javascript ^^

Thankyou, that makes so much more sense. I hadn't had breakfast yet, my brain was in a fog. ^^

I added the code above into inside of the function assignTemplateVars(), which exists inside class_template.php, and it worked perfectly. My life suddenly got worlds easier.

Utterly brilliant. WOW. Thank you so much, I just installed this and it's incredible!!

Utterly brilliant. WOW. Thank you so much, I just installed this and it's incredible!!

:O
 

As many many people before me have said.. THIS THEME IS AMAZING! I love Bootstrap and having it made into a theme for Mysidia Adoptables is just awesome!

This is amazing! :BIGO:

I found a bug though, on mobile devices submenus aren't present.

No, they're not present. On the first post I explained you'll need to make pages for each top level category and link to them. You'll have to make these pages yourself, and they should contain the same content as the submenus. It's only as mobile friendly as you make it.

I couldn't get the style resource you posted to work properly, it didn't give the entire css.
I did however, find this website which I thought was useful.

http://www.lavishbootstrap.com/

My website is set on an island, so after searching around for the right image that gave a good palette, I ended up with a pretty nice style for the bootstrap theme.

Hey, Kyttias, I know you're busy, but when/if you have the chance I could use some suggestions!

For some reason every now and then my theme will sort of glitch and the button arrows for the drop down will, well, drop down below the link title. Not a major issue, but it doesn't look great- screenshot

Any ideas?

Definitely something that can be fixed with css, but I wonder why it only happens 'once in a while'? If I had a direct link I would just right click on the area when it's happening and hit 'inspect element' on the browser's context menu and examine what's going on there -- with the css. It looks as though the minimum width for those areas need to be wider.

I have a question about editing the bootstrap that you provided in the file! XD I made a fresh install of the bootstrap theme and haven't actually edited anything yet (well, I have, but I undid everything after because I didn't like it, etc. XD). I need help with making everything line up properly though... on the shop page that you helped me with originally Bootstrap kind of breaks it XD I'm not sure where to go to edit it so that everything fits better. I have spent the past few hours tinkering with the code in the Bootstrap file and the class_itemshop file but can't fix it. >.< Also, the tooltips don't work properly.

It looks like this:



I'm also wondering if there are any good Bootstrap tutorials that I can use to change the layout. I checked out the ones on the first post but I'm not sure how to use the info XD (That's also why I'm asking here about the layout and tooltips as I didn't understand what was on the links about them XD)

Bootstrap is a css theme but not really a layout. Yes, I made a layout, and you can change it. I'd advise you to use the information in the links, because the only thing I can do is tell you to do is read how to use Bootstrap from the original site. All the example code is there - html elements and the exact classes they need on them. Most of the other links I gave you are just ways to create themes - which are just arrangements of color and different sized borders, radius amounts, fonts choices, etc.

As for the tooltips not working, the thread you got them from informs you:
That is to say, if you have Bootstrap you must have jQuery in the header file and not the end of the template file. You also cannot have two. Neglecting to have it at the top or having more than one would cause issue. I don't know what your exact problem is. That said, Bootstrap also comes with built in tooltips, so if you'd rather rewrite the html completely, look into that.

On a final note, be careful when rewriting the shop files. I advise getting a text editor meant for code that has syntax highlighting, so you can visually see that the code is being closed correctly. Double quotes " , single quotes ' , and commented out quotes \" will all need to be used at different times and locations and they're the bane of even an advanced coder's day. Knowing what to use where and when is difficult, so I wish you luck.

I wish I had more time to offer help. Good luck! :happyc:

OK, thanks a lot! ^_^ I started college today and I went into the library and oh my lord the amount of coding books I found o.o There were so many........ o.o I got out one on CSS and HTML (even though I'm actually not bad at them because I had lessons at Secondary school before we chose what subjects to do) and I saw there were also AJAX ones, PHP ones, JQUERY ones, Javascript... and quite a few with multiple topics in them (like PHP, MySQL, and Ajax together). I'm definitely going to make use of those resources over the next, like, 2 years... although I have started reading the CSS one (it's CSS: The Definitive Guide 3rd Edition by Eric A. Meyer) and I actually already know all the info I've read so far XD I can't wait to start the HTML one after, as well. But I will also check out the PHP ones later on.. so I now have greater resources at my disposal!

It's going to be a huge help! XD And if I can't get Bootstrap to work to my liking, I have a solid idea for what I want to achieve with the normal CSS styling (that is for the first time an actual image in my head of what I wish it to look like). Now that I have a plan, I can hopefully do some of these things myself instead of always asking for help at all hours of the night when I am struck with an idea... >.> Which is what happened last night because my brain wouldn't shut off when I was supposed to be sleeping because all I could think about was coding sequences for CSS and a few basic PHP lines I remembered... not helpful when I had to have my first day at college today D: But anyway... thank you! XD

(If you can't tell I'm really excited right now lol OwO)

This is totally awesome!

I have changed the 'link text' of the top level categories to different links of the site. Does the links are still supposed collapse? They didn't show up for mobile...

No, unfortunately, the idea is to create a 'homepage' for each top level category that will contain all the necessary links therein, and people on mobile will navigate the site that way. It's not the best in the world. Sorry!