Please help a noob with theme creation!

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
Trixtan

Please help a noob with theme creation!

Post by Trixtan »

Hi all.
I have just installed a copy of Serendipity on my local server.
Now I want to create a custom layout, but the only thing I have is an idea of how the theme should be. I really can't figure out on where to begin!!! I have read some documents on Serendipity site, but I have found out only what .tpl files are, and not a valid tutorial for noobs.
Can you please tell me where can I read something?? Is there maybe a way to create my theme in wysiwyg mode??? Thank you very much!

Trix
nine-times

Post by nine-times »

Hi Trixtan.

For starters, it might help to know how much you know about HTML and CSS. If you're asking about WYSIWYG editing and calling yourself a noob, I'm guessing you're not super-knowledgable, but it might help to know just how much help you'll need.

The only documentation I'm aware of is here:

http://www.s9y.org/44.html#A3

Now, I don't know of any real WYSIWYG editor for these sorts of templates, so you'll probably need to know about CSS to get started. If you're totally unfamiliar, there's plenty of online information available. I got started at this website:

http://www.w3schools.com/css/default.asp

But there are lots of others. CSS can be edited in a text editor, but Dreamweaver and GoLive also have some CSS editing abilities. Also, on Windows, Topstyle light works pretty well for CSS. Another tool that's really useful is Firefox, with the WebDeveloper toolbar extension. This extension allows you to view a page, while you edit the CSS, and see the results real-time.

OK, so I would say that the best way to get started is look through the available templates, and pick the one that looks and works most like what you want your site look like. Let's say for the sake of argument that you want your site to look something like Kubrick. So you copy the entire Kubrick directory into a new directory, lets call it "my_theme". So make a "my_theme" directory in the "templates" directory on your site, and copy the contents of the "Kubric" directory into it.

So that gives you someplace to start. Anything that is a graphic (gif, png, jpg) you can just edit or replace with a graphic that you prefer. Otherwise, most of what you're going to want to change will be in the CSS file (which is the "style.css" file in your template's directory).

CSS can get you pretty far, but if you want to make certain sorts of changes, you'll have to edit the tpl files. These files are basically HTML files with all the data replaced by variables so serendipity can just fill the data in when someone requests a page. For this, you'll need to know some HTML.

Again, because it's not really a HTML page, there won't be a WYSIWYG editor, but again, there is lots of information available online. For example:

http://www.w3schools.com/xhtml/default.asp

However, I wouldn't even bother with the HTML until you've gone as far as CSS editing will take you. Then, when you're trying to accomplish something that you can't do in CSS, post back here with your question, and I'm sure you'll find help.

I hope that this helps some.
Guest

Post by Guest »

I thank you very very much!!!!
I am going to learn what I need about CSS.
Your post is very complete and helped me a lot!
I will post again If I'll meet any obstacle. Thank you again!!!

Trix
Post Reply