G2-Sites.com - Your FREE Gallery Directory
G2-Sites.com is a showcase of Gallery 1 and Gallery 2 powered websites. Sites are categorized by embedded environment and language. If your site is powered by Gallery we want to see it!
Understanding where NZDI css is stored and how it works
Submitted by SalemKayaker on 12 July, 2007 - 04:25.
I was able to install and then clone the NZDI theme and colorpacks. I like the fixed-width light grey color pack option.
In any case, I am now trying to further customize the look. I wanted to change the width of the centered div #gallery from the NZDI colorpack default of 760px to 820px. That had an effect, i.e. the centered gallery got wider but it is now 834px wide rather than 820px..
I am a bit confused as to what is set in the color.css file under the colorpack directory tree and what is set by the theme.css file under the theme directory tree.
Also, the gallery div seems to be having a class applied called "gecko" but when I search through the color and theme css files, I do not find a .gecko class.
So... How do the two css files (theme and color) work together and where is the .gecko class being defined?
TIA,
--Doug
SalemKayaker
Doug,
In answer to your questions above regarding how the CSS files are applied to the theme I will point you to an article that explains how CSS hierarchy works.
This should hopefully give you a better understanding of things.
What are you using to edit and debug your CSS files? If you are using Firefox, as I suspect you are then there are lots of great development tools available.
The .gecko class is of no consequence unless you are applying styling to this class. If you open up your gallery in IE and view the source you will notice that you have an .IE class instead of the .gecko class. This will allow you to easily add specific styling to specific browsers.
I have just had a quick look at the code and the .gecko and .IE classes look like they are both defined in the theme.tpl file with the following:
<div {g->mainDivAttributes}>Thanks for explaining the .gecko class for Firefox and .IE class for Internet Explorer situation.
As you point out, Firefox has some really nice web development tools.
I do have a dim conceptual understanding of CSS and I understand that one can have more than one external CSS file... I was just wondering what the rational was for NZDI to have two different locations for CSS styles. Philosophically, how did you decide which style elements went in which place.
Any way, thanks for the help. I do like the theme a lot. (I actually have another question... But its on a different topic entirely so I will start another thread.)
--Doug
SalemKayaker
Doug,
If you have a look at the source of the page you will notice, depending on what modules you are using that there are several style sheets applied, plus some gereric styling core applied via the gallery2/modules/core/data/gallery.css file.
The NZDI specific ones are: /gallery2/themes/nzdi/theme.css and the ones contained in the colorpacks.
The colorpack css files are only applied when you have elected to use a colorpack in the themes configuration.
The main theme.css contains styling for all of the elements in the theme which I have decided to apply styling to.
Essentially the values defines in the colorpacks take precedence over the ones defined in the theme.css file (or any other css file). The !important ensures that these values are applied. In general terms you would not be styling elements in the colorpack that you have not already applying styling to in the theme.css file.
The location of the colorpacks is defined in the core application and not part of a particular theme as such. There are hooks that allow you to call on the colorpacks and apply them.