X-Cart forums

[GreatLakesVacuum]

How to I properly resize the percentage of the page being utilized in XC5 without modifying code that will be over-written with updates?

For example:
http://x5.greatlakesvacuum.com/store/Products/vacuum-oil/glv-fp_premium_lube_vacuum_pump_oil_-5_gallons-.html

Thanks

[totaltec]

Nick, from what I understand, the easiest way to do this is via the custom CSS option provided by the XC/ThemeTweaker module. If this module is enabled, you should see the option under System Settings->Look and Feel->Custom CSS.

Turn on the Custom CSS with the checkbox at the top of the textarea. Then define your styles. This CSS is stored in the database, so it should not be overwritten by upgrades.

[GreatLakesVacuum]

Thanks Mike. Do you have any idea what I need to enter for the CSS to style the width of the product pages? I guess I don't know what to put there

[totaltec]

Sure, what do you want to happen exactly? The more detailed explanation the better I can help.

The way I see it, the page has four sections. Image, Product details (Product title, quantity, add to cart), Description, and Related products. Explain how you want these to layout, and what width you want affected where.

[GreatLakesVacuum]

Originally Posted by totaltec

Sure, what do you want to happen exactly? The more detailed explanation the better I can help.

The way I see it, the page has four sections. Image, Product details (Product title, quantity, add to cart), Description, and Related products. Explain how you want these to layout, and what width you want affected where.

Ok...

So if you look at the width of the nav bar and white box... it seems to be limited to some pixel size as it grows? I don't know what size it is but it seems to be wasting a ton of the screen space on both sides on virtually every monitor size we have here.

So my first thing I want to do is increase that size... of course if you can help me write the CSS code to do so, I can adjust the number later on, so lets just say I want to make that "wider".

I don't know that I need to do anything with the image, I think its ok. The other 2 I won't really know if I want to move them around until after I see how the page works with the "container" that all those are in set wider.

[GreatLakesVacuum]

Originally Posted by GreatLakesVacuum

Ok...

So if you look at the width of the nav bar and white box... it seems to be limited to some pixel size as it grows? I don't know what size it is but it seems to be wasting a ton of the screen space on both sides on virtually every monitor size we have here.

So my first thing I want to do is increase that size... of course if you can help me write the CSS code to do so, I can adjust the number later on, so lets just say I want to make that "wider".

I don't know that I need to do anything with the image, I think its ok. The other 2 I won't really know if I want to move them around until after I see how the page works with the "container" that all those are in set wider.

Ok, so it is in the body class, under the page-wrapper div.

There is a width setting in there of 1037px ... can I change that? It appears to be its max as I tried 1200 and that made everything wider. I don't know if that is all I have to do though as that didn't move the description back up where it was before I increased the image size.

EDIT: Ok making it 1400 did, so obviously this will work I just need to know if it is bad to do this? I think when the screen is smaller it sizes it down anyways

EDIT2: Ok it sizes up in huge chunks though, why is it like that?

[totaltec]

OK I understand now, you want to adjust the various sizes of the entire page width.

Your site is responsive. So it does re-size itself for smaller screens.

Here is a crash course in responsiveness via media queries:
Media queries define what CSS is applied based on the actual size of the page.
Here is how they are defined:

@media (min-width: 1037px) {
  #page-wrapper {
    width: 1037px;
  }
}

Note the @media (min-width: 1037 px) followed by a bracket. There is also a closing bracket that ends this section. The pertinent styles are defined inside.

Media queries can also have a max-width range:
@media only screen and (min-width:480px) and (max-width: 640px) {...}

So you can see there are several min-widths set for your site. That is why it jumps in large chunks. For further example you have this CSS:

@media (min-width: 992px) {
  #page-wrapper {
    width: 940px;
  }
}

This ensure that the page re-sizes to 940px when the screen size is greater than 992px. With Google Chrome in developer mode (right click, and inspect element) the current screen width should be displayed in the top right coren of the browser when you are actively re-sizing the page.

More info:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

[GreatLakesVacuum]

Mike, ok I sort of understand that.

I do already have a huge chunk of custom CSS on my site in that spot that looks like this:

/*body {
}

body {
}*/

