With certain Wordpress Themes, particularly three column Wordpress themes, content is usually set to a smaller than a screen size width. Displaying Gallery2 content within these types of themes is often challenging because of the limitation of working with a limited/reduced width. One technique to help display Gallery2 Output in these situations, is to create an alternative Wordpress Header. This custom header will automatically be outputted only when displaying WPG2 Ouput, thus allowing you to stylise your Gallery2 Output by specifying a different stylesheet, different widths or even removing your wordpress sidebars help give your Gallery2 output some extra width.
What is firebug you ask? It really might turn out to be the best web development extension for Firefox ever made. This is a must have that no Web developer should do without.
I’m serious - you need Firebug. Since I have been more active on the web development scene, I have used only two tools to create, interrogate and fix web sites. Firebug and the Web Developer extensions, and UltraEdit, the king of all text editors (in my humble opinion.) Occasionally I will use TopStyle to more in depth css design, but after my most recent rebuild I have not installed it and have never missed it.
Firebug lets you view and edit the HTML and CSS of any page. It tells you exactly which CSS rules affect the styling of the element you select in the style inspector - not only which rules affect it directly but also which rules it inherits properties from.
More thoughts here: http://www.marcnjami.com/web-design/firebug
One of the keys to using Firebug as a CSS troubleshooter is the ability to turn off and change individual CSS elements to see what effect they have. Here's what I do to troubleshoot CSS:
1. Right click on the element that's giving you trouble and select "Inspect Element" at the bottom of the popup menu.
2. On the right side of the Firebug panel that appears at the bottom of the screen, you'll have all of the CSS that is being applied to the element that is highlighted in the left side of the panel.
3. Since CSS is "layered" the most relevant CSS definition is at the top, working down through all of the other CSS elements that apply to the selected element.
4. If you put your cursor just to the left of a specific CSS attribute and left click, that attribute will be temporarily disabled, with a red crossed circle showing next to that attribute. You can turn it back on by left clicking it again.
5. You can change the name or value of an attribute by left clicking them and typing in the new value.
6. You can add a new attribute by hitting the "Enter" button while editing the last value in a CSS element. Type the new name and then the new value.
7. You can switch elements in the left part of the panel by left clicking on the element's tag (img, a, div, etc.)
I'll add some screenshots to this post over time. The best way to learn your way around Firebug is to right and left click your way around everything in it. Since all of the changes you make are only to the temporary copy stored in your memory, if you make a change you can't figure out how to reverse, all you have to do is reload the page, and you're back to a fresh page from the server.
