Timeline - a responsive, mobile first theme

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

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Fri Apr 15, 2016 12:13 am

u1amo01 wrote:Thanks!

I have put an empty user.css in templates/timeline.
Looks great!!!!!! It is nice to see a real site running the theme instead of just my demo! :wink:
u1amo01 wrote:Maybe it would be a good idea if you put an empty user.css into the template?
I can't do that. If you, or anyone else created a user.css in the timeline folder, that would be overwritten by any future updates to the theme... which would be a real problem if the user stylesheet wasn't empty.

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 » Fri Apr 15, 2016 9:25 am

Ah, ok.

Is there a size you can recommend for the entry image? Small images don't look good, but I don't want to put a 1200px image in every posting :-)

Very interesting theme, IMHO. Thank you!

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Timeline - a responsive, mobile first theme

Post by Timbalu » Fri Apr 15, 2016 9:27 am

Don Chambers wrote: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/.
This is a bad behaviour of the fallback structure and IMHO not intended to have. User styles should never automatically fall back, since being build for this theme only (even when using engine). It will still be possible to overrule this by the config.inc file or by a plugin though.

I am going to change this for both user.css (frontend/backend) files in Serendipity 2.1, if no one opposes.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

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

Re: Timeline - a responsive, mobile first theme

Post by yellowled » Fri Apr 15, 2016 10:15 am

Timbalu wrote:This is a bad behaviour of the fallback structure and IMHO not intended to have. User styles should never automatically fall back, since being build for this theme only (even when using engine).
+1

(Even when using engine, user.css styles usually don't even make sense for another theme.)

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

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 » Fri Apr 15, 2016 10:38 am

Hmm, more questions:

Looks for me like the entry-image is not included in the feed? Can I change this? (Sometimes I have articles only with a photo or articles with a text corresponding with the image)

For the social links I can select "RSS". What can I do to offer two RSS-Feeds, one for entries and one for comments? Also I havn't found Atom.

When you have a look at http://u1amo01.de/blog/categories/15-Fotos and scroll down to "Torte" and "Wasserturm" the entry-date is shown beside the pic. Would be nicer to have it after the photos. I think there is some Clear-CSS-thing missing (sorry for beeing so unspecific, forgot nearly everthing about webdesign). Maybe it's my fault for using wrong html?
Last edited by u1amo01 on Fri Apr 15, 2016 12:24 pm, edited 3 times in total.

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Timeline - a responsive, mobile first theme

Post by Timbalu » Fri Apr 15, 2016 11:20 am

Timbalu wrote:I am going to change this ...
No, sorry!
Well, the bad thing about this is the following, let me resume:

I thought I could easily avoid this behaviour by not using the third parameter (force_frontend_fallback).
And I forgot to remember, that this will not work, since '2k11' or the 'default' (dir) theme will always be in the Serendipity fallback line. This is a general behaviour ([0] "user"-theme - [1] "default"-theme - [2] "standard"-theme) which is much more vital for the system than the user.css file includement and having to overset (0) or remove an already stated file in (1) or 2.

We could have had decided to output the user.css file by
  • not using serendipity_getTemplateFile() as it was before, since we had it called by {$serendipityHTTPPath}templates/{$template}/user.css
    (but decided to automatically include the user.css file with 2.0.1) or
  • by manipulating serendipity_getTemplateFile() for the users.css fallback cases.
The latter was the thing we decided not to do, since that would cost performance in this central function.

Since we knew this was something at least unexpected and now a need to give away into the users responsibility, we wrote this:
https://github.com/s9y/Serendipity/blob ... /NEWS#L185 (see first & last sentence)
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

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

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Fri Apr 15, 2016 2:54 pm

u1amo01 wrote:Is there a size you can recommend for the entry image? Small images don't look good, but I don't want to put a 1200px image in every posting :-)
The size of the entry image is a matter of personal choice. Images are constrained in width to whatever is available a particular view. For detailed entry views, I believe the available width is 848px. Most of the demo images are 1200px wide. The Images will float left if less than 800px wide. Height of images is your choice and makes no difference in the theme.

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

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Fri Apr 15, 2016 2:57 pm

Timbalu wrote:No, sorry!Since we knew this was something at least unexpected and now a need to give away into the users responsibility, we wrote this:
https://github.com/s9y/Serendipity/blob ... /NEWS#L185 (see first & last sentence)
Yes, we had a discussion via a github issue. I personally hate the inclusion of user.css from a different theme affecting the current theme, but it seems unavoidable at the moment.

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

Re: Timeline - a responsive, mobile first theme

Post by Don Chambers » Fri Apr 15, 2016 3:17 pm

u1amo01 wrote:Looks for me like the entry-image is not included in the feed? Can I change this? (Sometimes I have articles only with a photo or articles with a text corresponding with the image)
I need to modify the feed files to include the entry image. I will try to do that within the next few days. Until then, images within your entry are included in the feed as they would with any theme.

