FAQtoid

Russell · Sep-20-2010, 04:57 PM #1

We are having trouble with the width of our gallery once our own CSS is applied.

It appears to be stuck on fixed width when we would like to make it stretch to 100%

Here is a link to our gallery
http://adfmedia.smugmug.com/

Is there anyway we can customise it? Has anyone got any code to get around this?

Thanks again

jfriend · Sep-20-2010, 05:43 PM #2

Several observations about your CSS:

You have identical CSS in both your advanced customization CSS and in a style.css external style sheet. Having the same CSS in two places is usually a maintenance disaster because you end up chasing your tail when you change it one place and the change doesn't work because the old CSS is still in the other place. Pick one or the other and don't use both.
You have specified a 900px width in several places, in both the rules for div#container and div#content_area. That's what you're getting, exactly what your CSS specifies. If you want that to be a different width, then change the relevant CSS. If I've misunderstood your question, please describe in more detail what you're asking.
Using the "reset CSS" that applies a bunch of CSS rules to a bunch of standard HTML tags is a bad idea on Smugmug. The reason is that Smugmug has a lot of HTML and CSS that makes pages work that assumes it's own CSS rules are in effect. You should not generically change things the way you have. You should scope those rules to only affect the pages and classes and IDs that you specifically want to influence, not changing things globally. If you do the global changes, you will forever be finding HTML/CSS layout stuff that doesn't work right because you've messed up the default display of things.
Are you sure you want to encase the content of every single page on Smugmug inside your own divs? You've put some open divs in the header and closing divs in the footer. While this gives you some capabilities you wouldn't otherwise have, it's also really easy to mess up pages that you don't intend to influence if you have global CSS rules that operate on those classes or IDs that they affect every single page on the site. You can generally CSS rules that are scoped to a specific kind of page and use either the <body> tag or the #bodyWrapper div to accomplish what you want without running the risk of messing up pages that you don't intend to change.

Russell · Sep-21-2010, 03:27 PM #3

Thanks jfriend i've fixed up some of the issues you mentioned above.

I might not have explained myself right

here is a picture of what i'm after

I want to stretch the red square to where the blue square is

jfriend · Sep-21-2010, 05:36 PM #4

There are two containing divs that are declared to be 750px wide which is why the content won't stretchy wider. One is #homepage (Smugmug's div and CSS), the other is #main_content (your div and your CSS).

You can fix the homepage div with this CSS:

#homepage {width: auto;}

I don't know if you only want the main_content div to go wider only on the homepage (since it's on all pages) or on all pages.

To make it wider only on the homepage, use this:

.homepage #main_content {width: auto;}

To make it fit it's container on all pages, use this:

#main_content {width: auto;}

Russell · Sep-21-2010, 08:06 PM #5

Awesome!!, works!

thanks for that!

bandaska · Nov-03-2010, 08:41 PM #6

Could you please help me, how the CSS would look like if I would like to use a specific width only on a specific page (gallery)?
I would like to have following page to have a width 700pix.
http://pixien.smugmug.com/Sampler/ab..._qJCkx#000000_

I've tried:

#about {width: 700;}

but that was definitely only a "nice try"

, which didn't work.
Thx for help.
Patrik

Quote:

Originally Posted by jfriend

There are two containing divs that are declared to be 750px wide which is why the content won't stretchy wider. One is #homepage (Smugmug's div and CSS), the other is #main_content (your div and your CSS).

You can fix the homepage div with this CSS:

#homepage {width: auto;}

I don't know if you only want the main_content div to go wider only on the homepage (since it's on all pages) or on all pages.

To make it wider only on the homepage, use this:

.homepage #main_content {width: auto;}

To make it fit it's container on all pages, use this:

#main_content {width: auto;}

Sniff Photography · Nov-03-2010, 09:03 PM #7

Russell -

I noticed that this:

Code:

