Roundcube Community Forum

Themes & Styling => Theme Releases => Topic started by: techdude on May 14, 2008, 05:58:22 AM

Title: Create your own theme
Post by: techdude on May 14, 2008, 05:58:22 AM
Does anyone have a tutorial or something to help me learn how to create my own theme?

Thanks!
Title: Create your own theme
Post by: EinfachClicken on May 26, 2008, 05:00:27 AM
Quote
Does anyone have a tutorial or something to help me learn how to create my own theme?


Techdude ... :confused:

There's no tutorial required. Everything that you see within a particular roundcube screen/action is made up of html template files, css files, and images within the images folder. If you have no problem with the default fonts and colors, then you only need to change/enhance/adjust the images. Although, if you go too crazy on the colors your images won't look good with the remaining screens & background colors.

If you want to change the entire look & feel accross the board, then you'll have to edit all of the aforementioned, css files, images, and possibly some of the templates too. Everything that might need to be edited is located in the skins folder.

Important Hint:  When we tried to create a logo, we ran into problems with buttons and such being covered up since our logo was a bit longer than the default size. If you run into such a problem you can usually locate the "hidden" button or feature in the template files, followed by adding something like this in front of the tag line for that particular image:

       

.... in order to push the image further away and out into an open space nearby. There has to be empty space available within the line with that image, of the screen that you're working with, or that won't work. You can't do that too often though because then you'll wind up messing up the formatting of the working roundcube screens with those images. Also, since roundcube uses so many different files to achieve an overall look, I would not recommend changing any width/height sizes anywhere since that could greatly impact (screw up) :D the outcome of the final look. Hope this helps.

PS: The .js files in the program/js folder may also prove to be of interest, especially if you want to edit the tiny_mce options for the editing section (editor.js) of roundcube. Don't forget to make backups of files first, before editing anything.