Next Theme

Skinning and designing Serendipity (CSS, HTML, Smarty)
User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Next Theme

Post by kybernator » Mon May 04, 2015 3:15 pm

Hi everybody,

I have started experimenting with 2.01.

So far,I tried 2k11 and Next as themes, great to have such responsive options, thank you!

Something rather minor I noted:

Using the Next Theme, the serendipity_plugin_quicksearch displays its entry field shifted a considerable amount down from where one would expect it (IE and Chrome on Win7, Chrome on Linux) - a completely non-issue, because one would likely use the search option provided by the Next theme itself, but maybe an indicator for some other problem.

The other thing: The search field on top, offered by Next, includes a symbol of a magnifying glass - which is good for indicating what the field is for, but tempts my "test-user" to click on it after inputting text and expect a search to be performed - any way to not display the magnifying glass via user.css?

Regards,

Bernd

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

Re: Next Theme

Post by yellowled » Mon May 04, 2015 8:09 pm

kybernator wrote:one would likely use the search option provided by the Next theme itself, but maybe an indicator for some other problem
The most likely indicator would be that this was fixed (by suppressing the output of the sidebar plugin in Next altogether) after 2.0.1 was released. Easy fix for the time being: set quicksearch to hidden.
kybernator wrote:any way to not display the magnifying glass via user.css?
Sure.

Code: Select all

#searchform .icon-search {
    display: none;
    visibility: hidden;
}
YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Next Theme

Post by kybernator » Mon May 04, 2015 9:36 pm

yellowled wrote:Easy fix for the time being: set quicksearch to hidden.
Yepp, done that :-)
yellowled wrote:
kybernator wrote:any way to not display the magnifying glass via user.css?
Sure.

Code: Select all

#searchform .icon-search {
    display: none;
    visibility: hidden;
}
Thanks a lot!

BTW, any documentation or other stuff on the Next theme out there? I am not really hoping for a user.css-generator like for 2k11, but maybe some info on your reasons to make a new responsive theme, and the differences to the 2k11-approach.

Cheers

Bernd

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

Re: Next Theme

Post by yellowled » Tue May 05, 2015 5:16 pm

kybernator wrote:BTW, any documentation or other stuff on the Next theme out there? I am not really hoping for a user.css-generator like for 2k11, but maybe some info on your reasons to make a new responsive theme, and the differences to the 2k11-approach.
Note: I tend to come off as harsh or something on some of my (forum) comments because I try to be concise. I don't mean to be short-spoken because I don't want to answer or something, I just try not to ramble too much. :wink:
  • I will very likely not build a user.css generator for any theme I create in the future. The effort that goes into building them is just way out of proportion compared to the number of potential users and to what they actually want to change.
  • Building user.css generators also takes up time that I would usually invest in s9y development or new themes. I feel that's a better use of my (spare) time.
  • I did not explicitly “make a new responsive theme”, I just made a new theme. There won't be any non-responsive themes in the future, at least not by me. Responsive web design is not a new thing for the future, it's a given now.
  • I also made a new theme because frankly, s9y desperately needs new, state-of-the-art frontend themes. The lack of themes scares away many potential users.
  • Next is basically a modernized version of 2k11 (which is why they look alike). I started working on 2k11 about four years ago. It has a lot of stuff that is no longer necessary. It might still be the better choice for “conservative” users (especially those that still need or want to actively support IE8 or even 7), but if you prefer a modern, lean theme, Next is a good option.
  • From a technical point of view, the biggest difference is that Next is “mobile first”. That was not feasible four years ago, and I didn't think rewriting 2k11 mobile first would be a good idea. The other big difference is that Next no longer uses a select menu for the smallscreen nav. Instead, it has a toggle menu including the infamous “hamburger” icon.
Hope that clears some things up. :)

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

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Next Theme

Post by kybernator » Tue May 05, 2015 9:27 pm

Thanks, Matthias, that was quite informative.