u1amo01 wrote:For the social links I can select "RSS". What can I do to offer two RSS-Feeds, one for entries and one for comments?
Social links are not limited in quantity. You can supply two social links, each using the rss icon - one for entries, and another for comments.
u1amo01 wrote:Also I havn't found Atom.
Not sure what you mean by this. If you want the Atom feed, simply add the corresponding url to the social link.
u1amo01 wrote:When you have a look at http://u1amo01.de/blog/categories/15-Fotos and scroll down to "Torte" and "Wasserturm" the entry-date is shown beside the pic. Would be nicer to have it after the photos. I think there is some Clear-CSS-thing missing (sorry for beeing so unspecific, forgot nearly everthing about webdesign). Maybe it's my fault for using wrong html?
Yes - this is because the image is not wide enough for the timeline. I thought I had this scenario dealt with... That is very easy to fix in the theme, but you can prevent this from happening now by making your entry images >= 390px. I will fix this in the theme asap.

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 » Fri Apr 15, 2016 3:41 pm

Don Chambers wrote:
u1amo01 wrote:Looks for me like the entry-image is not included in the feed? Can I change this? (Sometimes I have articles only with a photo or articles with a text corresponding with the image)
I need to modify the feed files to include the entry image. I will try to do that within the next few days. Until then, images within your entry are included in the feed as they would with any theme.
Hmm, I have thought about this and maybe it could also be good the entry-image is not included. I have started to test some entry-images which don't have to be in the feed. Look into blog, the first actual entries to see what I mean. I'm thinking about a simple default-pic and maybe a special one depending on the categorie.

So maybe you wait some days before you start to do a lot of work :-)
Social links are not limited in quantity. You can supply two social links, each using the rss icon - one for entries, and another for comments.
Ah ja. I was wrong; in the blog there is not the word "RSS", only the icon. No problem to take two or three. User error :-) Next time I'll write the question on a paper, sleep a night and have a look next morning before sending dumb questions to the forum. Sorry.
[...] but you can prevent this from happening now by making your entry images >= 390px.
Will do so later. So no need to change any code. Thanks.

Thank you very much, Don.

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 » Sat Apr 16, 2016 9:19 am

Don Chambers wrote:
u1amo01 wrote:When you have a look at http://u1amo01.de/blog/categories/15-Fotos and scroll down to "Torte" and "Wasserturm" the entry-date is shown beside the pic. Would be nicer to have it after the photos. I think there is some Clear-CSS-thing missing (sorry for beeing so unspecific, forgot nearly everthing about webdesign). Maybe it's my fault for using wrong html?
Yes - this is because the image is not wide enough for the timeline. I thought I had this scenario dealt with... That is very easy to fix in the theme, but you can prevent this from happening now by making your entry images >= 390px. I will fix this in the theme asap.
Hmm. Now I have put a entry image into the theme with 800 x 150 px and it still looks not good. Maybe you could have a look, again?

The "Torte" article contains a entry image, "Wasserturm" the default image - I used the same pic for both.

User avatar
Timbalu
Regular
Posts: 4598
Joined: Sun May 02, 2004 3:04 pm

Re: Timeline - a responsive, mobile first theme

Post by Timbalu » Sat Apr 16, 2016 9:51 am

Size should not matter!
Rename to width instead of max-width at ~1129

Code: Select all

#entry img, .timeline img {
    height: auto;
    width: 100%;
}
and add width at ~721

Code: Select all

.timeline .timeline-footer {
    border-top: 1px solid #ccc;
    font-size: 14px;
    overflow: hidden;
    padding: 6px 10px;
    width: 100%;
}
And the constant string "Noch keine Kommentare" is to long for the containers line including the full date.
Regards,
Ian

Serendipity Styx Edition and additional_plugins @ https://ophian.github.io/ @ https://github.com/ophian

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

Re: Timeline - a responsive, mobile first theme

Post by yellowled » Sat Apr 16, 2016 11:32 am

Timbalu wrote:nstead of max-width at ~1129

Code: Select all

#entry img, .timeline img {
    height: auto;
    width: 100%;
}
Note that this might upscale images which will look bad.

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

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 » Sun Apr 17, 2016 10:24 am

Timbalu wrote: and add width at ~721

Code: Select all

.timeline .timeline-footer {
    border-top: 1px solid #ccc;
    font-size: 14px;
    overflow: hidden;
    padding: 6px 10px;
    width: 100%;
}
Hm. I have only added this part and I think it looks pretty good on first sight.

Thank you :-)

User avatar
Don Chambers
Regular
Posts: 3614
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 19, 2016 5:35 am

u1amo01 wrote:
Timbalu wrote: and add width at ~721

Code: Select all

.timeline .timeline-footer {
    border-top: 1px solid #ccc;
    font-size: 14px;
    overflow: hidden;
    padding: 6px 10px;
    width: 100%;
}
Hm. I have only added this part and I think it looks pretty good on first sight.

Thank you :-)
This is exactly what I added a couple days ago, but the zipfile has not yet been updated. I am very busy for the next 24 hours or so, but will upload an updated zipfile of the theme as soon as I can.

Post Reply