/* Start of MINDSCAPE custom css */
/*body {
background: #fff;
color: #5c5c5c;
font-size: 14px;
overflow-x: hidden;
font-family: 'Noto Sans', sans-serif !important;

}

.page-wrapper {
overflow: hidden;
}

h1, h2, h3, h4 {
color: #231f20;
font-family: 'Noto Sans', sans-serif !important;
font-weight: 700 !important;
}

h1 {
font-size: 40px;
line-height: 48px;
}

h2 {
font-size: 24px;
}

h3 {
font-size: 18px;
}

#page-wrapper {
width: 100%;
max-width: inherit;
}

#main-wrapper, #header-area {
max-width: 1024px;
margin: 0 auto;
padding: 0 15px;
padding-top: 15px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}

#header-area {
padding-top: 15px;
height: auto;
z-index: 5;
}

#search {
position: absolute;
right: 0;
top: -38px;
}

.simple-search-box {
background: none;
border-color: #bbb;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
height: 25px;
background: #fff;
}

.simple-search-box button.submit-button {
background-image: url(images/glv-search-icon.png);
width: 23px;
height: 20px;
margin-top: 4px;
}

#header {
top: 50px;
right: 13px;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: none;
background: #231f20;
}

#header .lc-minicart {
background-image: url(images/glv-cart-icon.png);
background-color: #231f20;

}

#header-bar {
position: relative;
margin-top: 15px;
background: #231f20;
}

#main-menu {
top: 0;
}

#main-menu li {
margin: 0 10px;
}

#main-menu li a {
font-size: 12px;
color: #454545;
font-family: 'Noto Sans', sans-serif;
}

#logo {
position: absolute;
z-index: 10;
top: 28px;
left: 0px;

}

#phone {
top: 0;
float: right;
margin-right: 171px;
color: #231f20;
font-weight: 700;
font-size: 15px;
margin-left: 20px;
font-family: 'Noto Sans', sans-serif !important;
}

ul.account-links {
display: none;
}


#main-wrapper {
padding-top: 33px;
}

#breadcrumb {
margin: 0;
padding-top: 0;
}


#breadcrumb a {
color: #231f20;
font-size: 12px;
}

#sidebar-first {
background: #efefef;
width: 232px;
margin: 0;
padding: 15px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
min-height: 500px;

}

.sidebar .block h2 {
margin-left: 10px;
}

.sidebar ul.menu a {
font-size: 15px;
font-family: Myriad Pro;
color: #231f20;
padding: 5px 10px;
margin-top: 2px;
}

.sidebar ul.menu a:hover,
.sidebar ul.menu a.active{
background: #f6dd05;
color: #231f20;
}

#content {
width: 785px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
float: right;
padding-left: 30px;
padding-right: 15px;
}

.target-main #content {
padding-bottom: 0;
}

.target-main #content .category-description {
text-align: center;
}


.target-main .home-page-hero-container {
position: absolute;
top: 0;
left:0;
width: 100%;
background: #333;
margin: 0;
margin-left: 0 !important;
margin-right: 0 !important;
height: 482px;
overflow: hidden;
}

.target-main .home-page-hero-container img {
width: 2000px;
opacity: .3;
height: 482px;
left: 50%;
margin-left: -1000px;
position: absolute;
max-width: inherit !important;
}

.target-main .carousel {
margin-top: 67px;
position: relative;
width: 100%;
overflow: hidden;
}

.target-main #main-menu li a {
color: #fff;
}

.target-main #phone {
color: #f6dd05;
}


.target-main #content h1 {
position: relative;
z-index: 4;
color: #fff;
font-size: 40px;
font-weight: bold;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
float: left;
padding: 0 20px;
width: 100%;
padding: 0 130px;
margin-top: 15px;
margin-bottom: 45px;


}


.target-main .home-page-buttons {
position: relative;
z-index: 4;
}

#footer-area {
background: #efefef;
padding-top: 25px;
padding-bottom: 40px;
}


.banner-button {
display: inline-block;
background: #f6dd05;
font-size: 19px;
color: #000;
padding: 20px 0;
width: 27%;
text-decoration: none;
margin: 0 20px;
}


.banner-button:hover {
color: #000;
opacity: .8;
}


.target-main .carousel .content {
border-color: #fff;
}

.target-main .carousel h2 {
color: #000000;
font-size: 32px;
margin-top: 38px !important;
margin-left: -166px !important;

}


.target-main .carousel .content .products {
width: 100%;
}

.carousel .products-grid li.product-cell {
width: 250px;
}

.products .product-cell:hover .product {
box-shadow: 0px 0px 7px #888;
-webkit-box-shadow: 0px 0px 7px #888;
-moz-box-shadow: 0px 0px 7px #888;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
}


#sidebar-first .carousel .content .products {
width: 100%;
}

#sidebar-first .products-sidebar-small-thumbnails li.product-cell {
background: #fff;
}

#sidebar-first .products-sidebar-small-thumbnails div.product-photo a {
display: block;
width: 100%;
text-align: center;
}

#sidebar-first .products-sidebar-small-thumbnails div.product-photo a img {
border: none;
}


.sidebar .block h2 {
font-family: 'Noto Sans', sans-serif;
font-weight: 700;
}


.target-main #content {
padding-left: 0;
padding-right: 0;
}


.caroufredsel_wrapper {
height: 300px !important;
}


.list-header {
background:#efefef;
border: none;
}

ul.display-modes li.selected a, ul.display-sort li.selected a {
background-color: #d2d1d2;
}

ul.display-modes li a, ul.display-sort li a {
color: #231f20;
}
ul.display-sort li.selected a {
color: #231f20;
}

button, button.action, button.bright {
background: #f6dd05;
color: #000000;
padding: 20px 40px;
height: auto;
font-size: 16px;
text-align: center;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
font-weight: bold;
}

button:hover {
color: #fff;
background: #231f20;
}

.checkout-block .steps h3 .bullet {
background-color: #f6dd05;
color: #000000;
}

button.bright.checkout {
width: 100%;
padding-left: 0;
padding-right: 0;
}

.target-cart #content, .target-checkout #content {
max-width: 1024px;
width: 100%;
padding-left: 0;
padding-right: 0;
}

.target-cart #breadcrumb {
margin-left: 0;
}

#shopping-cart {
float: left;
width: 634px;
margin-top: 25px;
}

#cart-right {
margin-top: 34px;
}

#shopping-cart table.selected-products {
width: 100%;
}

#cart-right .estimator ul span {
font-weight: bold;
}

.coupons .add-coupon button {
font-size: 11px;
padding: 6px 10px;
}

.checkout-block .steps .address-book {
font-size: 12px;
padding: 5px;
margin-top: 4px;
font-weight: bold;
}

.items-list .products-grid .add-to-cart-button {
position: relative;
width: 100%;
}

.items-list .products-grid .add-to-cart-button button.bright {
padding-left: 0;
padding-right: 0;
width: 100%;
}

#cart-right .totals li.total strong,
#cart-right .totals li strong {
color: #5c5c5c;
}

.products-grid .product-cell {
float: left;
width: 33.333%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
*/
/* Smartphones (portrait) ----------- */
/*@media only screen
and (max-width : 1023px) {*/
/* Styles */

