Web CMS Designs: Forums
 

 
Post new topic Reply to topic
Message
Display posts from previous:       
PostPosted: Thu Sep 20, 2012 9:56 am
Reply with quote Back to top
spasticdonkey
Newbie
Newbie
Joined: Nov 18, 2010
Posts: 104
Location: Texas

View user's profile Send private message Visit poster's website
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

css Code:
@media only screen 

and (min-width : 1399px) {
/* nested styles go here */
}


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.

css Code:
@media only screen 

and (min-width : 1399px) {
#inner-wrapper {width:1200px}
#reptile-wrapper {width:1180px;}
#chameleon-nav{width:1200px}
ul.circle2 {width: 1100px}
ul.circle2 li {width: 350px}
.block-center .block_gradient {background: url("../images/blockhead840.jpg") repeat-x scroll left top transparent;}
.foad3,.foad4,.freeset{display:block}
.coad1{float:left;margin:10px 0 4px 25px}
.news-preview{display:none}
.forow1,.forow2{padding:11px 30px 11px 30px}
.forum-speaker{margin:3px 30px 16px 0;}
td.needback{width: 275px;}
}

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.

css Code:
@media only screen 

and (min-width : 1399px) {
#inner-wrapper {width:1200px}
}
#inner-wrapper {width:980px}

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.

php Code:
<?php


if (realpath(__FILE__) == realpath($_SERVER['SCRIPT_FILENAME'])) {
header('Location: ../../index.php');
exit('Access Denied');
}
$ThemeSel = get_theme();
if ($ThemeSel=='Chameleon') addCSSToHead('themes/Chameleon/style/x.css', 'file');
?>


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!
spasticdonkeywebcmsdesigns
 
Post new topic Reply to topic Web CMS Designs Forum Index RavenNuke Themes
Your AccountNew Members
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
You cannot attach files in this forum
You cannot download files in this forum


Powered by phpBB © 2001-2008 phpBB Group
 
 
Raven PHP Scripts