While it would be difficult to format RN in it's current state (v2.5) for mobile devices using responsive design alone, there are still viable applications for responsive layouts within your themes. I've become a big fan of fixed-width responsive layouts, which can help format your site for large displays. I've used this to a small degree with the current theme, expanding the 980px layout to 1200px if the visitor has a min-wdth of 1399px. The basic concept is fairly straight forward
At this point you just need to nest the desired CSS statements that need adjusting within your theme. They will take effect automatically, if the min-width is greater than 1399px.
Although you need to make sure to load this after any of the declarations you are overriding. This example would fail because declaring
#inner-wrapper {width:980px}
is the same as saying "for any resolution" and is declared after the
@media
declaration and would override it.
So now that you know where to load it, you can override anything your theme declared using this method. But wait! What about all of the CSS files that are loaded after your style.css file? How do you override those? Once again the objective will be to load the CSS as late in the load order as possible. The most practical solution at this time is to use a
head-xxx.php
file. The only CSS files which can possibly be loaded after that would be those loaded via
RN_MODULE_HEAD
which is only used by a few modules.
So first, move your responsive CSS into a file of it's own and save it in the style directory of your theme.
Now let's create a
head-xxx.php
file. Since the
head-xxx.php
files are loaded alphanumerically, title your
head-xxx.php
file so that it will load last. For sake of argument let's save it as
head-z.php
. Your code might look something like this, make sure to replace
Chameleon
with your theme name, and adjust the path
themes/Chameleon/style/x.css
to the actual location of your CSS file; that contains the responsive code.
Upload
head-z.php
to
includes/addons
and upload your newly created CSS file, and use should be ready to make responsive adjustments to your theme and almost all CSS declared afterward. At current
RN_MODULE_HEAD
(the only CSS files which could be loaded after head-xxx.php files) is not used within the RN distro; but is used in some 3rd party addons, such as Highchart Statistics
So now you can feel free to get your feet wet with responsive design! One last note, be aware these methods will be changing (improving) for our next major release, RN 3.0; and will need to be adjusted when that day comes.
Stay tuned for a future post which will help you with the next hurdle you will likely face; balancing your content and filling available space as your layout expands. Enjoy!
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum