Here is how to change the color scheme of Kablink

(Average rating is 5.0 from 4 ratings.)

659 visits 24 comments

222. Here is how to change the color scheme of Kablink

Peter Hurley (Novell)

Jul 23, 2009 10:12 AM

Modified By

Peter Hurley (Novell)

Feb 20, 2010 2:50 PM

Kablink Component

Teaming

There is a fairly simple way to change the color scheme. There is a call out from jsp/common/view_css.jsp that includes a customizable jsp that can be used to overwrite the default CSS styles used in Kablink.

I have attached a sample file (ss_call_out_css_init.jsp) that redefines the many of the common colors used in Kablink. Copy this file to "webapps/ssf/WEB-INF/jsp/custom_jsps" in your installation. You do not need to restart the server. The changes will take effect immediately.

The colors I used are just an example. They are various shades of gray. I made no effort to make this look particularly good. If you make some nice color schemes that others can use, feel free to add them to this entry.

Edit History

Version 2 adds support for changing the workspace/folder toolbar color

Workflow
Process	State	Action
Discussion workflow	Active

Attachments:
xxx Having trouble? xxx

ss_call_out_css_init.jsp

Feb 20, 2010 2:48 PM

4 KB

Peter Hurley (Novell)

Previous Versions (1)

Version 1

Jul 23, 2009 10:12 AM

3 KB

Peter Hurley (Novell)

Replies

Barney Barnes

Jul 24, 2009 6:03 PM

222.1. Re: Here is how to change the color scheme of Kablink

hi peter

this is great. i wish i had this over the past few months of testing, but not to worry this sorts out the theme issue for now, though

on a basic level it does the job!!

many thanks

barneyb

Attachments:
xxx Having trouble? xxx

Marcel Dekker

Jul 26, 2009 11:05 AM

Modified By

Marcel Dekker

Jul 26, 2009 11:54 AM

222.2. Antw: Here is how to change the color scheme of Kablink

Hi All,

great to find this feature. I'm in the process of putting everything I changed on our install in the file from Peter. So I will post this shortly on this site together with a custom color scheme from the Personal Preferences menu (which is now removed but still used). It's now some 40% ready, but it will take me another couple of days to finish. I will explain everything in the file.

In order to change all the colors used in Kablink you'll need to edit the file css_theme_defaultblue.jsp quite a bit as well, so I will post that file also.

I think this will be a good start to create some documentation on creating custom color schemes for Kablink. I hope we can extend this later with information on how to change the standard layout as well.

If anyone wants to help out let me know.

Marcel

Attachments:
xxx Having trouble? xxx

Peter Hurley (Novell)

Jul 30, 2009 8:23 AM

222.3. Re: Here is how to change the color scheme of Kablink

Has anyone made a new gradient png file to replace the greenish gradient in the masthead area? If so, post it for everyone else to use.

Attachments:
xxx Having trouble? xxx

Barney Barnes

Aug 7, 2009 8:44 AM

222.4. Re: Here is how to change the color scheme of Kablink

hi peter

i have tried this solution on the kablink system and all works great, but when i apply it to my novell t2 install nothing appears to change.

any suggestions?

thanks in advance

barneyb :-)

Attachments:
xxx Having trouble? xxx

Peter Hurley (Novell)

Aug 10, 2009 7:31 AM

222.4.1. Re: Re: Here is how to change the color scheme of Kablink

This should work fine on Novell Teaming V2. Make sure you put the custom jsp in the right directory.

Attachments:
xxx Having trouble? xxx

Dirk Beemelmanns

Aug 12, 2009 6:02 AM

222.5. some colors to work with

here are some colors you can play with.

use gradient with 800px width / 1px height

Attachments:
xxx Having trouble? xxx


masthead_bg_black.png	Aug 12, 2009 6:02 AM	1 KB	Dirk Beemelmanns

masthead_bg_blue.png	Aug 12, 2009 6:02 AM	1 KB	Dirk Beemelmanns

masthead_bg_grey.png	Aug 12, 2009 6:02 AM	1 KB	Dirk Beemelmanns

