Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

Page Width
 
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)
 
Thread Tools Search this Thread
  #1  
Old 09-05-2014, 05:12 AM
 
GreatLakesVacuum GreatLakesVacuum is offline
 

eXpert
  
Join Date: Jan 2009
Posts: 286
 

Default Page Width

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
__________________
X-Cart 4.5.4 Gold (Live Business Site)
X-Cart 5.1.9 Business (In Development Now)
Reply With Quote
  #2  
Old 09-05-2014, 06:25 AM
  totaltec's Avatar 
totaltec totaltec is offline
 

X-Guru
  
Join Date: Jan 2007
Location: Louisville, KY USA
Posts: 5,825
 

Default Re: Page Width

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.
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey

XcartGuru
X-cart Tutorials | X-cart 5 Tutorials

Check out the responsive template for X-cart.
Reply With Quote

The following user thanks totaltec for this useful post:
qualiteam (09-08-2014)
  #3  
Old 09-05-2014, 06:50 AM
 
GreatLakesVacuum GreatLakesVacuum is offline
 

eXpert
  
Join Date: Jan 2009
Posts: 286
 

Default Re: Page Width

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
__________________
X-Cart 4.5.4 Gold (Live Business Site)
X-Cart 5.1.9 Business (In Development Now)
Reply With Quote
  #4  
Old 09-05-2014, 07:22 AM
  totaltec's Avatar 
totaltec totaltec is offline
 

X-Guru
  
Join Date: Jan 2007
Location: Louisville, KY USA
Posts: 5,825
 

Default Re: Page Width

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.
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey

XcartGuru
X-cart Tutorials | X-cart 5 Tutorials

Check out the responsive template for X-cart.
Reply With Quote
  #5  
Old 09-05-2014, 07:32 AM
 
GreatLakesVacuum GreatLakesVacuum is offline
 

eXpert
  
Join Date: Jan 2009
Posts: 286
 

Default Re: Page Width

Quote:
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.
__________________
X-Cart 4.5.4 Gold (Live Business Site)
X-Cart 5.1.9 Business (In Development Now)
Reply With Quote
  #6  
Old 09-05-2014, 07:38 AM
 
GreatLakesVacuum GreatLakesVacuum is offline
 

eXpert
  
Join Date: Jan 2009
Posts: 286
 

Default Re: Page Width

Quote:
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?
__________________
X-Cart 4.5.4 Gold (Live Business Site)
X-Cart 5.1.9 Business (In Development Now)
Reply With Quote
  #7  
Old 09-05-2014, 08:14 AM
  totaltec's Avatar 
totaltec totaltec is offline
 

X-Guru
  
Join Date: Jan 2007
Location: Louisville, KY USA
Posts: 5,825
 

Default Re: Page Width

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:
Code:
@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:
Code:
@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/
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey

XcartGuru
X-cart Tutorials | X-cart 5 Tutorials

Check out the responsive template for X-cart.
Reply With Quote
  #8  
Old 09-05-2014, 09:17 AM
 
GreatLakesVacuum GreatLakesVacuum is offline
 

eXpert
  
Join Date: Jan 2009
Posts: 286
 

Default Re: Page Width

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:

Code:
/*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.
__________________
X-Cart 4.5.4 Gold (Live Business Site)
X-Cart 5.1.9 Business (In Development Now)
Reply With Quote
  #9  
Old 09-05-2014, 10:41 AM
  totaltec's Avatar 
totaltec totaltec is offline
 

X-Guru
  
Join Date: Jan 2007
Location: Louisville, KY USA
Posts: 5,825
 

Default Re: Page Width

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.
__________________
Mike White - Now Accepting new clients and projects! Work with the best, get a US based development team for just $125 an hour. Call 1-502-773-6454, email mike at babymonkeystudios.com, or skype b8bym0nkey

XcartGuru
X-cart Tutorials | X-cart 5 Tutorials

Check out the responsive template for X-cart.
Reply With Quote
Reply
   X-Cart forums > X-Cart 5 > Modifying the design and features (X-Cart 5)


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 01:11 PM.

   

 
X-Cart forums © 2001-2018