You are viewing this forum as a guest. Login to an existing account, or create a new account, to reply to topics and to create new topics.
I'd like to create a column on the right side and move the Main Menu widget from the left hand column to the new right hand one.
Playing with the skin.php and the all.css, I managed to come close, but was not able to figure out how I needed to modify my skin.php
I've done the following:
1. Updated all.css and added this to handle the right hand column
/* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Right | */ /* +------------------------------------------------------------+ */ #skin_right { margin: 0px; display: block; width: 225px; margin-left:15px; float: right; }
I know I'll need to modify the #skin_left and the #skin_content to accommodate the total width I'll need
2. I think I also need to modify skin.php to make the column but that's where I'm sort of stuck. What do I add, and where to get a right hand column?
I tried adding the following to just after <core:content/>
<div id="skin_right"> <?php $skinfunc->xnamespace('core','skinwidgets','SIDEMENURIGHT'); ?> </div>
But that didn't work.
3. I believe I also need to update the Desktop Display group for the Main Menu widget to display in the modification I made in skin.php to make the Main Menu move from the left hand column to the new right hand column (SIDEMENURIGHT).
I think I'm close, but I've been at this for a week or so and no success. Who can help with some specific code examples?
Thanks much!
edit: An example of what I'm trying to do is here: http://www.tricker.com/waterlilies/
Nancy
Last edited by nlorntson (12-26-2012 15:18:33)
Offline
In Version 7 we were able to specify features that we wanted on the left side or right side. Did that go away in Version 8?
Offline
Apparently it did. The choices appear to be footer, header, navmenu and sidemenu. Sidemenu seems to be only on the left side.
Offline
Actually you can use custom 'Desktop Display Group' like 'GROUPXXX', and call that up from your skin. If you set the 'Desktop Display Class' to 'skin_widgetclass_SIDEMENU' it will render like a left/right sidemenu column. In your case, just change the display group to 'SIDEMENURIGHT'.
Offline
Thanks for your reply Nick.
I've tried so many things, I decided to set things back to stock and start anew based on the responses to this post.
So, I'm starting from scratch. Where do I start? Can you provide more detail?
Offline
Create a right column in your skin and style it in your CSS so it floats to the right. Once you have your column showing up, and you're ready to put content into it, enter this code in it:
<?php $skinfunc->xnamespace('core','skinwidgets','SIDEMENURIGHT'); ?>
Then in the management interface under System | Display | Skin Widgets, edit the widgets you want to show up there, and for their 'Desktop Display Group' enter 'SIDEMENURIGHT', and for their 'Desktop Display Class', enter 'skin_widgetclass_SIDEMENU'.
Offline
Thanks, but I'm not quite there.
I've gone back and added the following to the all.css for my skin:
/* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Right | */ /* +------------------------------------------------------------+ */ #skin_right { margin: 0px; display: block; width: 225px; margin-left:15px; float: right; }
In the skin.php I've added the line you recommended and have this:
<?php $skinfunc =& $this->include_skinfunc('CORE_SkinFunc'); extract($skinfunc->startup()); ?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML+RDFa 1.0//EN' 'http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd'> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <base href="<?php print $this->globals('core_display.base_url'); ?>" /> <?php $skinfunc->xnamespace('core','jslib'); ?> <link rel="stylesheet" type="text/css" media="all" href="media/skins/css/all.css" /> <link rel="stylesheet" type="text/css" media="all" href="skins/Pframe/css/overrides.css" /> <link rel="stylesheet" type="text/css" media="all" href="skins/Pframe/css/all.css" /> <link rel="stylesheet" type="text/css" media="all" href="skins/Pframe/css/colorscheme-<?php print $colorscheme; ?>.css" /> </head> <body> <div id="skin_background"> <div id="skin_top"> <div id="skin_top_wrapper"> <div id="skin_top_menu"> <ul> <?php if (!(empty($link_home))) {print '<li><a href="' . $link_home . '" title="Home">Home</a></li>';} if (!(empty($link_cart))) {print '<li><a href="' . $link_cart . '" title="Shopping Cart">Shopping Cart</a></li>';} if (!(empty($link_wishlist))) {print '<li><a href="' . $link_wishlist . '" title="Wish List">Wish List</a></li>';} if (!(empty($link_checkout))) {print '<li><a href="' . $link_checkout . '" title="Checkout">Checkout</a></li>';} if (!(empty($link_sitemap))) {print '<li><a href="' . $link_sitemap . '" title="Site Map">Site Map</a></li>';} if (!(empty($link_contact))) {print '<li><a href="' . $link_contact . '" title="Contact">Contact</a></li>';} ?> </ul> </div> <div id="skin_top_miniacctlogin"> <?php $skinfunc->xnamespace('core','miniacctlogin'); ?> </div> <div class="clearboth"></div> </div> </div> <div id="skin_header"> <div id="skin_header_wrapper"> <div id="skin_header_home"> <a href="<?php print $link_home; ?>" title="Home"><img src="media/skins/logos/<?php print $logoimage; ?>" alt="Logo" /></a> </div> <div id="skin_header_widgets"> <?php $skinfunc->xnamespace('core','skinwidgets','HEADER'); ?> </div> <div class="clearboth" style="height: 10px;"></div> </div> </div> <div id="skin_navmenu"> <?php $skinfunc->xnamespace('core','skinwidgets','NAVMENU'); ?> <div class="clearboth"></div> </div> <div id="skin_wrapper_content"> <div id="skin_left"> <?php $skinfunc->xnamespace('core','skinwidgets','SIDEMENU'); ?> </div> <div id="skin_right"> <?php $skinfunc->xnamespace('core','skinwidgets','SIDEMENURIGHT'); ?> </div> <core:content /> <div class="clearboth"></div> </div> <div id="skin_footer"> <div id="skin_footer_wrapper"> <div id="skin_footer_widgets"> <?php $skinfunc->xnamespace('core','skinwidgets','FOOTER'); ?> </div> <div id="skin_footer_copyright"> <?php $skinfunc->printaddphone(); ?> <p>© <?php print $disp_year . ' ' . $site_name; ?><br />All rights reserved worldwide</p> </div> <div class="clearboth"></div> </div> </div> </div> <?php $skinfunc->debug(); ?> </body> </html>
I've updated the Main Menu Widget to show in the right column which it does now.
The Main Menu widget has no styling however, and the column does not extend all the way down the right side.
What am I missing for the styling?
Offline
Move that skin_right div to right below:
<core:content />
And ensure that you did this:
Then in the management interface under System | Display | Skin Widgets, edit the widgets you want to show up there, and for their 'Desktop Display Group' enter 'SIDEMENURIGHT', and for their 'Desktop Display Class', enter 'skin_widgetclass_SIDEMENU'.
Offline
I moved the div as suggested and corrected the 'Desktop Display Class', to say 'skin_widgetclass_SIDEMENU' rather than the 'skin_widgetclass_SIDEMENURIGHT' I had there.
Now my styling for the main menu is showing. YAY!
The last piece seems to be that the main content (the content that should sit between the left and right column and identified as the #skin_content) is crossing into the area where the right column should be.
If I move the skin_right div BELOW the <core:content />, the right hand column with the Main Menu widget begins below the center content. If I leave it just above the <core:content /> the right column is only as tall as the Main Menu widget and the content runs into the area where the remainder of the right column should be.
I'm looking for three distinct columns, a left side menu, main content, and right side menu with a header and footer all the way across.
I'm close, but one more tweak I think is all I need. I hope this makes sense
Offline
This is my 4th attempt at the right hand column for widgets in as many months and still not getting it.
I believe I have executed what has been said to the letter and have checked numerous times but still not working.
I have the widget on the right but still falling under the content after increasing the width of the site and reducing the width of the content Div.
I think I am going to have to raise a custom ticket to get this right unless someone can help an idiot.
I do not know how to paste code in the forum but a link to the site will show what it looks like.
Richard
http://www.houseofgreenginger.com
Last edited by TYPE2TDI (07-19-2013 08:59:22)
Offline
Please submit a request here: https://kryptronic.com/Software-Custom-Shop
It's a small job, but if you haven't gotten it from what's in this post already, we might as well do it for you.
Offline
TYPE2TDI wrote:
This is my 4th attempt at the right hand column for widgets in as many months and still not getting it.
I believe I have executed what has been said to the letter and have checked numerous times but still not working.
I have the widget on the right but still falling under the content after increasing the width of the site and reducing the width of the content Div.
I think I am going to have to raise a custom ticket to get this right unless someone can help an idiot.
Ok, this is a bit late, but I've been having the same problem and realised the solution is that the default all.css is using fixed width settings for the columns instead of percentage of the screen size.
To fix this, I've changed the width nnn px settings to width nnn% (just look for the word "changed" in the all.css I'm using).
I've also removed "clear: both;" from Skin Layout Divs: Left and in Skin Layout Divs: Content changed - "float: right;" to "float: left;"
Hope this helps you or anyone else wanting to add a Right Hand Column.
/* +------------------------------------------------------------+ */ /* | General XHTML Elements | */ /* +------------------------------------------------------------+ */ body { color: #333333; background-color: #D2D2D2; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; text-align: left; margin: 0px; padding: 0px; } a { color: #333333; font-weight: normal; text-decoration: underline; cursor: pointer; } a:hover { color: #000000; } /* +------------------------------------------------------------+ */ /* | Skin Background | */ /* +------------------------------------------------------------+ */ #skin_background { background-color: #EFEFEF; padding: 0px; margin: 0px; background-image: url('../media/background.png'); background-position: top left; background-repeat: repeat; background-attachment: fixed; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Top | */ /* +------------------------------------------------------------+ */ #skin_top { margin: 0px; /* changed Width: 100%; */ width: 99%; background-color: #000000; padding: 5px 0px 5px 0px; -moz-box-shadow: 0px 2px 2px #555555; -webkit-box-shadow: 0px 2px 2px #555555; box-shadow: 0px 2px 2px #555555; z-index: 10; } #skin_top_wrapper { margin: 0px auto 0px auto; display: block; /* changed - width: 900px; */ width: 90%; clear: both; } #skin_top_menu { color: #FFFFFF; float: left; /* changed - width: 435px; */ width: 45%; } #skin_top_miniacctlogin { float: right; /* changed - width: 435px; */ width: 45%; } /* +------------------------------------------------------------+ */ /* | Top Menu | */ /* +------------------------------------------------------------+ */ #skin_top_menu ul { padding: 0px; margin: 0px; list-style: none; } #skin_top_menu li { padding: 0px; margin: 0px; list-style: none; display: inline; } #skin_top_menu ul li a { color: #FFFFFF; font-weight: normal; text-decoration: none; margin: 0px 5px 0px 0px; padding: 0px 5px 0px 0px; font-size: 11px; border-right: 1px solid #FFFFFF; } #skin_top_menu ul li:last-child a { border-right: none; } #skin_top_menu ul li a:hover { color: #FFFFFF; text-decoration: underline; } /* +------------------------------------------------------------+ */ /* | Mini Account Login | */ /* +------------------------------------------------------------+ */ #miniacctlogin { text-align: right; color: #FFFFFF; font-size: 11px; } #miniacctlogin a { color: #FFFFFF; font-weight: normal; text-decoration: underline; } #miniacctlogin ul li a:hover { color: #FFFFFF; text-decoration: underline; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Header | */ /* +------------------------------------------------------------+ */ #skin_header { margin: 0px 0px 10px 0px; /* changed width: 100%; */ width: 99%; background-color: #FFFFFF; padding: 10px 0px 5px 0px; -moz-box-shadow: 0px 2px 2px #999999; -webkit-box-shadow: 0px 2px 2px #999999; box-shadow: 0px 2px 2px #999999; clear: both; } #skin_header_wrapper { margin: 0px auto 0px auto; display: block; /* changed - width: 900px; */ width: 95%; clear: both; } #skin_header_home { float: left; /* changed - width: 600px; */ width: 40%; } #skin_header_widgets { float: right; /* changed - width: 270px; */ width: 60%; text-align: right; } /* +------------------------------------------------------------+ */ /* | Custom Skin Header Widgets | */ /* +------------------------------------------------------------+ */ #skin_header_widgets .formbutton, #skin_header_widgets .formfield { margin: 0px; } #skin_header_widgets #ecom_skinwidget_minicart .skin_widgetcontent { margin-bottom: 15px; } #skin_header_widgets #ecom_skinwidget_minicart p { margin-bottom: 4px; } #skin_header_widgets #core_skinwidget_currency .skin_widgetcontent { margin: 0px; } #skin_header_widgets #core_skinwidget_currency { padding: 25px 5px 5px 5px; margin: 0px; background-image: url('../media/currency.png'); background-position: top left; background-repeat: no-repeat; display: inline-block; background-color: #EFEFEF; border: 1px solid #DEDEDE; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px; float: right; } /* +------------------------------------------------------------+ */ /* | Custom Skin Navmenu Widgets | */ /* +------------------------------------------------------------+ */ #skin_navmenu #ecom_skinwidget_breadcrumbs .skin_widgetcontent { margin: 12px 0px 0px 4px; } #skin_navmenu #ecom_skinwidget_breadcrumbs .skin_widgetcontent p { margin: 0px; color: #000000; text-shadow: 2px 2px 2px #999999; } #skin_navmenu #ecom_skinwidget_breadcrumbs .skin_widgetcontent a { color: #000000; text-decoration: none; font-weight: bold; } #skin_navmenu #ecom_skinwidget_breadcrumbs .skin_widgetcontent a:hover { color: #000000; text-decoration: underline; font-weight: bold; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Navmenu | */ /* +------------------------------------------------------------+ */ #skin_navmenu { /* changed - width: 900px; */ width: 90%; margin: 0px auto 10px auto; padding: 0px; clear: both; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Wrapper Content | */ /* +------------------------------------------------------------+ */ #skin_wrapper_content { /* Changed - width: 878px; */ width: 95%; background-color: #FFFFFF; border-top: 1px solid #999999; border-left: 1px solid #999999; border-right: 1px solid #999999; padding: 10px; margin: 0px auto 0px auto; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px; -moz-box-shadow: 2px 2px 2px #999999; -webkit-box-shadow: 2px 2px 2px #999999; box-shadow: 2px 2px 2px #999999; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Left | */ /* +------------------------------------------------------------+ */ #skin_left { margin: 0px; display: block; /* Changed - width: 195px; */ width: 20%; /* clear: both; */ float: left; } /* +--------------------------------------------------------+ */ /* | Skin Layout Divs: Right Added to enable Right Column | */ /* +--------------------------------------------------------+ */ #skin_right { margin: 0px; display: block; /* Changed - width: 225px; */ width: 20%; margin-left:15px; float: right; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Content | */ /* +------------------------------------------------------------+ */ #skin_content { margin: 0px; margin-left:15px; display: block; /* changed - width: 400px; */ width: 50%; /* changed - float: right; */ float: left; } /* +------------------------------------------------------------+ */ /* | Page Title | */ /* +------------------------------------------------------------+ */ #skin_pgtitle { color: #000000; margin: 0px 0px 15px 0px; padding: 0px; font-weight: bold; clear: both; font-size: 28px; line-height: 1em; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Footer | */ /* +------------------------------------------------------------+ */ #skin_footer { margin: 0px auto 0px auto; display: block; clear: both; background-color: #F6F6F6; padding: 10px 0px 10px 0px; -moz-box-shadow: 0px -2px 2px #999999; -webkit-box-shadow: 0px -2px 2px #999999; box-shadow: 0px -2px 2px #999999; z-index: 10; background-image: url('../media/footer.png'); background-position: bottom left; background-repeat: repeat-x; } #skin_footer_wrapper { margin: 0px auto 0px auto; display: block; /* changed - width: 900px; */ width: 95%; clear: both; } #skin_footer_widgets { float: left; /* changed - width: 675px; */ width: 66%; } #skin_footer_copyright { float: right; /* changed - width: 195px; */ width: 20%; font-size: 10px; text-align: right; } /* +------------------------------------------------------------+ */ /* | End | */ /* +------------------------------------------------------------+ */
Offline
Graham wrote:
TYPE2TDI wrote:
This is my 4th attempt at the right hand column for widgets in as many months and still not getting it.
I believe I have executed what has been said to the letter and have checked numerous times but still not working.
I have the widget on the right but still falling under the content after increasing the width of the site and reducing the width of the content Div.
I think I am going to have to raise a custom ticket to get this right unless someone can help an idiot.Ok, this is a bit late, but I've been having the same problem and realised the solution is that the default all.css is using fixed width settings for the columns instead of percentage of the screen size.
To fix this, I've changed the width nnn px settings to width nnn% (just look for the word "changed" in the all.css I'm using).
I've also removed "clear: both;" from Skin Layout Divs: Left and in Skin Layout Divs: Content changed - "float: right;" to "float: left;"
Hope this helps you or anyone else wanting to add a Right Hand Column.Code:
/* +------------------------------------------------------------+ */ /* | General XHTML Elements | */ /* +------------------------------------------------------------+ */ body { color: #333333; background-color: #D2D2D2; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; text-align: left; margin: 0px; padding: 0px; } a { color: #333333; font-weight: normal; text-decoration: underline; cursor: pointer; } a:hover { color: #000000; } /* +------------------------------------------------------------+ */ /* | Skin Background | */ /* +------------------------------------------------------------+ */ #skin_background { background-color: #EFEFEF; padding: 0px; margin: 0px; background-image: url('../media/background.png'); background-position: top left; background-repeat: repeat; background-attachment: fixed; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Top | */ /* +------------------------------------------------------------+ */ #skin_top { margin: 0px; /* changed Width: 100%; */ width: 99%; background-color: #000000; padding: 5px 0px 5px 0px; -moz-box-shadow: 0px 2px 2px #555555; -webkit-box-shadow: 0px 2px 2px #555555; box-shadow: 0px 2px 2px #555555; z-index: 10; } #skin_top_wrapper { margin: 0px auto 0px auto; display: block; /* changed - width: 900px; */ width: 90%; clear: both; } #skin_top_menu { color: #FFFFFF; float: left; /* changed - width: 435px; */ width: 45%; } #skin_top_miniacctlogin { float: right; /* changed - width: 435px; */ width: 45%; } /* +------------------------------------------------------------+ */ /* | Top Menu | */ /* +------------------------------------------------------------+ */ #skin_top_menu ul { padding: 0px; margin: 0px; list-style: none; } #skin_top_menu li { padding: 0px; margin: 0px; list-style: none; display: inline; } #skin_top_menu ul li a { color: #FFFFFF; font-weight: normal; text-decoration: none; margin: 0px 5px 0px 0px; padding: 0px 5px 0px 0px; font-size: 11px; border-right: 1px solid #FFFFFF; } #skin_top_menu ul li:last-child a { border-right: none; } #skin_top_menu ul li a:hover { color: #FFFFFF; text-decoration: underline; } /* +------------------------------------------------------------+ */ /* | Mini Account Login | */ /* +------------------------------------------------------------+ */ #miniacctlogin { text-align: right; color: #FFFFFF; font-size: 11px; } #miniacctlogin a { color: #FFFFFF; font-weight: normal; text-decoration: underline; } #miniacctlogin ul li a:hover { color: #FFFFFF; text-decoration: underline; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Header | */ /* +------------------------------------------------------------+ */ #skin_header { margin: 0px 0px 10px 0px; /* changed width: 100%; */ width: 99%; background-color: #FFFFFF; padding: 10px 0px 5px 0px; -moz-box-shadow: 0px 2px 2px #999999; -webkit-box-shadow: 0px 2px 2px #999999; box-shadow: 0px 2px 2px #999999; clear: both; } #skin_header_wrapper { margin: 0px auto 0px auto; display: block; /* changed - width: 900px; */ width: 95%; clear: both; } #skin_header_home { float: left; /* changed - width: 600px; */ width: 40%; } #skin_header_widgets { float: right; /* changed - width: 270px; */ width: 60%; text-align: right; } /* +------------------------------------------------------------+ */ /* | Custom Skin Header Widgets | */ /* +------------------------------------------------------------+ */ #skin_header_widgets .formbutton, #skin_header_widgets .formfield { margin: 0px; } #skin_header_widgets #ecom_skinwidget_minicart .skin_widgetcontent { margin-bottom: 15px; } #skin_header_widgets #ecom_skinwidget_minicart p { margin-bottom: 4px; } #skin_header_widgets #core_skinwidget_currency .skin_widgetcontent { margin: 0px; } #skin_header_widgets #core_skinwidget_currency { padding: 25px 5px 5px 5px; margin: 0px; background-image: url('../media/currency.png'); background-position: top left; background-repeat: no-repeat; display: inline-block; background-color: #EFEFEF; border: 1px solid #DEDEDE; -moz-border-radius: 6px 6px 6px 6px; -webkit-border-radius: 6px 6px 6px 6px; border-radius: 6px 6px 6px 6px; float: right; } /* +------------------------------------------------------------+ */ /* | Custom Skin Navmenu Widgets | */ /* +------------------------------------------------------------+ */ #skin_navmenu #ecom_skinwidget_breadcrumbs .skin_widgetcontent { margin: 12px 0px 0px 4px; } #skin_navmenu #ecom_skinwidget_breadcrumbs .skin_widgetcontent p { margin: 0px; color: #000000; text-shadow: 2px 2px 2px #999999; } #skin_navmenu #ecom_skinwidget_breadcrumbs .skin_widgetcontent a { color: #000000; text-decoration: none; font-weight: bold; } #skin_navmenu #ecom_skinwidget_breadcrumbs .skin_widgetcontent a:hover { color: #000000; text-decoration: underline; font-weight: bold; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Navmenu | */ /* +------------------------------------------------------------+ */ #skin_navmenu { /* changed - width: 900px; */ width: 90%; margin: 0px auto 10px auto; padding: 0px; clear: both; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Wrapper Content | */ /* +------------------------------------------------------------+ */ #skin_wrapper_content { /* Changed - width: 878px; */ width: 95%; background-color: #FFFFFF; border-top: 1px solid #999999; border-left: 1px solid #999999; border-right: 1px solid #999999; padding: 10px; margin: 0px auto 0px auto; -moz-border-radius: 6px 6px 0px 0px; -webkit-border-radius: 6px 6px 0px 0px; border-radius: 6px 6px 0px 0px; -moz-box-shadow: 2px 2px 2px #999999; -webkit-box-shadow: 2px 2px 2px #999999; box-shadow: 2px 2px 2px #999999; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Left | */ /* +------------------------------------------------------------+ */ #skin_left { margin: 0px; display: block; /* Changed - width: 195px; */ width: 20%; /* clear: both; */ float: left; } /* +--------------------------------------------------------+ */ /* | Skin Layout Divs: Right Added to enable Right Column | */ /* +--------------------------------------------------------+ */ #skin_right { margin: 0px; display: block; /* Changed - width: 225px; */ width: 20%; margin-left:15px; float: right; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Content | */ /* +------------------------------------------------------------+ */ #skin_content { margin: 0px; margin-left:15px; display: block; /* changed - width: 400px; */ width: 50%; /* changed - float: right; */ float: left; } /* +------------------------------------------------------------+ */ /* | Page Title | */ /* +------------------------------------------------------------+ */ #skin_pgtitle { color: #000000; margin: 0px 0px 15px 0px; padding: 0px; font-weight: bold; clear: both; font-size: 28px; line-height: 1em; } /* +------------------------------------------------------------+ */ /* | Skin Layout Divs: Footer | */ /* +------------------------------------------------------------+ */ #skin_footer { margin: 0px auto 0px auto; display: block; clear: both; background-color: #F6F6F6; padding: 10px 0px 10px 0px; -moz-box-shadow: 0px -2px 2px #999999; -webkit-box-shadow: 0px -2px 2px #999999; box-shadow: 0px -2px 2px #999999; z-index: 10; background-image: url('../media/footer.png'); background-position: bottom left; background-repeat: repeat-x; } #skin_footer_wrapper { margin: 0px auto 0px auto; display: block; /* changed - width: 900px; */ width: 95%; clear: both; } #skin_footer_widgets { float: left; /* changed - width: 675px; */ width: 66%; } #skin_footer_copyright { float: right; /* changed - width: 195px; */ width: 20%; font-size: 10px; text-align: right; } /* +------------------------------------------------------------+ */ /* | End | */ /* +------------------------------------------------------------+ */
Graham,
I've tried to utilize your fix and incorporate a right column, but moving the account menu or any other side menu, they do not show up. I've tried to use Nicks advice to relocate a few menus on the right hand side. The width is there but they do not show up. They just disappear from sight on the store front.
Offline
The problem is that you're still using the fixed width settings. (IMO nobody should be using fixed width settings these days given that the customer could be looking at the site on any size of screen or window! Far better to fit in with what the customer is using, rather than force them to use something which the programer thinks looks ok on his screen!)
Anyway, what you need to change in all.css are
1) the Width settings to percentages
2) the Float settings
3) remove the clear: both line from skin_right
#skin_left { background-color: #F08D27; clear: both; display: block; float: left; margin: 0; /* changed width: 190px; */ width: 20%; } #skin_right { background-color: #F08D27; /* commented out clear: both; */ display: block; float: right; margin: 0; /* changed width: 190px; */ width: 20%; } #skin_content { display: block; /* changed float: right; */ float: left; margin: 0; width: 50%; }
I'd recommend downloading a copy of Firebug which lets you inspect the code as it appears on the screen and make changes "on the fly" to see what happens when you change something.
Offline
That works pretty good, except now my content is all squished together. I need some padding or margins to help out.
Offline