Print  
Gold star Gold star Gold star Gold star Gold star 5.0 Average - 5 Ratings
1168 Visits    28 Comments
Here is how to change the color scheme of Kablink
Created
Peter Hurley (Novell) Peter Hurley (Novell)
Jul 23, 2009 10:12 AM
Modified by
Peter Hurley (Novell) 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
This entry is currently active
Attachments (1)
Entry History
File Versions
 
  File Name: Version Status Date: Size Modified by Actions Edit
ss_call_out_css_init.jsp V1.1
Feb 20, 2010  2:48 PM 4 KB Peter Hurley (Novell)  
Replies
Thumbnail Image
Barney Barnes Barney Barnes
Jul 24, 2009 6:03 PM
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

Thumbnail Image
Marcel Dekker Marcel Dekker
Jul 26, 2009 11:05 AM
Modified by
Marcel Dekker Marcel Dekker
Jul 26, 2009 11:54 AM
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

Thumbnail Image
Peter Hurley (Novell) Peter Hurley (Novell)
Jul 30, 2009 8:23 AM
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.

Thumbnail Image
Barney Barnes Barney Barnes
Aug 7, 2009 8:44 AM
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 :-)

Thumbnail Image
Peter Hurley (Novell) Peter Hurley (Novell)
Aug 10, 2009 7:31 AM
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.

Thumbnail Image
Dirk Beemelmanns Dirk Beemelmanns
Aug 12, 2009 6:02 AM
some colors to work with

here are some colors you can play with.

use gradient with 800px width / 1px height

Attachments
  File Name: Version Status Date: Size Modified by Actions Edit
masthead_bg_black.png V1.0
Aug 12, 2009  6:02 AM 1 KB Dirk Beemelmanns  
masthead_bg_blue.png V1.0
Aug 12, 2009  6:02 AM 1 KB Dirk Beemelmanns  
masthead_bg_grey.png V1.0
Aug 12, 2009  6:02 AM 1 KB Dirk Beemelmanns  
masthead_bg_orange.png V1.0
Aug 12, 2009  6:02 AM 1 KB Dirk Beemelmanns  
Thumbnail Image
Lynn Douglas Christensen Lynn Douglas Christensen
Aug 14, 2009 12:34 PM
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?

Thumbnail Image
Brent McConnell Brent McConnell
Aug 14, 2009 3:31 PM
Re: Re: Here is how to change the color scheme of Kablink

Sure, do you have some ideas?

Thumbnail Image
Lynn Douglas Christensen Lynn Douglas Christensen
Aug 15, 2009 12:53 PM
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?

Thumbnail Image
Brent McConnell Brent McConnell
Aug 16, 2009 10:26 AM
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.

Thumbnail Image
Lynn Douglas Christensen Lynn Douglas Christensen
Aug 17, 2009 1:38 PM
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.

Thumbnail Image
Brent McConnell Brent McConnell
Aug 17, 2009 4:01 PM
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.

Thumbnail Image
Marcel Dekker Marcel Dekker
Dec 21, 2009 5:18 AM
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.

Thumbnail Image
Marcel Dekker Marcel Dekker
Dec 22, 2009 11:16 AM
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
  File Name: Version Status Date: Size Modified by Actions Edit
screenshot.png V1.0
Dec 22, 2009  11:16 AM 92 KB Marcel Dekker  
ssf.zip V1.0
Dec 22, 2009  11:16 AM 75 KB Marcel Dekker  
Thumbnail Image
Daniel Clar Daniel Clar
Apr 6, 2010 8:51 AM
Re: Antw: Here is how to change the color scheme of Kablink

Marcel,

 

Is there away to modify the white color with which December 2009 is displayed on your screenshot ?

As we print agenda this color is not clearly displayed ?

Thanks
Daniel

 

Thumbnail Image
Daniel Clar Daniel Clar
Feb 19, 2010 4:13 PM
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

Thumbnail Image
Peter Hurley (Novell) Peter Hurley (Novell)
Feb 20, 2010 1:58 AM
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.

Thumbnail Image
Peter Hurley (Novell) Peter Hurley (Novell)
Feb 20, 2010 2:53 PM
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;   
}

Thumbnail Image
Daniel Clar Daniel Clar
Feb 20, 2010 3:08 PM
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
  File Name: Version Status Date: Size Modified by Actions Edit
Capturebar.gif V1.0
Feb 20, 2010  3:08 PM 4 KB Daniel Clar  
Thumbnail Image
Peter Hurley (Novell) Peter Hurley (Novell)
Feb 20, 2010 4:44 PM
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.

Thumbnail Image
Marcel Dekker Marcel Dekker
Feb 20, 2010 7:42 AM
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.

Thumbnail Image
Daniel Clar Daniel Clar
Feb 20, 2010 10:30 AM
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
  File Name: Version Status Date: Size Modified by Actions Edit
Login-page.png V1.0
Feb 20, 2010  10:30 AM 32 KB Daniel Clar  
Thumbnail Image
Daniel Clar Daniel Clar
Feb 20, 2010 11:37 AM
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

 

Thumbnail Image
Daniel Clar Daniel Clar
Feb 20, 2010 5:03 PM
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

 

Thumbnail Image
Marcel Dekker Marcel Dekker
Feb 21, 2010 7:34 AM
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.

Thumbnail Image
Daniel Clar Daniel Clar
Mar 20, 2010 3:39 PM
Re: Here is how to change the color scheme of Kablink

Where is the best place to modify the green color in the Micro-blog background ?

Thanks

Attachments
  File Name: Version Status Date: Size Modified by Actions Edit
blog.gif V1.0
Mar 20, 2010  3:39 PM 17 KB Daniel Clar  
Thumbnail Image
Peter Hurley (Novell) Peter Hurley (Novell)
Mar 20, 2010 4:12 PM
Re: Re: Here is how to change the color scheme of Kablink

You need to redefine .ss_myStatusOuter...

 

.ss_myStatusOuter {

background: #9ec8cd;

}

 

Add that to your custom CSS definitions. Change #9ec8cd to your color.

Thumbnail Image
Daniel Clar Daniel Clar
Mar 20, 2010 4:23 PM
Re: Here is how to change the color scheme of Kablink

Thanks

 

that's it


Daniel

Add/Delete Tags
Personal Tags
--none--
Add
Community Tags
--none--
Add
Close
Skip Footer Toolbar