Responsive Template - "responsivehtml"
Moderator: mikey
Responsive Template - "responsivehtml"
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
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.
Re: Responsive Template - "responsivehtml"
Just add something like the following to the stylesheet: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?
Code: Select all
.sdoc a, .sdocs a {
background: lightblue !important;
}
Christoph M. Becker – Plugins for CMSimple_XH
Re: Responsive Template - "responsivehtml"
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...
The first link, which is visible, when the menu-links are not expanded, is not working.
But these css-code is enough.
kind regards
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;}
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.
Re: Responsive Template - "responsivehtml"
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:ojay wrote:it is not working at subsites, like the example picture with the red dots.
Code: Select all
.ssf_subsiteGroupsMenuContainer_boxes li span {
background: lightblue;
}
[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
Solved: Responsive Template - "responsivehtml"
So that the aktive links are marked in the light blue color, you have to insert this
in the stylesheet-/CSS-file.
Code: Select all
.sdoc > a, .sdocs > a {background: #0080ff !important;}
Re: Responsive Template - "responsivehtml"
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
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
Re: Responsive Template - "responsivehtml"
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/.
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.
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.
Re: Responsive Template - "responsivehtml"
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:Unfortunately i cannot test this on a mobile device - i still use my 12 year old Palm Treo 650...
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. Usingbeate_r wrote:Nevertheless there are some edges: some (low res) displays require scaling of the pictures,
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
Re: Responsive Template - "responsivehtml"
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.
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.