Theme is Timeline - Specific files for coding adjustments?

[new2blogging]

Hi everyone. This is my first attempt at a new blog in about 8 years. I ran a drop and place site (Dolphin 6) before that, but Dolphin would be far too massive for a standard private blog. I would like to customize the current TIMELINE theme by hard coding whatever needs to be done within the respective php template files. The location of the (German) blog is right here:
https://computer.drachenbeere.de/compublog/

There's no content yet because I want to hold off with the content until all of the color/font/formatting options have been finished. In lieu of the content, I'm including three images here. First image is current blog view ... second image is getting into what I'm looking to do ... third image is my final vision for the blog look & feel.

I would really appreciate it if someone could point me to the correct files in order to attain global changes for the blog's front end. Thank you very much.
PS: I'm located in Germany and I can respond in either language since I'm fluent in both.

EDIT: Pics not showing up in proper order. Red font is the final finished version ...

.

[yellowled]

I would like to customize the current TIMELINE theme by hard coding whatever needs to be done within the respective php template files.

First heads-up: s9y uses Smarty templates – under the hood it's PHP, and if you absolutely wanted to, you could use PHP templates, but it's not really common. Smarty is an additional template layer which basically makes it easier for beginners to get into templating. With a little PHP knowledge, you should be able to get by. (I still suck at PHP, but I can manage in Smarty.)

I would really appreciate it if someone could point me to the correct files in order to attain global changes for the blog's front end.

Well, you obviously have found out how to adapt the CSS. Bad news is you don't seem to have found out about adding your changes to a new file called user.css, but let's not get a head of ourselves.

Something you'll want to make sure when you change a theme is to make your changes safe in case of an update. The timeline theme is part of s9y, so the next update to s9y will overwrite all your changes. It is recommended to "fork" timeline, which is actually pretty simple.

1. copy /templates/timeline/ and all its content to something to your liking, for example /templates/my_theme/
2. open /templates/my_theme/info.txt in a text editor and change at least the name; you can also change the author etc. since you're now editing your own theme
3. switch to your new forked theme in the backend
4. make your changes in /templates/my_theme from now on

Since /templates/my_theme is not part of s9y, it's safe in case of an update.

As for what to change where, https://docs.s9y.org/docs/developers/themes.html will hopefully help a lot. And since you can read German, take a look at https://github.com/s9y/Book/blob/master/serendipity.pdf – that's a whole book on s9y written by our lead dev Garvin. It's a bit older, but most of it should still work.

I'll get into details about your specific questions in a new post to keep this readable.

YL

[yellowled]

* Blog to be constrained to a max. width of 1000px
* custom wallpaper to show on the outside of said container
* image map below blog title

Erm. Well. How to start explaining? Let's see.

I can imagine where you're going with this, but I have to say that at least the custom wallpaper is something I haven't seen in a long time. People don't do that anymore, which is not really a reason to not do it, but … well, let's put it this way: timeline is not really prepared for something like this. I assume the changes needed to be able to do this would be quite large, and you would possibly compromise the layout framework, meaning your layout could break. It's hard to explain in a few sentences why this is difficult and not really recommended, but I'm convinced it is. It's not impossible to do what you want to do with timeline as a base theme, but it may not be ideal for that.

I have to admit I'm not that familiar with timeline, maybe Don (the author of timeline) has an idea how to explain how to tackle this …

As for the "image map" – do you mean an actual image map or …? I'm not sure what you mean by that. This is probably easier to implement, but let's just say I don't think you mean what I consider an image map (because people don't use those anymore, either). Is it just an image to be displayed above the content on every page?

YL

[new2blogging]

Thank you very much for your replies yellowled. I'll be checking out your suggestions this Sunday since I won't have time before then.

About the backgrounds ... it may not be the norm and I honestly don't really care about that. It's about making the blog personal while also making it match the wallpaper of the site where the blog is being referred from. That way all of the site and all of the blog pages have a uniform look and feel. The site as well as the blog belong together, but they're not the same thing which is why I keep them separated. The site is supposed to be promotional without any interaction by others whatsoever. The blog is supposed to be the interactive portion of the site. A forum would have worked as well, but blogs generally look much nicer.

I would be very surprised if the size & background constraints won't work with timeline as well as all other themes. There's usually one php file such as global.php index.php or even a css file which only require the insertion of a code snippet in order to place all contents within a constricted frame, just like inside of a picture frame. Then another snippet adds an image which can only be seen outside of that frame. It should really not be a big deal at all. I'm also surprised that there hasn't been more activity on this thread, ah well ...

