Mysidia Adoptables Support Forum  

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

Notices

Reply
 
Thread Tools Display Modes
  #1  
Old 05-14-2013, 03:35 PM
Kesstryl's Avatar
Kesstryl Kesstryl is offline
Member
 
Join Date: Feb 2012
Posts: 125
Gender: Female
Credits: 17,017
Kesstryl is on a distinguished road
Default Request - Responsive Themes

Would someone be willing to post some of the themes here into a responsive design? Meaning that the site will collapse down for smartphones and tablets with single columns, sidebar collapsable, etc. I don't know much about how to do this, best example I can give is my art site (a worldpress site) is responsive. Look at it by shrinking the browser window and you will see how it re-formats itself to fit the window. http://www.sonyaireland.com
Reply With Quote
  #2  
Old 05-18-2013, 01:45 PM
bobbybig bobbybig is offline
Member
 
Join Date: Mar 2011
Posts: 36
Gender: Male
Credits: 4,845
bobbybig is on a distinguished road
Default

This is a very interesting idea indeed the problem is that at this time many of the predefined features in the source code require base sizes not overly functional by all hand held devices.

I think as we get the source better in object orientation and ready for a more advanced use such as the admin features all cleaned and added like we would want; then the use for themes that are responsive to devises will be more doable.

it isn't that it can't be done. It actually is quite easy to code the css to respond to devise size. the rest of the code however would not and end up messing up pages and or theme layout too badly unless the site itself was recoded to allow for it, and it would be best to not have to do that at this time.

I will gladly be building responsive themes as soon as it is understandable functional all around for us to do it.
Reply With Quote
  #3  
Old 05-18-2013, 03:18 PM
Hall of Famer's Avatar
Hall of Famer Hall of Famer is offline
Administrator, Lead Coder
 
Join Date: Dec 2008
Location: South Brunswick
Posts: 4,448
Gender: Male
Credits: 327,559
Hall of Famer is on a distinguished road
Default

I believe Tequila already looked into this, I will talk to her about Mys v1.4.0's themes when the time comes.
__________________


Mysidia Adoptables, a free and ever-improving script for aspiring adoptables/pets site.
Reply With Quote
  #4  
Old 05-18-2013, 07:38 PM
Tequila's Avatar
Tequila Tequila is offline
The Grim One
 
Join Date: Jan 2009
Location: Souther Tier, New York State
Posts: 1,356
Gender: Female
Credits: 96,130
Tequila is on a distinguished road
Default

I found a few articles/tutorials, and am researching while not working on my other projects (Gospel Truth 3D Pinups, Rising Age Tarot, and Flavors TCG).

Here they are if you are interested:
http://blog.teamtreehouse.com/beginn...ive-web-design
http://www.hongkiat.com/blog/responsive-web-tutorials/

Now back to finding pictures of yummy looking food...
__________________
Artist. Designer. Gamer. Mother.
[portfolio] [tarot] [Rune Hollow] [freebies]
Reply With Quote
  #5  
Old 01-29-2014, 10:21 PM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 857
Gender: Unknown/Other
Credits: 86,986
Kyttias is on a distinguished road
Default

I'm working on this for my theme. I'm using Bootstrap as a base for my design. Responsiveness is extremely important in this day and age!

Here's my theme in progress on my desktop (1366 × 768): link

I used MobileTest.me to test it on smartphones:

iPhone 5 (568 x 320): link
Samsung Galaxy Y (320 x 240): link

Anything smaller than iPad in vertical mode (768 x 1024) renders something like the above, where iPads and above render it the same as a desktop. Smaller tablets will end up mobile mode.

What's different about my mobile mode? I shoved my sidebar to the top and made the links there horizontal instead of vertical. (And I'm considering hiding them altogether and adding in a 'show' button.) My top navigation is now hidden inside the button with the three lines on the right hand side. Click on that it drops down a list with only the top level categories (so you MUST make and link to pages that contain all your drop down links, by default Mysidia has these linking to the index, which isn't what you want): link (The drop down carets won't be there anymore, ahaha, small change to do...)

Other misc details about the template in general? The top navigation bar can always be seen, even when you scroll down. It's affixed the top and can always be easily accessed by the visitor, even on mobile devices. There IS a footer with credits at the bottom, I just didn't get a good shot of it, because it's obedient and stays where footers are supposed to, nice and snug to the bottom of a page.

Bootstrap is a CSS framework. I'm hoping I can get the template to work smoothly with ANY Bootstrap theme (since there are many available for free on BootSwatch.com and you can make your own easily with various generators, such as the one at StyleBootstrap.info).

All the mobile responsiveness is done with jQuery and overrides the default menu seamlessly, with no need to edit the deep code inside of Mysidia. You'll be able to just pop in the template theme and have it work nearly out of the box (other than making sure your top category links point somewhere).

I'll make my own thread when it's all ready to go~

EDIT:Ok, my theme's been posted!

Do-It-Yourself Responsiveness:
For the simplest example of how the jQuery is working (so long as you have jQuery included in your template):
Code:
 /*happens on both initial load and on resize*/
$(window).bind("load resize", function() {
var width = $(window).width();
if (width <= 767) {
	if(width<=459) { /*for smart phones and below*/  }
	else { /*for tablets and below*/ }
}
else { /*default for desktop*/ }
});;
You'll need a basic understanding of jQuery to know how to modify the css of your page with it.

Some things can be done with JUST css! (Note the extra set of curly brackets:)
Code:
/*this css is only used when the screen is smaller than this*/
@media only screen and (max-width: 767px)
{
 .example {display:none;}
}
Include meta data in your header so your css or jquery can find the current width on mobile devices:
Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
But I think that's the basics to changing things.

Last edited by Kyttias; 01-31-2014 at 07:03 PM.
Reply With Quote
Reply

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 [responsive, mobile-ready] Kyttias Templates and Themes 55 05-27-2022 09:52 PM
I created a responsive template audition Questions and Supports 0 02-01-2014 05:02 PM
Responsive design Kesstryl Suggestions and Feature Requests 5 03-06-2013 02:34 PM
Request theflyingkitty Suggestions and Feature Requests 11 09-27-2010 11:26 AM
mood mod request powerchaos Other Chat 2 08-09-2008 08:42 AM


All times are GMT -5. The time now is 05:07 PM.

Currently Active Users: 473 (0 members and 473 guests)
Threads: 4,080, Posts: 32,024, Members: 2,016
Welcome to our newest members, jolob.
BETA





What's New?

What's Hot?

What's Popular?


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