ul li {
    background: url(../images/bkgrnd_li_bullet.gif) no-repeat 10px 6px;
    padding-left: 25px;

is causing this:

Sniff Photography · Nov-03-2010, 09:14 PM #8

Quote:

Originally Posted by bandaska

Could you please help me, how the CSS would look like if I would like to use a specific width only on a specific page (gallery)?
I would like to have following page to have a width 700pix.
http://pixien.smugmug.com/Sampler/ab..._qJCkx#000000_

I've tried:

#about {width: 700;}

but that was definitely only a "nice try"

, which didn't work.
Thx for help.
Patrik

Code:

.gallery_14395571 #albumDescription {width: 700px; margin: 0 auto 0;}

looks like:

Sniff Photography · Nov-03-2010, 10:00 PM #9

Russell -

You could also try customization #10 from THIS PAGE :
( I changed this from 28px to 30px which is as centered as I can get it before it wraps into two lines. )

Code:

/* ==================================================== */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ==================================================== */

.miniBox {width:122px; text-align:center; height:210px; margin:0 30px;}
  .miniBox .photo {float:none; width:122px; height:auto; _height:1px;}
  .miniBox .albumTitle {width:122px;}
  .miniBox .description {width:122px;}
  .miniBox .updated {width:122px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
  .loggedIn .miniBox .smbuttons {margin:0 auto; width:122px;}
  .loggedIn .miniBox input {width:122px;}
  .loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
  .albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
  .albumLarge .albumTitle {width:192px;}
  .albumLarge .description {width:192px;}
  .albumLarge .updated {width:192px;}

.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
  .loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
  .loggedIn .albumLarge input {width:192px;}
  .loggedIn .albumLarge textarea {width:182px;}

Which looks like this:

jfriend · Nov-03-2010, 10:06 PM #10

Quote:

Originally Posted by Sniff Photography

Russell -

You could also try customization #10 from THIS PAGE :
( I changed these from 122px to 126px which is as centered as I can get it before it wraps into two lines. )

Code:

/* ==================================================== */
/* == FAQ #18, Line up boxes with titles underneath === */
/* ============== Current as of 13 Feb 07 ============= */
/* ==================================================== */

.miniBox {width:126px; text-align:center; height:210px; margin:0 28px;}
  .miniBox .photo {float:none; width:126px; height:auto; _height:1px;}
  .miniBox .albumTitle {width:126px;}
  .miniBox .description {width:126px;}
  .miniBox .updated {width:126px;}

.loggedIn .miniBox {height:auto; min-height:300px;}
  .loggedIn .miniBox .smbuttons {margin:0 auto; width:126px;}
  .loggedIn .miniBox input {width:126px;}
  .loggedIn .miniBox textarea {width:112px;}

.boxBottom .albumLarge {width:192px; height:350px; text-align:center; margin:0 24px;}
  .albumLarge .photoLarge {float:none; width:192px; height:auto; _height:1px;}
  .albumLarge .albumTitle {width:192px;}
  .albumLarge .description {width:192px;}
  .albumLarge .updated {width:192px;}


.loggedIn .boxBottom .albumLarge {height:auto; min-height:450px;}
  .loggedIn .albumLarge .smbuttons {margin:0 auto; width:192px;}
  .loggedIn .albumLarge input {width:192px;}
  .loggedIn .albumLarge textarea {width:182px;}

Which looks like this:

FYI Brendan, sometimes it's easier to just change the margin (shown in yellow) in one place to modify the spacing rather than change all the widths. Narrower widths also reduce the space available for the text.

Sniff Photography · Nov-03-2010, 10:10 PM #11

P.S. -

You may need to change the first line from:

Code:

.miniBox {width:126px; text-align:center; height:210px; margin:0 30px;}

To this:

Code:

.miniBox {width:126px; text-align:center; height:320px; margin:0 30px;}

To accommodate some of your longer gallery descriptions.

Sniff Photography · Nov-03-2010, 10:25 PM #12

Quote:

Originally Posted by jfriend

FYI Brendan, sometimes it's easier to just change the margin (shown in yellow) in one place to modify the spacing rather than change all the widths. Narrower widths also reduce the space available for the text.

Sorry John -

I changed my original post to reflect this

. I'm no expert, just trying to help. Thank you for catching my over-thinking a simple fix

.

jfriend · Nov-03-2010, 10:44 PM #13

Quote:

Originally Posted by Sniff Photography

Sorry John -

I changed my original post to reflect this

. I'm no expert, just trying to help. Thank you for catching my over-thinking a simple fix

.

No need to apologize. I'm glad you're helping out here. I just thought I'd share an easier way that also keeps full space for the text so you both could see another option. Keep up the good work.

Sniff Photography · Nov-03-2010, 10:48 PM #14

Thanks Mr. Scripting dude-volunteer

bandaska · Nov-05-2010, 06:38 PM #15

Quote:

Originally Posted by Sniff Photography

Code:

.gallery_14395571 #albumDescription {width: 700px; margin: 0 auto 0;}

looks like:

Hey guys!

I knew it will be an "easy trick"! ;) Thanks a lot. Very very appreciated!


Similar Threads	Thread Starter	Forum	Replies	Last Post

Homepage problems with slideshow in Safari.	DulaMug	SmugMug Customization	6	Jul-15-2010 10:50 AM
Please help with creating a center window	Weidotcom	SmugMug Customization	9	Oct-14-2009 07:06 PM
Is this possible??	Gadget_Girl	SmugMug Customization	29	Nov-11-2008 06:36 PM
Google Maps in a specific gallery rather than the homepage	shrekie	SmugMug Customization	0	Mar-06-2008 06:20 PM
Howto have a ss & the homepage gallery but on 2 different pages	Redskeeter	SmugMug Customization	13	Mar-12-2006 10:04 AM

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

FAQtoid

Dgrin Challenges

Need some help with Accessories?

Tutorials

The Hot Seat

Africa!

SmugMug How To:

SmugMug News:

SmugMug Status

Sep-20-2010, 04:57 PM #1
Russell ^OP Beginner grinner Join Date: Sep 2010 Posts: 3	Customisation of Width of Homepage Gallery We are having trouble with the width of our gallery once our own CSS is applied. It appears to be stuck on fixed width when we would like to make it stretch to 100% Here is a link to our gallery http://adfmedia.smugmug.com/ Is there anyway we can customise it? Has anyone got any code to get around this? Thanks again

Sep-20-2010, 05:43 PM #2
jfriend Scripting dude-volunteer Join Date: Mar 2005 Location: San Francisco Bay Area, California Posts: 24,571	Several observations about your CSS: You have identical CSS in both your advanced customization CSS and in a style.css external style sheet. Having the same CSS in two places is usually a maintenance disaster because you end up chasing your tail when you change it one place and the change doesn't work because the old CSS is still in the other place. Pick one or the other and don't use both. You have specified a 900px width in several places, in both the rules for div#container and div#content_area. That's what you're getting, exactly what your CSS specifies. If you want that to be a different width, then change the relevant CSS. If I've misunderstood your question, please describe in more detail what you're asking. Using the "reset CSS" that applies a bunch of CSS rules to a bunch of standard HTML tags is a bad idea on Smugmug. The reason is that Smugmug has a lot of HTML and CSS that makes pages work that assumes it's own CSS rules are in effect. You should not generically change things the way you have. You should scope those rules to only affect the pages and classes and IDs that you specifically want to influence, not changing things globally. If you do the global changes, you will forever be finding HTML/CSS layout stuff that doesn't work right because you've messed up the default display of things. Are you sure you want to encase the content of every single page on Smugmug inside your own divs? You've put some open divs in the header and closing divs in the footer. While this gives you some capabilities you wouldn't otherwise have, it's also really easy to mess up pages that you don't intend to influence if you have global CSS rules that operate on those classes or IDs that they affect every single page on the site. You can generally CSS rules that are scoped to a specific kind of page and use either the <body> tag or the #bodyWrapper div to accomplish what you want without running the risk of messing up pages that you don't intend to change. __________________ --John Homepage • Popular JFriend's javascript customizations • Secrets for getting fast answers on Dgrin Always include a link to your site when posting a question

Sep-21-2010, 03:27 PM #3
Russell ^OP Beginner grinner Join Date: Sep 2010 Posts: 3	Thanks jfriend i've fixed up some of the issues you mentioned above. I might not have explained myself right here is a picture of what i'm after I want to stretch the red square to where the blue square is

Sep-21-2010, 05:36 PM #4
jfriend Scripting dude-volunteer Join Date: Mar 2005 Location: San Francisco Bay Area, California Posts: 24,571	There are two containing divs that are declared to be 750px wide which is why the content won't stretchy wider. One is #homepage (Smugmug's div and CSS), the other is #main_content (your div and your CSS). You can fix the homepage div with this CSS: #homepage {width: auto;} I don't know if you only want the main_content div to go wider only on the homepage (since it's on all pages) or on all pages. To make it wider only on the homepage, use this: .homepage #main_content {width: auto;} To make it fit it's container on all pages, use this: #main_content {width: auto;} __________________ --John Homepage • Popular JFriend's javascript customizations • Secrets for getting fast answers on Dgrin Always include a link to your site when posting a question