Yes, I'm talking about an actual image map. This too should not be a problem since html can usually also be inserted into a php file. If an image works, then an image map should work as well, as long as the code is inserted correctly, including the actual size of the image/map in order to place it exactly within specific page/block constraints on viewable pages within the blog. I'm not a php guru by any stretch of the imagination, but the dolphin blog which I ran several years ago is being used globally by millions of users/organizations. If the php code editing for that was available with dolphin, then I'm sure that it can be done here as well.
I have zero experience with smarty templates.

Be that as it may, you may have misunderstood the "final blog image" which I posted, the one with the red fonts. That is exactly as I already stated ... just an image. I took the first two images and some graphic editing tools in order to create that third image. The blog itself still looks like it does on the first image.
Again, thank you for your time. I shall return ...

.

[yellowled]

I would be very surprised if the size & background constraints won't work with timeline as well as all other themes.

Well, I'd say prepare to be surprised, but that should not keep you from building the site the
way you want to.

There's usually one php file such as global.php index.php or even a css file which only require the insertion of a code snippet in order to place all contents within a constricted frame, just like inside of a picture frame. Then another snippet adds an image which can only be seen outside of that frame. It should really not be a big deal at all.

Uh-huh. Yeah, sure. The file you're looking for is (usually) /templates/YOUR_THEME/index.tpl, that's sort of the smarty variant of the index.php you're suggesting. CSS in s9y is usually done in /templates/YOUR_THEME/style.css. (See the aforementioned section of the s9y docs to get more info about theme files and how they belong together.)

Just add snippets and be done with it, right? Yeah.

See, here's the thing I anticipate: Timeline uses a CSS Framework called Bootstrap. If I remember correctly, it uses the version 3.x of it, which I linked you to. With the way Bootstrap does layout, you'll most likely not just be able to wrap everything in a div and limit that div's width to be able to add your wallpaper pattern, it's going to be way more complicated than that.

I'm also surprised that there hasn't been more activity on this thread, ah well ...

Well, most people using s9y these days (and that's not even that many people) seem to prefer to use one of the bundled themes without adapting too too much. The theme forum is not usually overly busy.

Yes, I'm talking about an actual image map. This too should not be a problem since html can usually also be inserted into a php file.

Okay, in that case you can just reference the image map in the templates, just gotta find the right place for it. Again, if you want it on every page, you'll most likely be looking at index.tpl.

I'm not a php guru by any stretch of the imagination, but the dolphin blog which I ran several years ago is being used globally by millions of users/organizations.

I consider myself to know quite a lot of open source content management systems as well as blog engines at least by name, but I have never heard of dolphin. But you are right in that you can tweak almost everything in s9y to your liking with a little PHP and smarty. It just may take some time to learn the ropes. (There's lots of good info in Garvin's book, the docs and this forum. It's just not something that I can explain in 2 posts here.)

YL

[Don Chambers]

YL has already provided excellent input. The file to edit is, as YL mentioned, index.tpl. You will introduce your image immediately following the <main> element.

As YL mentioned, this theme uses the Bootstrap framework, which allows the theme to adapt to the width of the browser.

If you introduce an image, I suggest you use the Bootstrap class of img-responsive. So your custom image might look something like this (untested):

Code: Select all

<main class="{if ($rightSidebarElements > 0 && $staticpage_pagetitle =='') || ($rightSidebarElements > 0 && $staticpage_pagetitle !='' && $staticpage_custom.show_sidebars != 'false')}col-md-9{else}col-md-12{/if} mainpanel">
    <img class="img-responsive" src={serendipity_getFile file="path/to/image.png"} alt="your alt text">

Also as YL mentioned, you can append styles to the theme merely by creating a file named user.css in the theme's folder. Those styles are loaded last and therefore override styles defined by the theme.

Incidentally, You can play with a few of the configuration options on the Timeline Theme Demo.

[new2blogging]

Wow, thank you for the additional information. Looks like I've got my work / testing cut out for me. If the insertion of the background image is "as complex" as it appears at first glance, should I expect the same level of complexity for inserting an image map?

I'm not at all familiar with bootstrapping. In the past it's always been a fairly simple straight forward process, to embed additional php/html code within existing php files. Should I perhaps consider another theme? My third image shows pretty much exactly what I'm trying to accomplish, but not being familiar with the existing themes also means that I'm stabbing in the dark when I'm selecting a theme. Timeline looked very basic at first glance, that's why I thought that it would be easier to alter accordingly.

Adding an image map to the main body page is really important to me.
People will instantly identify that image map to it's twin on the primary site.
The image map along with the body background will make the user's step from the site pages to the blog pages appear as almost seamless. That's not only important, but it's also a visually attractive "comforting" process to older people who are less familiar with internet blogs.

.

[Don Chambers]

I do not think your goals are complicated. You should be able to modify Timeline to suit your needs.