By thebiles on

Hello,

I've been using the Acquia Slate theme with my site, but certain images in the gallery will protrude from the border of the theme. I'm only using a left sidebar, so the right side is empty (so there shouldn't be any reason they would overlap). Is there any way I can manually edit this quickly? Here's an example of what I'm talking about:

EDIT: Apparently that link is broken. Now for some reason I can't even view individual galleries after updating Drupal. Great!

⋅ Categories: Drupal 6.x

Comments

vm’s picture

vm commented

in a fixed width theme you have two options.

make the images smaller so that they will fix or expand the theme wider so that they will fit.

I'd choose the former over the latter.

thebiles’s picture

thebiles commented

The images aren't actually very large (the default is something like 640x640), so making them smaller would be not favorable. The images themselves aren't the only things that overlap, however. Things like menu buttons also run over, and I can't really make them smaller.

vm’s picture

vm commented

I don't know what you mean by menu buttons. If you mean in the gallery at the top above the image, that is a fluid div and is expanding because the image is. The area that the image is in is smaller than 640 pxls.

useing the firefox browser with the firebug addon will help you target that area and locate where in the css file you can change it's size. Though doing so, users who have a monitor smaller than the fixed with size will be presented with horizontal scroll bars as the image will stil be too large for their monitor.

Another option would be to forego the acquia_slate theme and use a theme that is fluid rather than fixed. Though this won't help issues with users who have smaller monitor resolution settings.

thebiles’s picture

thebiles commented

Did you even check the link I posted? Basically everything overflows from the fixed area. Text, menus, and images. They also flow PAST the image, so I know it isn't stretching to fit the image.

vm’s picture

vm commented

Yes, I had looked at the link you posted. Both the sidebar AND the content area are fixed as you will learn in this comment. When you used the word menus, I looked at the side bar not realizing you meant the divs above and below the image.

ok, so I left out a word I stated "image". I meant "image area" which is defined by the gallery script.

Let's step back for a moment and revisit:

It's basic math.
your image is taking up 640 pxls of the content area by itiself. The divs above and below the image (that you are calling menus, menu buttons) are set to be a smidge wider than the image itself by the css that gallery is using. Excuse the fact that when you said "menus" I looked the the menus in the sidebar.
That said, the theme you are using (acquia slate), has a content area is not able to hold the image (@ 640pxls) and the the padding being used in the theme from gallery.

If you aren't willing to reduce the images the 50 or so pxls necessary for the image and the div above and below the image to fit in the content area, you have to expand the content area to accomodate the image and the divs above and below the image. At that point you may choose to reduce the side bar by the same amount as you increase the content area, ensuring that it's fixed design remains intact.

therefore the three options previously mentioned are still in play.

reduce the size of the image so that it fits in the fixed content area. or ...
expand the fixed content area of the theme so that the image fits. or ...
use a fluid theme.

If you want to alter the current theme (acquia slate)
Located below is what I found using firefox and the firebug addon:

Open your themes style.css file

FIND (around line 578)

body.layout-first-main #content-wrapper {
margin:0;
width:710px;
}

note the fixed width in pxls. increase it.

now, if you want to shrink the left sidebar by the same amount

FIND: (around line 573)

body.layout-first-main #sidebar-first {
margin:0 20px 0 0;
width:230px;
}

note the fixed width of the sidebar in pxls. decrease it.

Note: by altering the theme, in this way you won't be able to update the theme as your changes will be overwritten when updating. Therefore you will have to keep a list of what it was you changed in the case that a theme update is released so that you can make those changes to the updated theme.

Now another method (option 4) would be to reduce the size of the divs above and below the image itself, but this would be done in gallerys css and not in drupal. If this is something you want to try to work with, again I point you to firefox and the firebug addon.

kpalaniuk’s picture

kpalaniuk commented

Please help! I have the exact same problem but I know there is a way to change the Acquia Theme css so the middle frame is fluid. I would love for it to default at the current size in pixels but be able to stretch if content goes beyond that px size. Problem is, I don't know any css to know where to change that.

IF anyone could just offer advice on how to do that I think maybe people using a fixed width theme who wants to make part of it conditionally fluid would benefit from this.

Thanks very much!

Kyle