/*.target-main #content h1 {
padding: 0 30px;
}

.banner-button {
width: 30%;
margin: 0 10px;
}

#main-wrapper, #header-area {
max-width: 900px;

}

#sidebar-first {
width: 200px;
}

.sidebar-first #content {
width: 669px;
}

.sidebar-first #content img {
max-width: 100%;
}

.target-main #content {
width: 100%;
}

}




@media only screen
and (max-width : 991px) {*/
/* Styles */
/*

#main-wrapper, #header-area {
max-width: 860px;

}

.sidebar-first #content {
width: 629px;
}

#sidebar-first {
width: 200px;
}

.target-main #content {
width: 100%;
}

}


@media only screen
and (max-width : 890px) {*/
/* Styles */

/*
#main-wrapper, #header-area {
max-width: 810px;

}

.sidebar-first #content {
width: 578px;
}

.target-main #content {
width: 100%;
}


}



@media only screen
and (max-width : 830px) {*/
/* Styles */

/*
#main-wrapper, #header-area {
max-width: 740px;

}

#sidebar-first {
width: 160px;
}

.sidebar-first #content {
width: 549px;
}

.target-main #content {
width: 100%;
}

#main-menu {
max-width: inherit;
}

#header {
top: 55px;
}

#logo {
top: 35px;
}

#header-bar {
margin-top: 20px;
}

#search {
top: -43px;
}

}


*/

/* Smartphones (portrait) ----------- */
/*@media only screen
and (max-width : 768px) {*/
/* Styles */
/*
.target-main #content h1 {
font-size: 36px;
}




}
*/

/* Smartphones (portrait) ----------- */
/*@media only screen
and (max-width : 755px) {*/
/* Styles */
/*
.sidebar-first #content {
width: 100%;
padding: 0;
}

#sidebar-first {
display: none;
}



}


*/
/* Smartphones (portrait) ----------- */
/*@media only screen
and (max-width : 480px) {*/
/* Styles */
/*}
*/

/* Smartphones (portrait) ----------- */
/*@media only screen
and (max-width : 320px) {*/
/* Styles */
/*}*/

.target-main #content .category-description{
padding: 10px 20px 0;
}

.target-main #content .category-description p, .target-main #content .category-description ul {
margin-left: 0;
margin-right: 0;
}

#logo{
margin-top: 0;
}

#logo img{
width: 110px;
}

Where do I add the part above? It seems like some things are referenced in this more than once.

[totaltec]

Nick,
To do this properly, you need to fully understand what I posted above. And I am not really giving you code samples there, just code examples, you need to determine what is right for your site.

CSS is read vertically by the browser starting from the top. Class definitions placed lower in the document override the ones above, if the same values are redefined in the class.

With the addition of media queries, now you need to take care with what exists within the media query brackets. All of the CSS that you referenced above exists at the top level, the classes are not contained within any brackets.

So anywhere that you place this code should be fine. Since you are defining the queries, the code inside will take precedence at that screen width, overriding the code above that are just general rules. I would create a new line under the closing bracket for #header-area. At the bottom of the file. but it could just as easily exist at the top. There are several theories about how to organize CSS in a logical manner. I prefer general definitions at the top, then more specific definitions below.