Jump to content


Creating Your Own SuperKaramba Themes


  • Please log in to reply
14 replies to this topic

#1 ONLINE   V.T. Eric Layton

V.T. Eric Layton

    Nocturnal Slacker

  • Forum MVP
  • 19,219 posts

Posted 27 July 2009 - 08:37 PM

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 directoryPosted Image- Your file manager (Nautilus, Konqueror, etc.)Posted Image- GNU Image Manipulation Program --> The GIMP ...and some knowledge/skill in its usePosted Image- 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/<yourusername>. 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/<yourusername>/.superkaramba/themes/66205-KClock_1.2e/styles Note: your KClock version numbers may be slightly different.Posted ImageInside 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".Posted ImageOur 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.Posted ImageNow, 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/<yourusername>/.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.Posted Image*click for bigger picPosted Image*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:<?xml version="1.0"?><style kclock="1.0"> <name>My Clock</name> <-- change this to your clock theme name <title>My Clock</title> <-- change this to your clock theme title <creationDate>Today's Date</creationDate> <-- change to the date you made this theme <author>Your Name</author> < -- change to your name <copyright>GNU</copyright> <authorEmail>you@domain.com</authorEmail> <-- change to your email (or leave blank) <authorUrl>you.com</authorUrl> <-- change to your website (or leave blank) <version>1.0</version> <description/> <hands> <hand> <name>Second</name> <image>Second.png</image> </hand> <hand> <name>Minute</name> <image>Minute.png</image> </hand> <hand> <name>Hour</name> <image>Hour.png</image> </hand> </hands> <clock> <image>Clock.png</image> </clock></style>Make the modifications to the file that I've indicated with the "<-- <directions to modify>" above. Save the file to its previous location.Click to see a pic of my actual theme file --> http://img.photobuck.../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/<yourusername/.superkaramba/themes and create a directory called "PCLOS". Inside that directory, save a copy of your 100x100 PCLinuxOS.png that you made earlier.Step 4 - Open any graphic editor of your choice, Kedit for example, and create this file:### PCLOS ###karamba x=1 y=1 w=100 h=100 interval=36000000 locked=trueimage x=5 y=5 path="PCLinuxOS.png"Save this file as PCLOS.theme in your /home/<yourusername/.superkaramba/themes directory.That's it for this project. Now open SuperK and choose to Open Local Theme --> navigate to your PCLOS theme directory and click on the PCLOS.theme that you see there. Your PCLinuxOS logo will appear in the upper left hand corner of your desktop. R. Click and Toggle Lock Position --> drag it where you want it to be and relock.Click to see pic of PCLinuxOS theme that you created --> http://img.photobuck...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.scotsn...showtopic=26981EDITED to add pictures. ~Eric

Edited by V.T. Eric Layton, 28 July 2009 - 07:28 PM.


#2 OFFLINE   Bruno

Bruno

    Le Professeur Pingouin

  • Admin Emeritus
  • 37,904 posts

Posted 28 July 2009 - 02:09 AM

:">  . . . . :">  . . . . :">  . . . . Well done Eric . . . thanksB) Bruno

#3 OFFLINE   Urmas

Urmas

    GUI Penguin

  • Forum Moderators
  • 4,059 posts

Posted 28 July 2009 - 02:26 AM

:">  :">  :">  :thumbsup:  :thumbsup: Dude.

Posted Image


#4 ONLINE   V.T. Eric Layton

V.T. Eric Layton

    Nocturnal Slacker

  • Forum MVP
  • 19,219 posts

Posted 28 July 2009 - 02:43 AM

Sorry. No pictures. :">

#5 OFFLINE   striker

striker

    handyman

  • Honorary Moderators
  • 8,501 posts

Posted 28 July 2009 - 02:56 AM

Thanks Eric! Excellent! :">  :">
striker

#6 ONLINE   V.T. Eric Layton

V.T. Eric Layton

    Nocturnal Slacker

  • Forum MVP
  • 19,219 posts

Posted 28 July 2009 - 03:16 AM

Would be better with pictures. :">

#7 OFFLINE   zlim

zlim

    It's me, plodr

  • Forum MVP
  • 6,466 posts

Posted 28 July 2009 - 06:02 PM

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

Quote

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:
Liz
Registered Linux User # 401459
Posted Image

#8 ONLINE   V.T. Eric Layton

V.T. Eric Layton

    Nocturnal Slacker

  • Forum MVP
  • 19,219 posts

Posted 28 July 2009 - 06:33 PM

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:

#9 ONLINE   V.T. Eric Layton

V.T. Eric Layton

    Nocturnal Slacker

  • Forum MVP
  • 19,219 posts

Posted 28 July 2009 - 07:32 PM

Check it out. I added pictures to the tutorial! YAY! Much better now. :w00t:

#10 OFFLINE   cybormoron

cybormoron

    Multithreader

  • Members
  • PipPipPipPipPipPipPipPip
  • 1,159 posts

Posted 29 July 2009 - 12:10 AM

thou has been picked up by tuxmachines for today's howtoshttp://www.tuxmachines.org/node/38477
steve
I'm a pc, running GNU/Linux.

#11 ONLINE   V.T. Eric Layton

V.T. Eric Layton

    Nocturnal Slacker

  • Forum MVP
  • 19,219 posts

Posted 29 July 2009 - 03:21 AM

WOW! How'd that happen?  :thumbsup:

#12 OFFLINE   Bruno

Bruno

    Le Professeur Pingouin

  • Admin Emeritus
  • 37,904 posts

Posted 29 July 2009 - 01:04 PM

View Postcybormoron, on Jul 29 2009, 06:10 AM, said:

thou has been picked up by tuxmachines for today's howtoshttp://www.tuxmachines.org/node/38477
Congrats Eric !!!  . . . .  :thumbsup: :w00t:  B) Bruno

#13 OFFLINE   zlim

zlim

    It's me, plodr

  • Forum MVP
  • 6,466 posts

Posted 29 July 2009 - 09:07 PM

Congratulations, Eric!Lots of people need a nice set of directions to spur them on to try something.
Liz
Registered Linux User # 401459
Posted Image

#14 OFFLINE   striker

striker

    handyman

  • Honorary Moderators
  • 8,501 posts

Posted 30 July 2009 - 01:27 AM

Congrats Eric! Well deserved! :hysterical:
striker

#15 ONLINE   V.T. Eric Layton

V.T. Eric Layton

    Nocturnal Slacker

  • Forum MVP
  • 19,219 posts

Posted 30 July 2009 - 02:16 AM

Thanks, folks. :hysterical:




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users