masthead_bg_orange.png	Aug 12, 2009 6:02 AM	1 KB	Dirk Beemelmanns

Lynn Douglas Christensen

Aug 14, 2009 12:34 PM

222.6. Re: Here is how to change the color scheme of Kablink

Hi Brent,

can I customize the CSS for the KaBlink site using this method?

Attachments:
xxx Having trouble? xxx

Brent McConnell

Aug 14, 2009 3:31 PM

222.6.1. Re: Re: Here is how to change the color scheme of Kablink

Sure, do you have some ideas?

Attachments:
xxx Having trouble? xxx

Lynn Douglas Christensen

Aug 15, 2009 12:53 PM

222.6.1.1. Re: Re: Re: Here is how to change the color scheme of Kablink

Yes, mostly I'm seeing layout issues that can be fixed without effecting content. Do I have access to the file system to add this CSS.jsp?

Attachments:
xxx Having trouble? xxx

Brent McConnell

Aug 16, 2009 10:26 AM

222.6.1.1.1. Re: Re: Re: Re: Here is how to change the color scheme of Kablink

No, if you make the changes and send them to me or post them here I can add them.

Attachments:
xxx Having trouble? xxx

Lynn Douglas Christensen

Aug 17, 2009 1:38 PM

222.7. Re: Here is how to change the color scheme of Kablink

Sending every little change to you would be very inefficient. Some of the changes will be experiments to make sure they don't effect content. I'll try setting up my own Teaming server to apply the changes and then we can deliver them through the regular releases.

Attachments:
xxx Having trouble? xxx

Brent McConnell

Aug 17, 2009 4:01 PM

222.7.1. Re: Re: Here is how to change the color scheme of Kablink

I'm always open to changes and experiments but do consider that this is a production system so I need to have some level of control and review before changing things.

Attachments:
xxx Having trouble? xxx

Marcel Dekker

Dec 21, 2009 5:18 AM

222.8. Antw: Here is how to change the color scheme of Kablink

I have made changes to our Kablink site with the file mentioned by Peter, but when using images as a background for tables on some pages the images cannot be found. This is because on some places in the system the url's used to open pages is constructed a bit different then normal and the path I placed in the file to the image isn't right on those pages. I'm using a path like ../ssf/a/path_to_image_folder. Using the variable <html:rootPath/> in this file doesn't seem to work. This happens when you open an entry from a discussions folder as a new page (so not display as overlay or popup).

Another thing is all the code to make it look the right way in Internet Explorer. That code will give an portletException on the system.

Attachments:
xxx Having trouble? xxx

Marcel Dekker

Dec 22, 2009 11:16 AM

222.9. Antw: Here is how to change the color scheme of Kablink

Hi, I've just finished my redesign/color scheme changes, so I thought I'd share this with everybody on the Kablink site. In the attached zip file are all the files I changed and some pictures I used to change the colors. From the attached png file you can see what we made of it. This works for Kablink 2 and 2.1 Beta. From what I've seen from the Durango release this is offcourse outdated pretty soon, but for now it gives you a good idea what en where to change I think.

The zip file contains the file structure under the ssf directory of your Kablink install and contains the files that had to be edited along with the WEB-INF/jsp/custom_jsps/ss_call_out_css_init.jsp. Some things didn't work from this file, so that's why I changed some of the standard jsps. It also contains the icons I used on our site. I'm not sure that you can use them commercialy, so use at your own risk.

Attachments:
xxx Having trouble? xxx


screenshot.png	Dec 22, 2009 11:16 AM	92 KB	Marcel Dekker

ssf.zip	Dec 22, 2009 11:16 AM	75 KB	Marcel Dekker

Daniel Clar

Feb 19, 2010 4:13 PM

222.10. Re : Here is how to change the color scheme of Kablink

Just to know, where do you modify the place with your name followed by Agenda et the one with Filter.

Thanks

Daniel

Attachments:
xxx Having trouble? xxx

Peter Hurley (Novell)

Feb 20, 2010 1:58 AM

222.10.1. Re: Re : Here is how to change the color scheme of Kablink

