External CSS error on mozilla

[ledufe]

please, could someone tall my what am i doing wrong?

i used this code and the link to the external css is acessible

Code: [Select]

<LINK REL=Stylesheet HREF="http://%host%/hfs-css/hfs-default.css" TYPE="text/css" TITLE="HFS-Default">
and it works, at least on the IE, but on the firefox, it wont load the CSS on the page....
look at the screenshot

[TSG]

No screenshot?

This is what i use when making websites.
<link rel="stylesheet" type="text/css" href="style.css">

And this is one that SHOULD work for you... strange that Firefox has the error...
<link rel="stylesheet" type="text/css" href="http://%host%/hfs-css/hfs-default.css">

[rejetto]

don't use absolute URL, but relative

/hfs-css/etc

[ledufe]

No screenshot?

what? this screenshot is working...

[ledufe]

another test
and this one at least work

I created/extracted the css style part from the others templates of this forum, and saved it with the name of their respective templates
So the default hfs style is called hfs-default.css
And the clean template styles is called hfs-clean.css

So it was easy to get some cool css to use J
Now I got this folder on my hd, attention to the name of the folder that I drag and drop on the hfs root of the virtual file system

After drag it and drop to the hfs so I got this

And I open the hfs with the default template loaded and change this
On the first section of the template I selected this lines and deleted it

Code: [Select]

<style type="text/css">
%style%
</style>
And replace it with

Code: [Select]

<!--
var doAlerts=false;
function changeSheets(whichSheet){
  whichSheet=whichSheet-1;
  if(document.styleSheets){
    var c = document.styleSheets.length;
    if (doAlerts) alert('Change to Style '+(whichSheet+1));
    for(var i=0;i<c;i++){
      if(i!=whichSheet){
        document.styleSheets[i].disabled=true;
      }else{
        document.styleSheets[i].disabled=false;
      }
    }
  }
}
//-->
</script>

<LINK REL=Stylesheet HREF="/hfs-css/hfs-default.css" TYPE="text/css" TITLE="default">
<LINK REL=Stylesheet HREF="/hfs-css/hfs-black.css" TYPE="text/css" TITLE="black">
<LINK REL=Stylesheet HREF="/hfs-css/hfs-clean.css" TYPE="text/css" TITLE="clean">
<LINK REL=Stylesheet HREF="/hfs-css/hfs-macromedia.css" TYPE="text/css" TITLE="macromedia">
<LINK REL=Stylesheet HREF="/hfs-css/hfs-lightmusk.css" TYPE="text/css" TITLE="lightmusk">
Also delete these now useless lines

Code: [Select]

