Permlink Replies: 8 - Pages: 1 - Last Post: 10-Apr-2010 15:27 Last Post By: ctwist
kristoffer

Posts: 46
Registered: 7-Dec-2007
Customizable widget bar colors
Posted: 30-Mar-2010 15:42
  Click to reply to this thread Reply
We have recently added the ability to customize the colors of the widget bar. There are currently two "prepared" color combinations available, "black" (the old color combination, which still is default) and "white". You can decide which color combination to use by adding a single line of javascript to your skin:

<script type="text/javascript" charset="utf-8">
	_jaWidgetBarColor = "white";
</script>


You can also combine this with the style selection of your skin. So if you have a dark style you can make sure that the black version of the bar is used and if you have a light style you can make sure that the white version is used. Here's an example of how to do this:

<ja:if test="<%= "Light.css".equals(style) %>">
	<script type="text/javascript">
		_jaWidgetBarColor = "white";
	</script>
</ja:if>


If you want even further control you can inject your very own CSS file that overrides any color of your choice. This is also done by adding a single javascript line. Here's a hypothetical example of a Red style that uses the white color combination as a base and then overrides a selection of styles with red colors defined in the file "widgets-red.css" (could be put in either the "Red" style directory, or in the "res" directory).

<ja:if test="<%= "Red.css".equals(style) %>">
	<script type="text/javascript">
		_jaWidgetBarColor = "white";
		_jaWidgetStyle = "${resPath}/widgets-red.css";
	</script>
</ja:if>


Attached to this post are the two style files used for the black and white color combinations. You can use these as templates if you want to write your own color combination.

Give it a try and let us know what you think!
RobM

Posts: 3,095
Registered: 4-Aug-2006
Re: Customizable widget bar colors
Posted: 31-Mar-2010 00:11   in response to: kristoffer in response to: kristoffer
  Click to reply to this thread Reply
Very cooll :-)

Could you please provide sufficient information on how to change the background images? For example, the widgetsbg.png file. If I want a transparent blue what do I need to do?

Have you thought of providing your widget images in a zip file so users can easily make custom changes to them?
kristoffer

Posts: 46
Registered: 7-Dec-2007
Re: Customizable widget bar colors
Posted: 31-Mar-2010 09:35   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
Attachment white.zip (30.6 KB)
Attachment black.zip (30.9 KB)
Then you would override the background-image property for #jalbumwidgetcontainer (the first styled defined in the examples). So if you put a blue widgetsbg.png in the styles/Blue directory you would add something like this in your widgets-blue.css (which also should go in the styles/Blue directory):

#jalbumwidgetcontainer {
    background-image:url(widgetsbg.png);
    background-color:blue;
}


I have attached two zip files containing all the images to this post.

Edited by: kristoffer on 31-Mar-2010 09:35
davidekholm

Posts: 3,560
Registered: 18-Oct-2002
Re: Customizable widget bar colors
Posted: 31-Mar-2010 11:13   in response to: kristoffer in response to: kristoffer
  Click to reply to this thread Reply
Thanks for this addition Kris!
RobM

Posts: 3,095
Registered: 4-Aug-2006
Re: Customizable widget bar colors
Posted: 31-Mar-2010 22:39   in response to: kristoffer in response to: kristoffer
  Click to reply to this thread Reply
Hi Kris.
Thanks for the update and the two zip files.

I have tried to use my own widgetsbg.png image, modifying one of the original images, but I seem to loose the transparency. There are a load of options when saving png's, is there a particular setting that needs to be used? Having said that though, I notice that most new widget backgrounds are now a solid colour, rather than transparent.

Anyway, I can now make a better customised widget colour scheme than I've done before.
kristoffer

Posts: 46
Registered: 7-Dec-2007
Re: Customizable widget bar colors
Posted: 01-Apr-2010 09:18   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
I'm not sure about that one, you'll have to ask Laza :)

You can also remove the background image and just use a solid background color:

#jalbumwidgetcontainer {
    background-image:none;
    background-color:blue;
}
RobM

Posts: 3,095
Registered: 4-Aug-2006
Re: Customizable widget bar colors
Posted: 09-Apr-2010 00:52   in response to: kristoffer in response to: kristoffer
  Click to reply to this thread Reply
I found out how to use a transparent png image (easiest way is to use PNG24 rather than PNG8) but it turns out not all browsers support transparent PNGs yet!) and it can give a really nice multi-shaded background effect.
I've had a play around and got a custom scheme to work - see my demo custom widget colours

I've updated my Notables skin to allow the use of custom widget colours/images - will be releasing it soon. Thanks to everyone who has helped me.
kristoffer

Posts: 46
Registered: 7-Dec-2007
Re: Customizable widget bar colors
Posted: 09-Apr-2010 09:41   in response to: RobM in response to: RobM
  Click to reply to this thread Reply
IE6 doesn't support transparent PNGs, but all modern browsers do (and also IE7). We are no longer officially supporting IE6 on our own site (and recommend anyone still using it to either switch or to upgrade), when we first built the widgets we were still supporting it (so that's why we aren't using transparent PNGs in the widget bar).

Cool color scheme :)
ctwist

Posts: 543
Registered: 27-Sep-2003
Re: Customizable widget bar colors
Posted: 10-Apr-2010 15:27   in response to: kristoffer in response to: kristoffer
  Click to reply to this thread Reply
My implementation of this feature provides a more compact solution. I already have a JavaScript file common.js, which is included in each index and slide page. I just needed to add 1 line to this file:
_jaWidgetBarColor = "white";
To accomplish this, I did the following:
  • In each style's css file that requires a white widget bar, add:
    <%
    String widgetBarColor = "white";    // The Widget bar's colour scheme
    %>
    
  • In common.js, add:
    <%= widgetBarColor == void ? "" : "_jaWidgetBarColor = \"" + widgetBarColor + "\";" %>
    
  • In index.java, when processing the first index page, add:
engine.processTemplateFile(new File(skinResDirectory, "common.css"), new File(resDirectory, "common.css"));
Alternatively, if you don't use compiled java, in index.htt add this (I haven't tested this):
<%
if (level == 0 && (totalIndexes == void || indexNum == 1)) {
	engine.processTemplateFile(new File(skinResDirectory, "common.css"), new File(resDirectory, "common.css"));
}
%>
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums