Example: Customising the HTML5 tripane skin

[rogersm]

Hi Dave,

Great, thanks very much again.

mark

[olgad]

Hi everyone,

Does anybody have Dave's project sample? Unfortunately, this page is not available anymore:
http://ukauthor.esy.es/SkinMods/Default.htm

Thanks!

[olgad]

Hi everyone,

Does anybody have Dave's project sample? Unfortunately, this page is not available anymore:
http://ukauthor.esy.es/SkinMods/Default.htm

Thanks!

[NorthEast]

Apologies, it was on a site using free hosting which has now expired.

I'll look into getting the source project uploaded somewhere else.

[olgad]

Hello to everybody,
I implemented this wonderfull solution to my flare's tripane skin, for change the search box into the header in responsive.
I have 2 questions:
1- It's possible to change de icon input search for a button o link to perform the search when you press?

HomeResponsive.png

2. It's possible to change de filters search in responsive to search box in header (how in top navigation skin with this icon)[img]

filtersearch.png

[/img] ?

[img]

searchfilterresponsive.png

[/img]

Thank you very much. And sorry for my English!!

Could you please provide the part of code for the Search bar shown on the screen?

[NorthEast]

I've put the Skin Mods project up on Google Drive - download link:
https://drive.google.com/open?id=0B_RVo ... GhocjY0ZTA

[olgad]

I've put the Skin Mods project up on Google Drive - download link:
https://drive.google.com/open?id=0B_RVo ... GhocjY0ZTA

Thanks you so much, Dave!

[gsm1]

At present, the site offered is no longer accessible:

Free hosting has reached the end of its useful life
The website you're visiting was hosted on a free platform that has been turned off. If you're the owner of the website, log in to recover your site and get more information.

[NorthEast]

At present, the site offered is no longer accessible:

Free hosting has reached the end of its useful life
The website you're visiting was hosted on a free platform that has been turned off. If you're the owner of the website, log in to recover your site and get more information.

The previous post has a link to the project on my Google Drive - that's all that was on the old site.

[brent5WR]

It's nice and comprehensive guide, I should say.

[autocart]

Loading the output (Default.htm) in the browser from the local harddrive, the adjustments work as intended.
However, when I upload it to the web and load it via http://www.... then it does not work anymore. Same files.
What could be wrong? TIA

EDIT:
I found the problem. To explain it in line with the given example 2:
My css is named with all lower chars, like "customskin.css". However, I first coded wrongly, like:

Code: Select all

$('<link>')
	.appendTo($('head'))
	.attr({type: 'text/css', rel: 'stylesheet'})
	.attr('href', 'Content/Resources/Stylesheets/CustomSkin.css');

$('<link>')
	.appendTo($('head'))
	.attr({type: 'text/css', rel: 'stylesheet'})
	.attr('href', 'content/resources/stylesheets/customskin.css');

It worked also online, when I changed the code to:

Code: Select all

$('<link>')
	.appendTo($('head'))
	.attr({type: 'text/css', rel: 'stylesheet'})
	.attr('href', 'Content/Resources/Stylesheets/customskin.css');

$('<link>')
	.appendTo($('head'))
	.attr({type: 'text/css', rel: 'stylesheet'})
	.attr('href', 'content/resources/stylesheets/customskin.css');

[NorthEast]

I found the problem. To explain it in line with the given example 2:
My css is named with all lower chars, like "customskin.css".

Yep, presumably filenames on your web server are case sensitive, but Windows on your PC is not case sensitive.

In my example project, I included two versions of the link - the first is the actual case, the second is lower case.
The second version is only there in case someone selects Use lowercase filenames in the target.

[autocart]

I found the problem. To explain it in line with the given example 2:
My css is named with all lower chars, like "customskin.css".

Yep, presumably filenames on your web server are case sensitive, but Windows on your PC is not case sensitive.

In my example project, I included two versions of the link - the first is the actual case, the second is lower case.
The second version is only there in case someone selects Use lowercase filenames in the target.

One open question to that:
If the css file name itself did have capital letter in there, e.g. Skin.css or SKIN.css, (because in your example it is skin.css), would I then also make that file name all lower case in the second version, or just the path?