Community & Support

How do I change a fixed-width theme so my Gallery module fits?

I don't know what happened to my other thread, but I have photos for examples now:

I'm trying to increase the width of a fixed-width theme so everything in my gallery fits correctly. How can I do this simply and easily? Below is a photo of the problem:
http://img20.imageshack.us/img20/9786/problemo.png

Comments

The first thing you need to

The first thing you need to do is to find out what exactly is setting the current width and there is a great tool to do just that.

First you need to get Firefox (browser) unless you are already using it. Next, go to tools -> add-ons -> browse all add-ons (on right side of window) and then search for Firebug and install it!

Now .. open your site with your new Firebug enable Firefox browser and then look in the lower right of your screen for the bug and click on it. Then click on Inspect and move your mouse over your web page. You will see different things light up and the corresponding CSS will show up in the lower right.

The way you find the CSS that is setting the width is like this.

1) Start by clicking on your picture.
2) In the Firebug panel below to the right of where you see Inspect, Edit, Etc you see the nested elements of your page. Traverse out from the img element until you get to the outermost element or an element where you see on the right something like width: 600px;.
3) Note which css file that css definition is located. Chance are it is in the screen.css file if you are using a theme.
4) Download that file using ftp to your computer and open it in a text editor like notepad or notepad++.
5) Do a search for 600px or whatever your actual width is.
6) Change the width to whatever you'd like ..
7) Save the file.
8) Rename the screen.css file on your website to something like BU_screen.css or whatever so you have a copy.
9) Copy your edited screen.css to your website.

Now .. your width should be wider but other things may be out of place. If your lucky everything else will flow .. but for those things that don't seem quite right simply use Firebug again to find the line of css code that is causing the problem. If you find something in a file "other" than screen.css .. DO NOT change the other file ... Simply add a new line in your screen.css with whatever you need to fix the problem and likely it will override the previous css being changed. If it doesn't you can see that in Firebug and here is where you might have to read a little bit about css and how it works.

Good luck. ;-)

Thanks a ton! I was

Thanks a ton! I was eventually able to track down the class causing the problem and fix the other classes to make everything fit! I don't know how I lived without Firebug!

Ha ha!

I know! It's like being able to see after being blind. lol