Responsive web design indeed should be a given now, but quite often it still isn't - all the better to have options like 2k11 and Next, thank you. Also, you didn't come across as harsh, just short and to the point.
yellowled wrote: The other big difference is that Next no longer uses a select menu for the smallscreen nav. Instead, it has a toggle menu including the infamous “hamburger” icon.
I noticed, and was going to ask a question about that: In my first playing around with and testing of Next, I used several mobile devices to look at the site, too. In one of them the browser (I do not have it with me at the moment, Chrome on Android I think, the hamburger icon did not show (on another android mobile, it did, however).

I suppose the browser did either not load or not display the icon font - the magnifying glass in the search field was not shown, either.

Since it worked everywhere else (including desktop browsers, when made narrow enough), the problem seems to be particular to the browser/the OS. Still, the coloured bar without the icon does not give much of an incentive to "click" it.

Is there a way to display the word "Menue" to the right of the hamburger icon, so that in case af a icon font failure there is a fallback?

Also, there are some more questions regarding the proper styling of plugins, particularly Static Pages and Guestbook, in combination with Next - would questions concerning that better be asked here, or in the plugins forum?

Cheers,

Bernd

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

Re: Next Theme

Post by yellowled » Wed May 06, 2015 10:49 am

kybernator wrote:Since it worked everywhere else (including desktop browsers, when made narrow enough), the problem seems to be particular to the browser/the OS.
This may have various reasons, depending on whether the icon fonts don't work temporarily or permanently, but if it really is in only one browser, it tends to be that browser's fault. (Especially if that browser happens to be Opera Mini, which doesn't do icon fonts.)

I have seen icon fonts not work in Firefox because of a very customized user setting in about:config, for example. And of course, there is literally no way to test for things like that beforehand.
kybernator wrote:Still, the coloured bar without the icon does not give much of an incentive to "click" it.
I think for most people, that is an extablished UX pattern by now.
kybernator wrote:Is there a way to display the word "Menue" to the right of the hamburger icon, so that in case af a icon font failure there is a fallback?
Yes, but not necessarily only in case of an icon font failure because I don't think we can test for that properly. We can only test if a browser does not support icon fonts at all, and that case is already covered by Next's CSS.

To display it permanently (it's already there for accessibility reasons, and I think it's even localized), add this to your user.css:

Code: Select all

#navbar #open-nav .icon-menu {
    display: inline-block;
    margin-right: .4em;
}

#open-nav .fallback-text {
    clip: auto;
    display: inline-block;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}
The second selector revokes hiding the fallback-text, the first one makes sure that icon and text align next to each other. You might want to adapt the font-size for the fallback text as well.
kybernator wrote:Also, there are some more questions regarding the proper styling of plugins, particularly Static Pages and Guestbook, in combination with Next - would questions concerning that better be asked here, or in the plugins forum?
Well, I doubt that these are actually specific to Next. :) They're probably technically CSS questions.

The Themes forum is fine for that, or switch to the German forum if that's easier for you.

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

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Next Theme

Post by kybernator » Wed May 06, 2015 11:55 am

Thanks, great, permanent display is what I was looking for.
yellowled wrote:
kybernator wrote:Still, the coloured bar without the icon does not give much of an incentive to "click" it.
I think for most people, that is an extablished UX pattern by now.
Really? I mean, only the coloured bar, no icon visible?

Thanks for the invitation re plugin styling questions, will do that later.

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

Re: Next Theme

Post by yellowled » Wed May 06, 2015 12:38 pm

kybernator wrote:Really? I mean, only the coloured bar, no icon visible?
Erm, no. Of course, the icon is supposed to be there. :mrgreen:

Let me elaborate a bit here as to why this uses icon fonts. There are multiple ways to display these icons (same with the magnifier for search, left/right arrows etc.):
  • Bitmap graphics (JPG/GIF/PNG). Bad idea. They don't scale very well, they look bad on high definition displays …
  • Icon fonts. Not without potential technical complications, but very easy to use (for the developers) and with pretty good browser support (in general).
  • Vector graphics (SVG). Technically, this would be the “gold standard” if more browsers already supported “true SVG sprites”. As of now, a lot of them still need JS support, which does not have a proper fallback. Not a good idea yet, I think.
