Kryptronic Software Support Forum

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.

#1 12-26-2012 15:08:15

nlorntson
Member
Registered: 12-23-2007
Posts: 74

Create a column on the right side

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

Code:

/* +------------------------------------------------------------+ */
/* | 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/>

Code:

<div id="skin_right">

<?php $skinfunc->xnamespace('core','skinwidgets','SIDEMENURIGHT'); ?>

</div>

But that didn't work. sad

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

 

#2 12-26-2012 15:53:30

goski
Member
Registered: 09-27-2005
Posts: 115

Re: Create a column on the right side

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

 

#3 12-26-2012 16:30:59

nlorntson
Member
Registered: 12-23-2007
Posts: 74

Re: Create a column on the right side

Apparently it did.  The choices appear to be footer, header, navmenu and sidemenu.  Sidemenu seems to be only on the left side.

Offline

 

#4 12-27-2012 09:29:58

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Create a column on the right side

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'.


Nick Hendler

Offline

 

#5 12-27-2012 10:52:43

nlorntson
Member
Registered: 12-23-2007
Posts: 74

Re: Create a column on the right side

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

 

#6 12-28-2012 08:25:07

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Create a column on the right side

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:

Code:

<?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'.


Nick Hendler

Offline

 

#7 12-28-2012 11:23:35

nlorntson
Member
Registered: 12-23-2007
Posts: 74

Re: Create a column on the right side

Thanks, but I'm not quite there.

I've gone back and added the following to the all.css for my skin:

Code:

/* +------------------------------------------------------------+ */
/* | 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:

Code:

<?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>&copy; <?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

 

#8 12-31-2012 10:12:40

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Create a column on the right side

Move that skin_right div to right below:

Code:

<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'.


Nick Hendler

Offline

 

#9 12-31-2012 11:13:58

nlorntson
Member
Registered: 12-23-2007
Posts: 74

Re: Create a column on the right side

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

 

#10 01-01-2013 09:15:56

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Create a column on the right side

You need to reduce the width of the skin_content div in your CSS file.


Nick Hendler

Offline

 

#11 07-19-2013 08:58:39

TYPE2TDI
Member
Registered: 09-18-2008
Posts: 17

Re: Create a column on the right side

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

 

#12 07-19-2013 09:44:12

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Create a column on the right side

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.


Nick Hendler

Offline

 

#13 02-08-2014 17:31:56

Graham
Member
Registered: 09-30-2004
Posts: 981
Website

Re: Create a column on the right side

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                                                        | */
/* +------------------------------------------------------------+ */

Offline

 

#14 02-10-2014 11:28:20

webmaster
Administrator
From: York, PA
Registered: 04-20-2001
Posts: 19798
Website

Re: Create a column on the right side

Thanks for posting back, Graham.


Nick Hendler

Offline

 

#15 03-05-2014 02:17:15

mdowning
Member
From: California
Registered: 11-05-2010
Posts: 725
Website

Re: Create a column on the right side

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.


http://tuxedothemes.org/
Wordpress Themes for business, blogs and personal use.

Offline

 

#16 03-13-2014 05:32:03

Graham
Member
Registered: 09-30-2004
Posts: 981
Website

Re: Create a column on the right side

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

Code:

#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

 

#17 03-13-2014 05:55:21

mdowning
Member
From: California
Registered: 11-05-2010
Posts: 725
Website

Re: Create a column on the right side

That works pretty good, except now my content is all squished together. I need some padding or margins to help out.


http://tuxedothemes.org/
Wordpress Themes for business, blogs and personal use.

Offline

 

Board footer