Example: Customising the HTML5 tripane skin

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
rogersm
Propeller Head
Posts: 97
Joined: Fri Nov 07, 2014 4:29 am

Re: Example: Customising the HTML5 tripane skin

Post by rogersm »

Hi Dave,

Great, thanks very much again.

mark
olgad
Propeller Head
Posts: 11
Joined: Tue Nov 04, 2014 9:14 am

Re: Example: Customising the HTML5 tripane skin

Post by 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
Propeller Head
Posts: 11
Joined: Tue Nov 04, 2014 9:14 am

Re: Example: Customising the HTML5 tripane skin

Post by 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
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Example: Customising the HTML5 tripane skin

Post by 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
Propeller Head
Posts: 11
Joined: Tue Nov 04, 2014 9:14 am

Re: Example: Customising the HTML5 tripane skin

Post by olgad »

Maria wrote: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
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Example: Customising the HTML5 tripane skin

Post by NorthEast »

I've put the Skin Mods project up on Google Drive - download link:
https://drive.google.com/open?id=0B_RVo ... GhocjY0ZTA
olgad
Propeller Head
Posts: 11
Joined: Tue Nov 04, 2014 9:14 am

Re: Example: Customising the HTML5 tripane skin

Post by olgad »

Dave Lee wrote: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
Propeller Head
Posts: 24
Joined: Wed Oct 05, 2016 4:46 pm

Re: Example: Customising the HTML5 tripane skin

Post by 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
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Example: Customising the HTML5 tripane skin

Post by NorthEast »

gsm1 wrote: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
Jr. Propeller Head
Posts: 2
Joined: Sat May 02, 2020 4:13 am

Re: Example: Customising the HTML5 tripane skin

Post by brent5WR »

It's nice and comprehensive guide, I should say.
autocart
Propeller Head
Posts: 36
Joined: Mon Oct 16, 2017 9:14 am

Re: Example: Customising the HTML5 tripane skin

Post by 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
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Example: Customising the HTML5 tripane skin

Post by NorthEast »

autocart wrote: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
Propeller Head
Posts: 36
Joined: Mon Oct 16, 2017 9:14 am

Re: Example: Customising the HTML5 tripane skin

Post by autocart »

Dave Lee wrote:
autocart wrote: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?
Post Reply