Web CMS Designs: Forums

Post new topic Reply to topic
Display posts from previous:       
PostPosted: Thu Sep 20, 2012 9:56 am
Reply with quote Back to top
Joined: Nov 18, 2010
Posts: 106
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;}
ul.circle2 {width: 1100px}
ul.circle2 li {width: 350px}
.block-center .block_gradient {background: url("../images/blockhead840.jpg") repeat-x scroll left top transparent;}
.coad1{float:left;margin:10px 0 4px 25px}
.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
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
file. The only CSS files which can possibly be loaded after that would be those loaded via
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
file. Since the
files are loaded alphanumerically, title your
file so that it will load last. For sake of argument let's save it as
. Your code might look something like this, make sure to replace
with your theme name, and adjust the path
to the actual location of your CSS file; that contains the responsive code.

php Code:

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

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
(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!
PostPosted: Thu Sep 15, 2016 9:20 am
Reply with quote Back to top
Joined: Aug 05, 2012
Posts: 49
Location: Maryland

View user's profile Send private message Send e-mail Visit poster's website Yahoo Messenger MSN Messenger
Great read friend.
nextgenwith Kindness comes many rewards.
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

Powered by phpBB © 2001-2008 phpBB Group
Code Authors