3.1 Responsive skins - unexpected behaviour.

[Jamie Bodley-Scott]

I decided to make a small chamge to the css in Flat Blue Diamond.
For index/search/toc I wanted a thinner box with no dark line (border) and a small radius.

So for the desktop CSSs I edited the 3 files for the desktop. In the case of toc, I ended up with:

div#hmpagebody {
position: absolute;
top: 0.3rem; left: 0.3rem; right: 0.3rem; bottom: 0.3rem;
background-color: #d9d9d6;
overflow: auto;
border-style: none;
border-color: #444444;
border-width: thin;
border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
padding: 0;
margin: 0;
}

Similar for the other 2 CSSs. Everything is nice and works fine for all 3 tabs.

So on to phone and tablets next.........here things go a bit screwy. For toc again I end up with:

div#hmpagebody {
position: absolute;
top: 0.3rem; left: 0.3rem; right: 0.3rem; bottom: 0.3rem;
background-color: #d9d9d6;
overflow: auto;
border-style: none;
border-color: #444444;
border-width: thin;
border-radius: 0.3rem 0.3rem 0.3rem 0.3rem;
padding: 0;
margin: 0;
}

And for toc it works totally as expected.
So apply similar 'fixes' to index and search - and on my phone both are ignored. But on my iPad only Index is ignored; the other 2 are fine.
Then on my Android tablet (which looks a bit like it is using the tablet profile) only the toc is working as expected (like the phone).

And on the subject of the tablet - phone and iPad are picking up the colours / logos/ etc I want for the page background. But the tablet is finding other things to use from ?????? such as your H&M logo and gray version og the blackpaisley you have in baggage.

So I am quite confused now.........do you have any suggestions how to get consistent behaviours?

[Tim Green]

Hi Jamie,

The first important question is: are you 1) editing the CSS files directly in the skin or 2) are you editing them in your output folder and then copying them back into the skin? If you have done 2), then you will need to scrap the CSS files and start again. Help & Manual 7.0.8 and above now has support for variables and calculation variables in CSS and JS files, and these are used extensively in these skins. If you replace the source files with the "processed" versions from the output the variables are no longer there and a lot of things will get screwy.

On the inconsistent effects you are seeing: This may have to do with not clearing the cache on your test devices while testing. Mobile device browsers have particularly persistent caches. On iOS you need to go to Settings > Safari and hit "Clear History and Website Data". On Android you need to go into Settings > Privacy and then the options for clearing the browsing data.

If you continue to have problems mail me a copy of the skin you are editing at support AT ec-software.com (replace the AT with @) and I'll have a look at it.

[Simon Dismore]

Help & Manual 7.0.8 and above now has support for variables and calculation variables in CSS and JS files

[Jamie Bodley-Scott]

Tim
Thanks. The issue seems to be caching as you said. Is there some way to force H&M to not cache during development with some publish option you guys can add. This would be really helpful as I am sure I am not the only one facing this issue.

[Tim Green]

Thanks. The issue seems to be caching as you said. Is there some way to force H&M to not cache during development with some publish option you guys can add. This would be really helpful as I am sure I am not the only one facing this issue.

There's nothing we can do about that. In desktop browsers you can turn off the cache for development by pressing F12 to display the development console. Mobile browsers don't have that option without jumping through some more advanced development hoops: You need to install some development software and connect the device to your development computer with a USB cable, and with Apple devices you can only do that on a Mac...

[Tim Green]

Help & Manual 7.0.8 and above now has support for variables and calculation variables in CSS and JS files

This isn't documented yet. It's activated in the Text Variables config section in skins with the checkbox "Parse CSS and JavaScript files to replace text variables". Have a look at the JS and CSS files in the new Premium Pack skins and you will see that at work. Normal variables work just as expected. You can insert any global and user-defined variable anywhere in a CSS or JS baggage file and it will be replaced on publishing.

Calculation variables can be used to derive values from the values of other variables. I've used them quite extensively in the CSS files in the V3 Responsive skins to set dimensions based on the dimensions of other elements. The syntax is quite simple:

Code: Select all

div#topicbox {
	position: absolute;
	background-color: #1265ab;
	top:  <%CALC(%HEADERBOX_TOP% + %HEADERBOX_HEIGHT%)%>rem;
	right: 0.0rem; bottom: 0.0rem;
	border: 0.154rem solid #444444;
	border-width: 0.154rem 0 0 0.154rem;
	left: <%CALC(%NAVWIDTH% + 0.300)%>rem;
	z-index: 1;
	} 

You enclose the entire calculation variable in <%CALC()%>, and the calculation to be performed goes between the braces. Variables to perform the calculation on are inserted with percent signs but without the pointy braces. Normal mathematical precedence rules apply. That's it, really...

[Simon Dismore]

Nice feature! Three non-urgent background questions:

• Are there any operators other than +-*/()?
• The ability to ask for the max or min of a pair of values might be helpful in CSS sometimes. Is that achievable?
• Are CSS and JS files processed in exactly the same way, so I only need to test one path?

Btw, here's a subset of my test suite; everything worked just as expected

Code: Select all

// JavaScript file in skin's baggage to test %CALC()% in H&M 7.0.9:
// all the variables were defined naturally in the source project, e.g. MINUSTWO was "-2" and ASTRING was "A string"
// when a variable was re-defined in the skin, the skin's value over-rode the project value in the usual H&M way
// the two string concatenations were ignored, everything else was calculated correctly
var myConcatenation=<%CALC(%TEN% + " " + %TWO%)%>;
var myConcatenation=<%CALC(%ASTRING% + " is " + %NOTANUMBER%)%>;
var myAddition=<%CALC(%TEN% + %TWO%)%>;
var mySubtraction=<%CALC(%TEN% - %TWO%)%>;
var myMultiplication=<%CALC(%ONEPOINTFIVE% * %TWO%)%>;
var myDivision=<%CALC(%TEN% / %MINUSTWO%)%>;
var myDefaultPrecedence=<%CALC(%ONEPOINTFIVE% * %TWO% - %TWO%)%>;
var myUnspacedPrecedence=<%CALC(%ONEPOINTFIVE%*%TWO%-%TWO%)%>;
var myManualPrecedence=<%CALC(%ONEPOINTFIVE%*(%TWO%-%TWO%))%>;

[Tim Green]

HI Simon,

Are there any operators other than +-*/()?

No, this is just basic math. You also cannot nest calculations.

The ability to ask for the max or min of a pair of values might be helpful in CSS sometimes. Is that achievable?

I'm not going to even try to ask for that. I'd get my head bitten off.

Are CSS and JS files processed in exactly the same way, so I only need to test one path?

Yes, same-same.