Sep-21-2010, 08:06 PM #5
Russell ^OP Beginner grinner Join Date: Sep 2010 Posts: 3	Awesome!!, works! thanks for that!

Nov-03-2010, 09:03 PM #7
Sniff Photography Major grins Join Date: Sep 2010 Location: Glendale, WI Posts: 114	Russell - I noticed that this: Code: ul li { background: url(../images/bkgrnd_li_bullet.gif) no-repeat 10px 6px; padding-left: 25px; is causing this: Attached Images __________________ « Brendan » Sniff Photography

Nov-03-2010, 10:10 PM #11
Sniff Photography Major grins Join Date: Sep 2010 Location: Glendale, WI Posts: 114	P.S. - You may need to change the first line from: Code: .miniBox {width:126px; text-align:center; height:210px; margin:0 30px;} To this: Code: .miniBox {width:126px; text-align:center; height:320px; margin:0 30px;} To accommodate some of your longer gallery descriptions. __________________ « Brendan » Sniff Photography Last edited by Sniff Photography; Nov-05-2010 at 08:31 PM.

Nov-03-2010, 10:48 PM #14
Sniff Photography Major grins Join Date: Sep 2010 Location: Glendale, WI Posts: 114	Thanks Mr. Scripting dude-volunteer __________________ « Brendan » Sniff Photography