[style]
body, th { font-family:tahoma, verdana, arial, helvetica, sans; font-weight:normal; font-size:9pt; }
body { margin:0; background-color:#DDF; padding:10px; }
p { margin:0 }
a { text-decoration:none;  background-color:Transparent; color:#05F; }
a:visited { color:#55F; }
a:hover { background-color:#EEF; }
img { border-style:none }
td { font-size:10pt; background:#FFF; border:1px solid #BBF }
td img { vertical-align:top }
th, th a { color:#555; font-size:13pt; font-weight:bold; padding-bottom:0; }
#foldercomment { font-size:10pt; color:#888; background:#EEE; padding:3px; border:1px solid #DDD; border-bottom:3px solid #DDD; margin-top:2px; }
#tools { text-align:right; font-size: 8pt; }
#folder, .big { font-size:14pt; font-weight:bold;  }
#folderlabel, #folderstats, #footer { font-size: 8pt; }
#body {
  border-bottom: 4px solid #BBF;
  border-top: 4px solid #BBF;
  border-left: 1px dotted #BBF;
  border-right: 1px dotted #BBF;
  background:#F3F3FF;
  padding:15px;
  margin:15px;
}
.comment { font-size:7pt; color:#888; background:#EEE; padding:3px; border:1px solid #DDD; margin-top:2px; }
.button { float:right; padding:5px; padding-top:7px; margin:15px; border:2px solid black; background:white; font-size:8pt; font-weight:bold; }
.button img { vertical-align:text-bottom; }
.flag { font-weight:bold; font-size:8pt; background:white; color:red; text-align:center; border:1px solid red; }
And pasted this code on the template where do you want to let the user change the css file loaded

Code: [Select]

<a href="JavaScript:changeSheets(1)">Style default</a>
<a href="JavaScript:changeSheets(2)">Style black</a>
<a href="JavaScript:changeSheets(3)">Style clean</a>
<a href="JavaScript:changeSheets(4)">Style macromedia</a>
<a href="JavaScript:changeSheets(5)">Style lightmusk</a>
I guess that it should be compatible with all browsers

But be my guest improve the code…

Here is the zip file with the default template and all the files needed to make it work
And here are some sample images of it working on the internet explorer and opera, bu my firefox is breaked, so if anyone could test it ...
Thanks…
ie-default
Opera-default
Ie-back
Opera-black
Ie-clean
Opera-clean
Ie-macromedia
Opera-macromedia
Ie-lightmusk
Opera-lightmusk

this is a small thing , but it change the entire view type of the hfs...someone with skills on css could do aven more complex styles with this, and give the user the possibiliti to change the css since the template yet could not be changed remotely...


[attachment deleted by admin]

[ledufe]

maybe somebody can help me here....
please, could somebody tell me why this code does not work in HFS with mozilla firefox?
at least in my firefox.....
and 5 other pcs with firefox acessing my hfs, but the same code on the iis work....
am i missing something?

the code that i used to atach the external css style sheet

Code: [Select]

<LINK REL=Stylesheet HREF="/hfs-css/hfs-default.css" TYPE="text/css" TITLE="default">
please, if somebody knows , say, this error is boring me....

[rejetto]

try this:

<link rel="stylesheet" type="text/css" href="/hfs-css/hfs-default.css">

[ledufe]

hi rejetto, even doing as you said, this still don´t work, but i got a strange feeling that the error is on the hfs, or in the firefox... i am saying this, just becouse the same code on other browsers and on the apache or iis, works...
so.... this make any sense?

[rejetto]

open menu tools -> javascript console, and

Code: [Select]

Error: The stylesheet http://192.168.1.40/hfs-css/hfs-default.css was not loaded because its MIME type, "application/octet-stream", is not "text/css".
Source File: http://192.168.1.40/
Line: 0

I found your problem: you don't have MIME configured for CSS.
Indeed there is no MIME in the default configuration of HFS 2.0
It was introduced in 2.1 anyway.

[TSG]

I am trying to implement this in firefox, and i cant seem to get it working    i am getting this mime type error aswell, i am running hfs 2.1a, i tried to make my own mime type... with no luck... anyone know how to get this working?

EDIT: i have it working made my own MIME type.

for those that dont know how to do it, do as follows:

menu > other options > MIME types... then make a new one that is *.css     text/css, hit apply, then i found closing then re-opening HFS made it work.

[TSG]

Ok new problem, for some reason when surfing the pages the style seems to change... why is this...

Is it possible to get it to remember the style applied and then use it for the entire site, because i have had to implement the code in, active transfers page, uploads page and the main page.

It is based of an example i found on ledufe's hfs http://ledufe.no-ip.info:2222/hfs-js/JSChangeStyles/changestylesheets.html

[rejetto]

if it is javascript, you could put the js code in a file, and just link it from the pages in the template.

[TSG]

all in time lol, so far its all coming together, we havent worked out how to get it to stay the same yet using cookies, but so far the javascript isn't very large, so there isn't much point in the js file just yet. Below is the javascript to allow change of css. Flynsarmy modded it for me, to make it smaller.

       

Code: [Select]

        <link rel="stylesheet" href="/style_1.css" type="text/css">
<link rel="stylesheet" href="/style_2.css"  type="text/css">
<link rel="stylesheet" href="/style_3.css" type="text/css">
<link rel="stylesheet" href="/style_4.css" type="text/css">
<link rel="stylesheet" href="/style_1.css"  type="text/css">
<script language=javascript type="text/javascript">
function changeSheets(whichSheet){
if(document.styleSheets)
    for(var i=0;i<document.styleSheets.length;i++)
(i!=whichSheet-1)?document.styleSheets[i].disabled=true : document.styleSheets[i].disabled=false;
}
</script>

[ledufe]

hey guys, i am still getting the error on show the external css on the firefox, sometimes it work and sometimes dont...
i want to talk with others that are making a new template, and try somethings....

[TSG]

We have got the css sheets working in all browsers so far. and they change, we made a cookie code thing, and it stayed the same, but it wasnt very good, it glitched in places, it would be better if the page was php i think, but i know nothing about this.

Ledufe i would talk on msn, but its not letting me send msgs, have you done this to your hfs...

menu > other options > MIME types... then make a new one that is *.css     text/css, hit apply, then i found closing then re-opening HFS made it work.

This is the code we used... if anyone is interested...

Code: [Select]

<head>
<title>*** TITLE ***: %folder%</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="/style_1.css" type="text/css">
<link rel="stylesheet" href="/style_2.css" type="text/css">
<link rel="stylesheet" href="/style_3.css" type="text/css">
<link rel="stylesheet" href="/style_4.css" type="text/css">
<link rel="stylesheet" href="/style_1.css" type="text/css">

<script language=javascript type="text/javascript">
//name of cooke we're using
var name="TCOG";

function changeSheets(whichSheet){
if(document.styleSheets) {
    for(var i=0;i<document.styleSheets.length;i++) {
if (i!=whichSheet-1)
document.styleSheets[i].disabled=true;
else {
setCookie(i+1);
document.styleSheets[i].disabled=false;
}
}
}
}

// Function to remember the settings
function setCookie(value)
{
date = new Date();
date.setTime(date.getTime()+(24*24*60*60*1000));
document.cookie = name + "=" + escape(value) + "; expires=" + date.toGMTString();
}

// Function to get the settings of the user
function getCookie()
{
// cookies are separated by semicolons
var aCookie = document.cookie.split("; ");
for (var i=0; i < aCookie.length; i++) {
// a name/value pair (a crumb) is separated by an equal sign
var aCrumb = aCookie[i].split("=");
if (name == aCrumb[0])
return unescape(aCrumb[1]);
}

// a cookie with the requested name does not exist
return 1;
}
</script>
</head>
<body onload="changeSheets(getCookie());">
Problems with this code ands its use, upload section wont become same, same thing for active transfers, this cause they are seperate pages.