Technically, there's another technique to create icons using CSS only, but that does not work well for all icons and it blows up the stylesheet significantly. It does, however, work well for the hamburger icon.

So for the time being and for the foreseeable future, I think icon fonts are the easiest solution. They will eventuelly be replaced by SVG sprites, but for that to really happen, IE <= 11 will have to die first. I suppose that's going to be a while.

I am not aware of any issue with icon fonts in Chrome/Android. I could test it myself if you could provide a link to the page where it happens, though. However, I only have a 4.4.x device available – if this happens on a 5.x device for you, I might not be able to reproduce the issue. (Which is precisely why debugging on Android can be hard.)

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

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Next Theme

Post by kybernator » Wed May 06, 2015 1:00 pm

Oh, I was in no way implying that I think icon fonts are a bad design choice, quite the opposite, actually.

And, as I wrote, it works on Chrome/Android, generally speaking, just with one device I noticed this problem and thought that icon + text might be a good idea - for which you provided the solution ;-)

I will gladly send you a link later, when I ask about plugin styling.

I am very glad and thankful for S9Y, btw, and for the tremendous gift you developers give - have been thankful for years, and it keeps getting better. And by "gift" I mean programming and support.

Cheers

Bernd

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

Re: Next Theme

Post by yellowled » Wed May 06, 2015 2:51 pm

kybernator wrote:And, as I wrote, it works on Chrome/Android, generally speaking, just with one device I noticed this problem
That sounds totally odd, but might not even be that uncommon. Rarely any Android device has a “vanilla” Android, so I guess they might even have branded components or settings that influence these things. (For instance, if you disable using external fonts in your browser, which you can actually do for instance in Firefox's advanced settings, icon fonts will not work.) Also, there's rooted devices and tons of different browsers that people can use … from a debugging point of view, Android is a nightmare.
kybernator wrote:I am very glad and thankful for S9Y, btw, and for the tremendous gift you developers give - have been thankful for years, and it keeps getting better. And by "gift" I mean programming and support.
Thanks. It's nice to hear that once in a while, although we all really enjoy develping and supporting s9y. :)

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

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Next Theme

Post by kybernator » Wed May 06, 2015 4:20 pm

OK, a short feedback:

While the solution for displaying the Menue-text works just fine, the code to hide the magnifying glass icon seems to have no effect - not a big matter, though.

More later.

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

Re: Next Theme

Post by yellowled » Wed May 06, 2015 5:47 pm

kybernator wrote:While the solution for displaying the Menue-text works just fine, the code to hide the magnifying glass icon seems to have no effect - not a big matter, though.
Try changing that to

Code: Select all

#searchform label .icon-search {
    display: none;
    visibility: hidden;
}
If that does not work, try

Code: Select all

#searchform [class^="icon-"]:before,
#searchform [class*=" icon-"]:before{
    display: none;
    visibility: hidden;
}
YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Next Theme

Post by kybernator » Wed May 06, 2015 5:59 pm

Tried both, none did it (Chrome on Win7, at work)

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

Re: Next Theme

Post by yellowled » Wed May 06, 2015 6:14 pm

Just in case, you did save the user.css, right? Because using these styles in the developers tools does work, and I don't see why it would not work in your user.css …

I also double-checked this in my test blog, and it does work there. If all else fails, you can try:

Code: Select all

#searchform .icon-search {
    display: none !important;
}
but !important should always be a last resort in CSS.

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

User avatar
kybernator
Regular
Posts: 126
Joined: Sat Sep 22, 2012 10:15 pm

Re: Next Theme

Post by kybernator » Wed May 06, 2015 9:44 pm

Well, I was pretty sure I had saved, but I repeated all steps very carefully tonight. No change.

Also, I was sure that I was modifying the correct file, since that one also includes the modification concerning the text addition to the hamburger icon.

I can confirm the behaviour for Chromium and Firefox on Linux now.

Your last code, however, did the trick, thank you!

Post Reply