Please take a screen shot of the item you are asking about. Save it as a jpeg file and post it here. Circle the area you are asking about.

Attachments:
xxx Having trouble? xxx

Peter Hurley (Novell)

Feb 20, 2010 2:53 PM

222.10.1.1. Re: Re: Re : Here is how to change the color scheme of Kablink

I modified the sample CSS file to tell you how to change the toolbar color.

Essentially, you change the color of the graphic listed in the ".ss_sidebarImage" class to whatever you want.

.ss_sidebarImage {
background-image: url("<html:rootPath/>images/pics/navbar/bg_toolbar.gif");
background-repeat: repeat-x;
}

Attachments:
xxx Having trouble? xxx

Daniel Clar

Feb 20, 2010 3:08 PM

222.10.1.1.1. Re : Re: Re: Re : Here is how to change the color scheme of Kablink

Thanks Peter.

I join a screenshot with the current status.

The toolbar above "Formations vidéo" is rather dark blue for the sidebar and lighter blue for the tools bar.

But the right part is still dark grey.

Thanks

Daniel

Attachments:
xxx Having trouble? xxx


Capturebar.gif	Feb 20, 2010 3:08 PM	4 KB	Daniel Clar

Peter Hurley (Novell)

Feb 20, 2010 4:44 PM

222.10.1.1.2. Re: Re: Re: Re : Here is how to change the color scheme of Kablink

You need to create a new version of "images/pics/navbar/bg_toolbar.gif" with the color that you want. This gif is what is making the toolbar on the right be dark grey.

Attachments:
xxx Having trouble? xxx

Marcel Dekker

Feb 20, 2010 7:42 AM

222.10.2. Antw: Re : Here is how to change the color scheme of Kablink

Peter, I think he is referring to my screenshot in my post. The filter bar and the title are in ss_topic_box, ss_topic_box_h1 (title) and div.ssPageNavi (filter bar). I've commented my file though so Daniel should be able to find it. Search for "Filter bar" in the file and you'll find it. Above is the css where you can change the title above that.

Attachments:
xxx Having trouble? xxx

Daniel Clar

Feb 20, 2010 10:30 AM

222.10.3. Re : Here is how to change the color scheme of Kablink

Marcel was right, I was talking about his screenshot.

2 more points :

- On your screenshot the bar just above Marcel Dekker >> Agenda is still in dark grey. Is it possible to modify this one ?

- I've modified the login page to have a customized login box in replacing the file ./i/icib/pics/Login/login_novell_top.png. I join a screenshot.

Is it possible to have a custom place or should it be done after each upgrade ?

Thanks

Daniel

Attachments:
xxx Having trouble? xxx


Login-page.png	Feb 20, 2010 10:30 AM	32 KB	Daniel Clar

Daniel Clar

Feb 20, 2010 11:37 AM

222.10.3.1. Re : Re : Here is how to change the color scheme of Kablink

Ok, I've just found how to modify the background colour of the grey bar but just on the left part where there are the texts "non read elements, news, accesses..." but the right part is still darkgrey.

Daniel

Attachments:
xxx Having trouble? xxx

Daniel Clar

Feb 20, 2010 5:03 PM

222.10.4. Re : Re : Here is how to change the color scheme of Kablink

Ok, and I suppose that it's possible to put it in the custom folder ?

And what about customization of login_novell_top.png ?

Thanks

Daniel

Attachments:
xxx Having trouble? xxx

Marcel Dekker

Feb 21, 2010 7:34 AM

222.10.4.1. Antw: Re : Re : Here is how to change the color scheme of Kablink

Hi Daniel,

I think you'll lose some of the customizations when upgrading. Everything in the file ss_call_out_css_init.jsp is kept, but since you'll need the put some of the changes in other files it's best to keep a copy. I'm also not sure about the custom images directory I created. That's why I keep a copy of the structure and files to replace the default quickly (as in my example). One of the next versions has a better templating system I think, but for now this is the way to go.

Attachments:
xxx Having trouble? xxx

Tag this...

Add/Delete Tags

Personal Tags

--none--

Add

Community Tags

--none--

Skip Footer Toolbar

Entry Permalink