ericb1 
New Member
Posts: 6
 |
| 02/23/2007 01:07 AM |
|
Hi, I'm still new to DNN, but I like the beyondCSS skin, but I was wondering how to change the color palette: My site logo is red, so I just want to change the default palette color to the red selection. Is there an easy way to do this?
Also, is there a way to include my logo within the skin? My default logo is red, but if someone changes the color palette to the blue one, I'd like to be able to also change to a blue version of my logo image that I have.
Any help is appreciated, thanks! |
|
|
|
|
Vasilis
Yellow Member
Posts: 315
|
| 02/26/2007 01:43 PM |
|
Hi,
To make the red palette the default one, just edit the palettes.xml and rename the current "Default" palette to "Blue" and the "Red" to "Default". As you can read in the comments at the top area of the palettes.xml file:
"The element with the "name" of "Default" will be used if user has not made a selection".
Your second task is a little more complicated. What I'd try is to use the logo as a background image. So again in the palettes.xml instead of
< Color name="Background" value="#FFF" />
you could try
< Color name="Background" value="URL(yourredlogo.jpg) 10px 10px no-repeat #FFF" />
for the "Red" palette
< Color name="Background" value="URL(yourgreenlogo.jpg) 10px 10px no-repeat #FFF" />
for the "Green" palette... and so on.
Then instead of your real logo, use a transparent GIF image with the same size to make the logo area clickable.
I haven't tried this method but normally it should work.
Let me know!
Cheers
|
|
|
|
|
ericb1
New Member
Posts: 6
|
| 03/01/2007 12:17 PM |
|
Thanks so much Vasilis! That works well, except that the static positioning of the background works only for 1 of the 3 different width layout options that a user can select.
Is there a way to perhaps have separate palettes.xml files or some other way to specify positioning for the background for the 3 different width layouts? I really like the feature of having the different layout options for the user to choose from, I'd like to keep that and still be able to change colors.
Thanks again for all your help! |
|
|
|
|
Vasilis
Yellow Member
Posts: 315
|
| 03/14/2007 09:52 PM |
|
Hi,
You're right! The solution I gave you adds the logo as background image to the body of our page which is not what we want and gives that static positioning issue.
I think the solution I describe below will do it right!
Open your palettes.xml and for each palette, add a new color node with the name 'Logo'. Everything else stays as it was initially:
< Palette name="Default">
< Color name="Logo" value="yourlogo.jpg" />
< Color name="Background" value="#FFF" />
...
< /Palette>
< Palette name="Hi-Contrast">
< Color name="Logo" value="yourlogoHi.jpg" />
< Color name="Background" value="#000" />
...
< /Palette>
< Palette name="Green">
< Color name="Logo" value="yourlogoGreen.jpg" />
< Color name="Background" value="#FFF" />
...
< /Palette>
and so on.
Then open the skincolor.css and add the following line somewhere:
#mainwrapper{background:url([Logo]) 10px 10px no-repeat;}
That's it.
Of course that is a background image so it won't be clickable. If you want to make it clickable you can try the trick with the transparent gif as I mentioned in the previous post.
Let me know
Cheers |
|
|
|
|