For plone 4.2.5 is there a non-complicated way to set up theme switching between desktop/mobile versions based on visitors screen size?
Something like "if less than 640x480 then" serve the mobile version ?
Talking about 2 non-Diazo themes for instance?
What is ++skin++ for skin switching, may it work?
I am quite new to plone and not really a programmer so a "sane" solution would be really appreciated !
Take a look in portal_css (via the Zope Management Interface) and search for "mobile." In the ""CSS Media" field, you'll find:
handheld, screen and (max-device-width: 480px)
This sets up a media query that causes browsers to use the mobile.css stylesheet if they know (admit) they are a handheld device or if they have a screen width of 480px or less. This is all done through completely standard CSS, and you may use the same principles to achieve completely different page designs for different screen widths. There are several great books on responsive design ("responsive" is the magic word). You may customize this stylesheet, or add your own media query style sheets.
You can also see a thorough and popular use of media queries and responsive design in "Twitter Bootstrap," which provides all sorts of class selectors that you may use to change designs at various screen widths. A bootstrap example is included with the newer version of plone.app.theming that is included with Plone 4.3.
Note, if you want design to change when you reduce a window size (not just the screen size), use "max-width" rather than "max-device-width."
I don't think so. However, you should look into responsive design and media queries. I suspect you can achieve what you want using standards compliant CSS in a single theme.
http://plone.org/products/collective.themeswitcher/
This is an alternative implementation you can use. From the description:
This addon has been designed to easily support new switcher. At the moment the only switcher that is implemented is the "mobile switcher" based on user agent from http://detectmobilebrowsers.com/ (python version).
Related
I want to make a adaptive website with vuetify : https://vuetifyjs.com/en/
so there will provide several versions of the website which will be used according to the device.
Adaptive design will provide several designs with different sizes, namely 320, 480, 760, 960, 1200, and 1600 pixels.
so there are about 6 different sizes. does that mean I will make 6 types of web?
I read on docs of vuetify https://vuetifyjs.com/en/styles/float#responsive. but seems it only responsive website. no adaptive website
I am confused about adaptive website implementation with vuetify
I know responsive website. but for this case, i want to implement adaptive website to my project
So the whole idea of adaptive design is to create several different designs. If you have six different sizes, you would have six different versions of each page. Would recommend using Vuetify's breakpoint system (which you can get programatically via this.$vuetify.breakpoint.name) to determine which design that you show. More details here: https://vuetifyjs.com/en/customization/breakpoints
I have a set of pixel perfect icons which I want to use on toolbar (NSToolbar) of my app. Toolbar is configurable thus I need to provide icons in four sizes: small, standard, small#2x, standard#2x.
I could not find any official information about the size of those icons, but unofficial information (confirmed by my tests) is the following:
small is 24px, normal is 32px.
Thus I need to add four different images: 24x24px, 32x32px, 48x48px, 64x64px to my image set.
As for now I could not find a correct way for that.
I have tried a dozen of different methods but could not find one which preserves pixel perfect quality of all four images.
I believe, I can load right size of the image manually each time it has to be changed, but I am wondering if where is a correct way for that.
Does anyone has a good solution for that?
And yes, I clean build folder before each test.
See the Apple Developer site Human Interface guidelines for formats and sizes. The requirements are different for the different devices, and quite detailed.
For a quick & dirty solution if you're not ready to ship and just want nice looking graphics for testing, I've found that one 512 x 512 pdf, labeled "image#2x" works pretty well. You need to set the
imageScaling = .scaleProportionallyDown
and Cocoa will take care of the rest. But it's definitely not ready for prime-time.
The NSToolbar.sizeModes are enum: small and regular. Small is 24x24 and regular is 32x32; additionally the retina options allow for #2x (48x48 and 64x64) and potentially #3x future-forward.
Apple documentation on these sizes can be found here and here
Make sure to use enum Regular not "Standard", which is undocumented.
The col-xs-* is used to control screen with with range: 0-767px.
This appears to be too large for my site.
In my case, I need grid options for a screen width that is larger than 500px AND another with range less than 500px, and that enables me to manage iphone screen with 320px for example.
I already has the media query as an answer, but I am expecting a more elegant answer.
Customize and Download your own version of Bootstrap after modifying the media query breakpoints:
http://getbootstrap.com/customize/#media-queries-breakpoints.
Alternatively, if you have node and grunt available on your system, you can actually add more LESS variables, such as a col-xss-*, or col-xlg-*, but this would require you to modify the source code (which is available to download VIA bootstrap's website).
Long story short, there isn't a way short of modifying the underlying bootstrap code.
this is not clear to me from the documentation and from the current behavior I see in my app: The stylesheets work nice using a web browser, but not on the mobile app.
So what I was looking for is how to apply different background images in our mobile app (or at least colors) to the navigation page (top level pages list) and any other pages. We would like to apply different styles to the our current, I guess default style but don't know how to do this. So at this point I do not know what I can ask our graphics designer to provide.
Any docs that I missed or examples I can look at?
Thanks,
Vincent
The styles you are using for the web are applied by RAP's theming. Currently Tabris does not support theming. The only option you have at the moment is to use the SWT setBackground.Image methods on the widget itself. To behave different as in the web you could use RWT.getClient().getService( ClientDevice.class ).getPlatform(); to distinguish between the mobile and web client.
Bootstrap 3 does not support BlackBerry devices, menus won't work, links are broken. I have several sites done using bootstrap 3 and need a solution.
I would like to be able to force bootstrap to use the small[tablet] or medium[desktop] views when a Blackberry device is detected.
Is there a way that this can be done?
It seems like you may want use the black art of user agent sniffing. Check for a Blackberry browser, and then use media queries to achieve what you're looking for.
You can use media queries to solve your problem. When detecting a BlackBerry device you can create new media queries for resolutions larger than 992px to constrain the width of the .container element to the width of 750px for example (from media query up to 768px) - always assuming that you are using default bootstrap classes.