best place to link external stylesheet - html validation error

Applications Menu / Menu Tree
, , ,
#1

Hi

I love Font Awesome - http://fortawesome.github.io/Font-Awesome/icons/ - as you can see here http://development.mitsm.de/EduMS/mITSM_Education_Management_System/# in my menu

normaly the referenz schoul be placed in the header section

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

since i don’t now how to modify the header section i placed it in the hedaer section of the menu - it works but …

Line 41 Column: 1
Error: Tag link not allowed here.
Error Position: <link rel=“stylesheet” href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/cs

is ther a way in SC to place it in the page header?

according to http://www.validome.org/validate/?uri=http://development.mitsm.de/EduMS/mITSM_Education_Management_System/%23 there are many more errors.

any hints here?

Thanks & Happy eastern,
rob

#2

Not too sure about all the other stuff but aren’t you missing the [type=“text/css”] attribute in your link-tag? Been a long time since i actually done proper webdevelopment like that but far as I can recall you need the type attribute…

Far as the problem goes, the error you put in the quote seems to show that the link-tag is cut-off, but I’m assuming that’s just a copy-pasting error.

Oh and after some googling I stumbled upon this:


<style>@import url(/styles/mystylesheet.css);</style>

Adding it on runtime does however make it so it might do a first render without the stylesheet then when it’s imported do a second render with it rather noticable if a user has poor connectivity. Although on that front I’m uncertain whether you might have the same problem with what you’re doing atm.

EDIT:
Oh and happy easter to you too!

#3

[QUOTE=mITSM;35208]is ther a way in SC to place it in the page header?
[/QUOTE]

I suspect making a copy of the template your page is using, placing this in the header template and using that template in your menu app is worth a try.

#4

@scriptcaser
i would have to do this in linux via command prompt? - sorry totally new to SC -

@ hoihoi661 - thanks - that is what “they” tell me to do , and i think they should now it - hopefully -

Paste the following code into the <head> section of your site’s HTML.
<link rel=“stylesheet” href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

from http://fortawesome.github.io/Font-Awesome/get-started/

#5

[QUOTE=mITSM;35219]@scriptcaser
i wolud have to do this in linux via command prompt? - sorry totally new to SC -

[/QUOTE]
No.

In your app config, Menu ==> Layout ==> Visual Settings will show you the header template your menu app is currently using.

Then from main menu, Layout ==> HTML templates will allow you do what I enumerated.

#6

put it in onApplicationInit of the menu

#7

eventually I made myself not clear enough.

Is ther a way do modify the <head> section of the HTML OUTPUT - all the solutions above have the result that the

<link rel=“stylesheet” href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">;

is in the body section - AND ist only valid for teh “one” application not for ALL
Thanks in advanced

html_header.PNG

#8

@ scriptcaser - thanks for your solution - that is how i do it , but then it is in the <body> part of the html-output but I need to have it in the header

@gerd I tried “include <link rel=“stylesheet” href=”//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">;" but no result at all - blnak page AND i guess it woul also be in the <body> part

#9

rob,
attached a sample source , put it in a menu-onApplicationInit.

The result will be this: http://www.ecasan.de/live_test/gs_fr/mITSM/

Gerd

mITSM.txt (1.22 KB)

#10

hi Gerd

thank you - getting closer but the link is still in the body-section not in the header -

cu rob

html_header_II.PNG

#11

Rob,
Did you ever solve this? I have the same need.
Ed

#12

I never tried it, but jquery can add stuff to the head element:

$(‘head’).append(’<link />’);

#13

Hi there! I know it’s an old question, but for anyone trying this, as for version 9 of scriptcase (2019), you can put code inside the <head> tag of the HTML if you run the code in the event "onScript Init.

The documentation exemplifies this with the incorporation of libraries

https://www.scriptcase.net/docs/en_us/v9/manual/07-tools/05-external-libraries/#importing-libraries-into-the-applications