Jump to content

Creating Your Own SuperKaramba Themes


V.T. Eric Layton

Recommended Posts

V.T. Eric Layton

In SuperKaramba, there are different kinds of themes. Some do things (widgets of some sort... weather, world time zones, etc.); others are just ornamental. In this tutorial, I'm only dealing with the Kclock themes and with ornamental themes. I don't do widgets. Whaddya' think I yam? Some sort of guru? :' />Tools you'll need:- SuperKaramba - it's available in most distros. You'll need to run it at least once to create the /home/.superkaramba directorysuperkshot-01.png- Your file manager (Nautilus, Konqueror, etc.)konqshot-01.png- GNU Image Manipulation Program --> The GIMP ...and some knowledge/skill in its usegimpshot-01.png- Internet access- A little imaginationKClock ThemesOK, let's try to make a KClock theme for starters.Step 1 - Locate the .superkaramba directory in your /home/. Remember that the .(dot) in front of the file name signifies a hidden file/directory. Be sure to have your file manager set to allow viewing of hidden files. Now, once you've located that directory, go a bit deeper into it. You actually want to be here:/home//.superkaramba/themes/66205-KClock_1.2e/styles Note: your KClock version numbers may be slightly different.superkshot-02.pngInside that "styles" directory you should find the sub-directories for the styles you already have installed for KClock on your system. Here are some you might see --> Chrome, Blue, Dull, Exec, etc. Open the Chrome directory and you'll find --> 100x100, 200x200, svg, style.xml, and an image called "thumbnail.png".superkshot-03.pngOur clock is only going to be 100x100, so that's the only directory you need be concerned with in this tutorial. Open the 100x100 directory and you'll see: Clock.png, a blank clockface; Hour.png; Minute.png; and Second.png. These last three are the images for the hour, minute, and second hands for the 100 pixel clock.superkshot-04.pngNow, let's leave that directory open for the moment.Step 2 - Fire up your browser and navigate to Google Image search. Search using the term "blank clockface" or "blank clock face". The results will show you bunches of blank clock face images. Scroll through till you find one you like. Once you have it, go to the actual page where the image resides and save it to your system... R. Click --> "Save Image As" if you're using Firefox. OK, now you have your clock face.Step 3 - Open the image of your clock face with The GIMP (you can use another image editor, but directions here are for the GIMP only). Scale the image (from the menu across the top - Image --> Scale Image) to 100x100 pixels. Save this image somewhere temporarily. Don't close the image after saving. Stop there for now.Step 4 - Go back to your file manager and into the /home//.superkaramba/themes/66205-KClock_1.2e/styles directory. Create a new directory in the styles directory called "my_clock". Go into the Chrome directory and COPY the contents (drag mouse over all to highlight --> R. click --> COPY). Come out of the Chrome directory and open your new my_clock directory. PASTE the contents previously copied into this directory. You should see the 100x100, 200x200, svg, style.xml that you copied here now. Delete the 200x200 directory. You won't need it. Now, back to the GIMP.Step 5 - In your GIMP - File --> Open --> my_clock/100x100/Hour.png Minute.png Second.png. You're opening all three image files in GIMP. Here's where it gets a little complicated and your skills with The GIMP will be needed. You need to copy/paste the hour, minute, and second hands onto your clock face image that you left open earlier and move/manipulate them so that they show 4 o'clock with the second hand at some visible position. This can take some GIMP skills and practice. Once you have the image how you want it, save it as thumbnail.png in your my_clock directory, overwriting the existing image.th_gimpshot-02.png*click for bigger picth_gimpshot-03.png*click for bigger picStep 6 - Open your temp save of the blank clock face that you made in Step 3 and save it to the my_clock/100x100 directory as clock.png, overwriting the existing image. Also save it to the my_clock/svg directory. Delete the existing Clock.svg in that directory and rename your Clock.png to Clock.svg.Step 7 - Using Kedit or whatever graphic editor you like to use, open the my_clock/style.xml file. It will look something like this: My Clock My Clock Today's Date Your Name GNU you@domain.com you.com 1.0 Second Second.png Minute Minute.png Hour Hour.png Clock.png Make the modifications to the file that I've indicated with the "" above. Save the file to its previous location.Click to see a pic of my actual theme file --> http://img.photobucket.com/albums/v647/vte.../theme_edit.pngThat's it. You're done. Now fire up your SuperKaramba and choose to start the KClock applet. Once KClock starts, you can choose R.Click on the clock --> Configure Theme -- Configure and choose your clock --> my_clock. It should change to your theme if all went well with the creation. I know. I know. Not the easiest tutorial you've ever seen, huh? You do need some knowledge/skills with image manipulation and file/directory navigation/editing. Play around with it. That's how you learn.Ornamental ThemesThese type of SuperK themes are much easier to make. In screenshots of my desktops, you'll see one at the center/left of my screen that looks like a glass ball with the Slackware S in it. This is a theme that I made myself. It doesn't do anything. It just sits there and looks pretty. :' /> You can make that a theme like that yourself.Step 1 - find an image you want to use, say the PCLinuxOS logo. Search for it in Google Images and save the one you like best to your system.Step 2 - Open your PCLinuxOS logo image and scale it to 100x100. Resave it as "PCLinuxOS.png".Step 3 - Open your file manager and navigate to /home/http://img.photobucket.com/albums/v647/vte...xos-logo-02.pngHope these tutorials will be helpful to someone out there. Please direct all questions to Bruno... HAHA! :' /> Just kidding. Give me a holler if you have any questions about this. I'll try to help you as best I can.Have FUN! :thumbsup:*This tutorial was inspired/requested in this thread --> http://forums.scotsnewsletter.com/index.php?showtopic=26981EDITED to add pictures. ~Eric

Edited by V.T. Eric Layton
Link to comment
Share on other sites

As I said, pictures aren't necessary. You posted a well written set of instructions and I appreciate it.Here's where it falls apart for me

The GIMP ...and some knowledge/skill in its use
As Colin says, the palpitations are starting. But if I have a goal, it will force me to figure out what all those buttons do in the GIMP. :w00t:
Link to comment
Share on other sites

V.T. Eric Layton

The GIMP is such a cool app. I was afraid of it in the beginning, too. Just start doing stuff with it. That's how I learned most of my GIMP knowledge. Clicking on buttons is the way. You can't break it. Play around with modifying an existing image. Play around with adding text and stuff. It does take time, though.By the way, the image manipulation needed to do these theme projects above can be done with other image editors, should you have a fav that you're more comfortable with than The GIMP. :w00t:

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...