|
|
|
|
Jul 23, 2009 10:12 AM
|
|
Feb 20, 2010 2:50 PM
|
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 | ||
|
|
|
| ss_ |
|
4 KB | Peter Hurley (Novell) | |||||
|
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 |
|
|
|
|
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 |
|
|
|
|
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. |
|
|
|
|
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 :-) |
|
|
|
|
This should work fine on Novell Teaming V2. Make sure you put the custom jsp in the right directory. |
|
|
|
|
222.5.
some colors to work with
here are some colors you can play with. use gradient with 800px width / 1px height |
|
|
|
| masthead_ |
|
1 KB | Dirk Beemelmanns | |||||
| masthead_ |
|
1 KB | Dirk Beemelmanns | |||||
| masthead_ |
|
1 KB | Dirk Beemelmanns | |||||
| masthead_ |
|
1 KB | Dirk Beemelmanns | |||||
|
Hi Brent, can I customize the CSS for the KaBlink site using this method? |
|
|
|
|
Sure, do you have some ideas? |
|
|
|
|
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? |
|
|
|
|
No, if you make the changes and send them to me or post them here I can add them. |
|
|
|
|
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. |
|
|
|
|
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. |
|
|
|
|
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. |
|
|
|
|
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.
|
|
|
|
| screenshot. |
|
92 KB | Marcel Dekker | |||||
| ssf. |
|
75 KB | Marcel Dekker | |||||
|
Just to know, where do you modify the place with your name followed by Agenda et the one with Filter.
Thanks Daniel |
|
|
|
|
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. |
|
|
|
|
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 { |
|
|
|
|
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
|
|
|
|
| Capturebar. |
|
4 KB | Daniel Clar | |||||
|
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. |
|
|
|
|
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. |
|
|
|
|
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
|
|
|
|
| Login- |
|
32 KB | Daniel Clar | |||||
|
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
|
|
|
|
|
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
|
|
|
|
|
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. |
|
|
|