Timeline - a responsive, mobile first theme

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

Timeline - a responsive, mobile first theme

Post by Don Chambers »

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!
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by yellowled »

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

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

Re: Timeline - a responsive, mobile first theme

Post by Harald Weingaertner »

WOW, very interesting theme again! Very good work! Thank you.
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers »

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!
=Don=
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers »

Harald Weingaertner wrote:WOW, very interesting theme again! Very good work! Thank you.
Thanks Harald.
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by yellowled »

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
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers »

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:
=Don=
yellowled
Regular
Posts: 7111
Joined: Fri Jan 13, 2006 11:46 am
Location: Eutin, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by yellowled »

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
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers »

The input field was missing a class. Demo and zipfile updated.
=Don=
u1amo01
Regular
Posts: 273
Joined: Fri Sep 28, 2007 3:55 pm
Location: Kurpfalz, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by u1amo01 »

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.
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers »

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.
=Don=
u1amo01
Regular
Posts: 273
Joined: Fri Sep 28, 2007 3:55 pm
Location: Kurpfalz, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by u1amo01 »

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.
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers »

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?
=Don=
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers »

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/.
=Don=
u1amo01
Regular
Posts: 273
Joined: Fri Sep 28, 2007 3:55 pm
Location: Kurpfalz, Germany
Contact:

Re: Timeline - a responsive, mobile first theme

Post by u1amo01 »

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