Responsive Template - "responsivehtml"

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

ojay
Posts: 78
Joined: Sun Nov 09, 2014 10:24 am
Location: da, wo die Zeit entsteht

Responsive Template - "responsivehtml"

Post by ojay » Tue May 17, 2016 12:02 pm

Hi,

I use this responsivehtml-template
http://oldnema.compsys.cz/demos/responsivehtml/

Is it possible to mark also the the selected (active) menu-title of one page, like it is colored (lightblue)when "onmouseover" is active?
So you see only at the Breadcrumb-Navigation / Locator which page is displayed.

kind regards
Last edited by ojay on Thu May 19, 2016 4:08 pm, edited 1 time in total.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Responsive Template - "responsivehtml"

Post by cmb » Tue May 17, 2016 1:20 pm

ojay wrote:Is it possible to mark also the the selected (active) menu-title of one page, like it is colored (lightblue)when "onmouseover" is active?
Just add something like the following to the stylesheet:

Code: Select all

.sdoc a, .sdocs a {
    background: lightblue !important;
}
Christoph M. Becker – Plugins for CMSimple_XH

ojay
Posts: 78
Joined: Sun Nov 09, 2014 10:24 am
Location: da, wo die Zeit entsteht

Re: Responsive Template - "responsivehtml"

Post by ojay » Tue May 17, 2016 4:51 pm

Hi Christoph,

it is not working at subsites, like the example picture with the red dots.
Only the single menu-links are marked correct.
At subsites-pages (.sdocs a) are marked all subsites links.

I have found the docu to these ccs-codes...
http://www.cmsimple.org/toc_standard/?D ... SS_Klassen
Why all four (4) links are coloured in in the active colour, I don't know.

I have expected, that it is possible to get the same function, like the onmouseover-colouring.
Only that the background-colour of the menu-links stays only at active pages.

I use only this code...

Code: Select all

.sdoc a {background: #0080ff !important;}
The first link, which is visible, when the menu-links are not expanded, is not working. :(

But these css-code is enough.

kind regards
Last edited by ojay on Tue May 17, 2016 5:39 pm, edited 1 time in total.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Responsive Template - "responsivehtml"

Post by cmb » Tue May 17, 2016 5:35 pm

ojay wrote:it is not working at subsites, like the example picture with the red dots.
Ah, I see. I assume that you're using the SubsiteFuncs plugin[1]. Apparently, SubsiteFuncs doesn't set the customary (s)doc(s) classes in the menu, so some other selector has to be found. Maybe you can start with the following:

Code: Select all

.ssf_subsiteGroupsMenuContainer_boxes li span {
    background: lightblue;
} 
If you can post a link to your site, checking out the details would be simpler. :)

[1] Maybe somebody will inform Gert that there are deprecated notices shown at the top of the page.
Christoph M. Becker – Plugins for CMSimple_XH

ojay
Posts: 78
Joined: Sun Nov 09, 2014 10:24 am
Location: da, wo die Zeit entsteht

Solved: Responsive Template - "responsivehtml"

Post by ojay » Thu May 19, 2016 4:27 pm

So that the aktive links are marked in the light blue color, you have to insert this

Code: Select all

.sdoc > a, .sdocs > a {background: #0080ff !important;}
in the stylesheet-/CSS-file.

beate_r
Posts: 174
Joined: Thu May 22, 2008 11:44 pm
Location: Hessen / Germany

Re: Responsive Template - "responsivehtml"

Post by beate_r » Sun Oct 09, 2016 8:34 pm

May i continue in this thread? I am improving the device independence of epi.ritzert.net.

I have implemented the technique used in the default responsive template into my own template, whaich was pretty straightforward

Unfortunately this fails, at least on cell phones with high res displays. Reason: the template just checks the pixel resolution. According to a suggestion i found in selfhtml, i changed the relative units to em and occasionally ex. Again straightforward, especially because that had already been the case in a very early version of that template.

It mostly seems to work (b.ritzert.net). Wide screens get the old sidebar view, narrow screens get a pulldown menu. I think the present state, although not fully done, is an improvement over the original style sheet, so i consider to install it before i procede. Unfortunately i cannot test this on a mobile device - i still use my 12 year old Palm Treo 650...

Nevertheless there are some edges: some (low res) displays require scaling of the pictures, Moreover i have no real clue how many ems can be put into a row of text. I did some trial and error estimate which seems to be useful as a rule of thumb. Are there any documeented defaults available?

(If yes, it would be nice to overwork the responsive template. I might actually do this by myself as soon as i have reached a stable state with my own three sites i must support.)

best

Beate

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Responsive Template - "responsivehtml"

Post by Tata » Sun Oct 09, 2016 10:46 pm

I tried to play with mediaquerries so that (ignoring existing resolution) I set @mediaquerry blocks for widths only with steps by 100px from 300min to 1900min. Then I set "page-wrapper" container with margin:auto so with each resolution the container is centered. I have chance to test pages on android table, MAC table, widows notebook, netbook, iPhone6 and Samsung smartphone, anlso various resolution with FireFox Developer tools. On most of devices I am pretty satisfied with his approach. On some of them the rpaces sight/left are more or less disturbing. Also, very nice result are achievable with viewport related units (vw, vh). But those are not yet supported by all browsers.
It is impossible to make a template that would fit to all possible devices. There are blogs and forums, manuals etc. But the best I have found so far is https://css-tricks.com/snippets/css/med ... d-devices/.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Responsive Template - "responsivehtml"

Post by cmb » Mon Oct 10, 2016 7:11 am

beate_r wrote:Unfortunately i cannot test this on a mobile device - i still use my 12 year old Palm Treo 650...
There are some emulators available. Not sure if the Opera Mobile emulator is still of value (I used it when Opera 12 was in use), but there are some online tools available as well, see http://t3n.de/news/8-tools-testen-mobil ... es-436988/. And of course, the developer tools of contemporary browsers already offer some support for that.
beate_r wrote:Nevertheless there are some edges: some (low res) displays require scaling of the pictures,
Using percent (%) values might be helpful with regard to images (and more). However, this might still require the visitor to download large images only to see them in a scaled down version in the browser – pretty inefficient. Using
the new picture element appears to be reasonable nowadays. There are also server side solutions available; one of these has been suggested in this forum some time ago, but I can't find the thread.
Christoph M. Becker – Plugins for CMSimple_XH

frase
Posts: 5085
Joined: Thu Apr 21, 2016 6:32 am
Location: Saxony
Contact:

Re: Responsive Template - "responsivehtml"

Post by frase » Mon Oct 10, 2016 8:18 am


beate_r
Posts: 174
Joined: Thu May 22, 2008 11:44 pm
Location: Hessen / Germany

Re: Responsive Template - "responsivehtml"

Post by beate_r » Mon Oct 10, 2016 11:22 pm

blisk looks interesting. Can it be run with Linux+Wine?

BTW: today i had the opportunity to test the site on an android machine with a pretty small pixel resolution. Basically okay; i will go productive after a minor change before i continue optimising the template.

Post Reply