Timeline - a responsive, mobile first theme

Skinning and designing Serendipity (CSS, HTML, Smarty)
User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Timeline - a responsive, mobile first theme

Post by Don Chambers » Tue Apr 12, 2016 6:45 am

You can read about this theme on my blog.

A complete explanation of using the Timeline theme can be found on the Timeline Theme Demo. The demo allows you to change a few configuration options, such as color and layout.

Post any questions and/or bug reports as comments on my blog or on this forum thread.

Thanks & enjoy!

User avatar
yellowled
Regular
Posts: 7036
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by yellowled » Tue Apr 12, 2016 8:53 am

Don Chambers wrote:You can read about this theme on my blog.
That link goes to the post about Clean Blog. :)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

Harald Weingaertner
Regular
Posts: 474
Joined: Mon Mar 27, 2006 12:32 am

Re: Timeline - a responsive, mobile first theme

Post by Harald Weingaertner » Tue Apr 12, 2016 1:53 pm

WOW, very interesting theme again! Very good work! Thank you.

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Tue Apr 12, 2016 3:17 pm

yellowled wrote:
Don Chambers wrote:You can read about this theme on my blog.
That link goes to the post about Clean Blog. :)

YL
Whoops! Fixed!

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Tue Apr 12, 2016 3:26 pm

Harald Weingaertner wrote:WOW, very interesting theme again! Very good work! Thank you.
Thanks Harald.

User avatar
yellowled
Regular
Posts: 7036
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by yellowled » Tue Apr 12, 2016 5:01 pm

First of all, it is great to see you get back in the swing of things, man. Great work. (I will not even get into an argument about the use of Bootstrap or the use of CDN stylesheets. Nope.)

Couple of quick things:

* I think the search form input field is missing a BS class or wrapper div or something. Looks odd.
* Your demo throws a 404 for a file called _skin.css.
* Personally, I think the grid could use more horizontal whitespace. You would need to customize Bootstrap for that, though.
* You might want to adapt the box-shadow for focussed input elements in forms to match the theme color.

Move it to the core once you consider it done, I say. :)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Wed Apr 13, 2016 5:56 am

yellowled wrote:First of all, it is great to see you get back in the swing of things, man. Great work. (I will not even get into an argument about the use of Bootstrap or the use of CDN stylesheets. Nope.)
Thanks! BS CDN might disappear in favor of loading boostrap css into serendipity.css in the future...
yellowled wrote:* I think the search form input field is missing a BS class or wrapper div or something. Looks odd.
Could you be a bit more specific, or provide a screenshot?
yellowled wrote:* Your demo throws a 404 for a file called _skin.css.
Yeah, side effect of the demo's style switcher until I can figure out something better.... I made a slight change which may, or many not, eliminate that 404.
yellowled wrote:* Personally, I think the grid could use more horizontal whitespace. You would need to customize Bootstrap for that, though.
Yep - and anyone is welcome to do with that as they want via user.css.
yellowled wrote:* You might want to adapt the box-shadow for focussed input elements in forms to match the theme color.
The colorsets are a little spartan and could use some work. Feel free to propose css. :wink:
yellowled wrote:Move it to the core once you consider it done, I say. :)
That is the plan. :wink:

User avatar
yellowled
Regular
Posts: 7036
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by yellowled » Wed Apr 13, 2016 10:45 am

Don Chambers wrote:
yellowled wrote:* I think the search form input field is missing a BS class or wrapper div or something. Looks odd.
Could you be a bit more specific, or provide a screenshot?
Go to timeline demo, click the search icon, see the input[type=search] in the overlay. It looks odd. The borders of the input look irritatingly different compared to the contact form, for example.

As far as I remember from having to work with Bootstrap, inputs need a specific class and/or a wrapper div with a specific class to get BS styles. I think it's class="form-control" on the input field. Might or might not need to be wrapped in a <div class="form-group"> as well.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Thu Apr 14, 2016 7:21 pm

The input field was missing a class. Demo and zipfile updated.

User avatar
u1amo01
Regular
Posts: 267
Joined: Fri Sep 28, 2007 3:55 pm
Location: Kurpfalz, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by u1amo01 » Thu Apr 14, 2016 10:21 pm

Looks very cool, Don! :D

A question about entries without image: I have a lot of old articles without image. Is there a simple way to change the default image "image_unavailable.jpg"? Or should I just replace ..timeline/img/image_unavailable.jpg with another pic?

Actually I have renamed image_unavailable.jpg without replacement. Looks, hm, not so good.

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Thu Apr 14, 2016 10:57 pm

u1amo01 wrote:Looks very cool, Don! :D

A question about entries without image: I have a lot of old articles without image. Is there a simple way to change the default image "image_unavailable.jpg"? Or should I just replace ..timeline/img/image_unavailable.jpg with another pic?

Actually I have renamed image_unavailable.jpg without replacement. Looks, hm, not so good.
Timeline shows a default image if that particular post does not contain an "entry image". The image it uses is,as you mentioned, "/img/image_unavailable.jpg. There is a secondary image in that folder named image_unavailable_alt.jpg. You can simply rename files to use the alternate image. The whole point for using a default image was due to the probability of having old entries that did not have theme-defined entry images.

I thought about making a theme option for whether to use a default image if no image was defined. I concluded that the theme had enough options, and elected not to provide such an option. I welcome your thoughts on this issue.

One final thing - when last I looked at your site, you have a /2k11/user.css file that is changing the design of your timeline theme. If that is not your intent, you need to rename that file, or add a blank or modified user.css to your timeline theme folder.

User avatar
u1amo01
Regular
Posts: 267
Joined: Fri Sep 28, 2007 3:55 pm
Location: Kurpfalz, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by u1amo01 » Thu Apr 14, 2016 11:10 pm

user.css? Huh? Maybe something with templates_c? I have deleted it. Should be ok now?

I think I didn't get the thing with the entry image. How do I have to use this?

[edit]Ah, found the place for the entry image. Sorry.

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Thu Apr 14, 2016 11:24 pm

u1amo01 wrote:user.css? Huh? Maybe something with templates_c? I have deleted it. Should be ok now?

I think I didn't get the thing with the entry image. How do I have to use this?

[edit]Ah, found the place for the entry image. Sorry.
I updated the instructions on Using the Timeline Theme to better explain entry images.

Does anyone think I should add a theme option for this default image when an entry does not have one?

User avatar
Don Chambers
Regular
Posts: 3633
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Thu Apr 14, 2016 11:26 pm

u1amo01 wrote:user.css? Huh? Maybe something with templates_c? I have deleted it. Should be ok now?
You still have a user.css file in the folder /templates/2k11/user.css. You must either rename this file to something else (ie, 2k11-user.css) or better yet, place an empty user.css file in /templates/timeline/.

User avatar
u1amo01
Regular
Posts: 267
Joined: Fri Sep 28, 2007 3:55 pm
Location: Kurpfalz, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by u1amo01 » Thu Apr 14, 2016 11:47 pm

Thanks!

I have put an empty user.css in templates/timeline.

Maybe it would be a good idea if you put an empty user.css into the template?

Post Reply