Starting Out with Serendipity, need to modify my appearance

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
jamfitz001
Posts: 2
Joined: Fri Aug 11, 2023 4:07 pm

Starting Out with Serendipity, need to modify my appearance

Post by jamfitz001 »

Thanks for bearing with me. I just found a HTML/CSS Theme that I liked for a personal website I just created. I decided to add a blog. Considered WP but it was too obnoxious to deal with. I downloaded Serendipity (which I know nothing about), setup and changing themes was more straight forward. Seems like I can work with this.

For me, my blog would just be me adding an image and blogging a little about that image (I'm an artist). Just using my preferred header/footer/background color is really all I need.

So my next step is to go ahead and apply the styling of my website to the s9y page. And ...I am seeing nothing but overly complex explanations, and obtuse instructions.

From my view...I just have a header/footer/body that I want to apply to my s9y'Theme'. There is a styles.css that my main web pages use. (I installed Serendipity in a subdirectory.) I need to navigate back to main root index.html with a home link.

Is there a doc, or walk-thru online that just takes you through simple things like: change the background color on your serendipity page, change the header, etc.

The template theme for my website is called photon-x but I don't know what software or system developed it.

What is the best resource to walk through someone wanting to make changes to the style of the s9y page?

Thanks if anyone can help!
onli
Regular
Posts: 2830
Joined: Tue Sep 09, 2008 10:04 pm
Contact:

Re: Starting Out with Serendipity, need to modify my appearance

Post by onli »

Hi! Welcome to s9y.

The issue here is likely to be that it is not as easy to adopt a theme to a new HTML structure, as serendipity's is likely to differ from what the theme expects. Worse, that HTML will even depend on which of the themes provided by serendipity you use. So there is no simple guide I'm aware of, likely since it's not a simple task.

So to adapt your original theme to serendipity, you would need to:

1. Pick a serendipity theme that comes closest to what you need. That might be 2k11, but also might be "Skeleton" or one of the others. Likely one of the more modern ones, from https://docs.s9y.org/themes.html. If your structure will be "one main image per article", definitely use the "photo" theme. It's made for that.
2. Then check the theme's configuration option in the backend. Changing the header image for example is often supported in there.
3. If that's not enough, then you manually edit the style.css of that theme and make it look like your target theme. That will likely involve not only copying CSS code over, but also writing custom CSS code. If you are not familiar with CSS, https://developer.mozilla.org/en-US/doc ... irst_steps and https://www.w3schools.com/css/ could guide you here (but it's a lot to learn, with lots of small details).
4. In that case you might also want to change the HTML the theme generates by editing the smarty template files. Then more of the original CSS of your target theme could apply directly. Whether that's a good idea depends.

If you speak german, the very old article at https://www.gurkcity.de/blog/Serendipit ... te-26.html might still be a useful starting point for the serendipity side of things, the main idea hasn't changed.
Post Reply