External .CSS with Storyline Output?

Oct 03, 2012

Hi all,

Does anyone know of a way to use an external .CSS file with a Storyline Output? Much appreciated.

1 Reply
Robert Stewart

You can edit the story.html master file in the Program Files\Articulate\Articulate Storyline\Content folder

or manually add your external css link in the header section each time you publish

or use the following vbs script file I created below (USE IT AT YOUR OWN RISK).

  1. The code below uses regex to replace the complete style tag in story.html.
  2. It then copy a custom background jpg file into the published folder.
  3. It then adds a flash strMode to transparent to the story.js file (WARNING! - remove it if not needed).

The end result is a rounded corner player with a backgound image on the page.

myStyles.css external css file:

body {
  margin: 0px;
  background: black url('background.jpg') repeat;
  color: white;
}
object, embed {
  padding: 0px;
  width: 980px;
  height: 550px;
  background-color: black;
  border: 2px #555 solid;
  outline: none;
  -webkit-border-radius: 44px;
  border-radius: 44px;
}

----------- start of newStyles.vbs  below------------

--- I just noticed that the regex pattern gets removed using my first post

--- here it is again below

--- "<style[^>]*>([\S\s]*?)</style>"

''third Inputbox parameter would be the file name.
ret=InputBox("Enter Directory Name of Publication","Storyline Pub Directory","Service-Advisor-Module1")
publishDir = ret & "\"  '' replace with the name of the generated publication folder
storyHTML = publishDir & "story.html"
indexHTML = publishDir & "index.html"  '' name of your new starting page file. Do not use index.html if you already have one, as it will over-write it.
myCSS = "myStyles.CSS"                 '' make an external css file.
backgroundFile = "background.jpg"      '' name of your background image.

''TEST IT FIRST!!! change testFirst value to false only when you're ready to commit!! READ ON.
reply = MsgBox("Click Yes to run, No to test",3)

select case reply
  case 2 'cancel
    Wscript.Quit
  case 6 'yes
    testFirst = false
  case 7 'no
    testFirst = true
end select

'' WHAT IT DOES:
''
'' opens story.html as a read only file. copy the content to the new file (index.html in this case).
'' Uses regEx to replace the entire <style> </style> section. Then Saves the new file.
'' Use at own risk. You should know vbScript before using this!
'' Finaly, it copies the background image into the publishing folder.
''
'' In this example I also used css3 rounded corners on the player by manually adding:
'' strWMode = "transparent";
'' to the generated story.js file - just above the line (// Whether or not we are loaded by an LMS) line 60 something in my js file.
'' Note: There's a Firefox bug where an object tag doesn't get a width or height. However it is hidden by the embed object.

Const ForReading = 1
Const ForWriting = 2

Set objFSO = CreateObject("Scripting.FileSystemObject")
Set objFile = objFSO.OpenTextFile(storyHTML, ForReading)
oldHTML = objFile.ReadAll
objFile.Close

Set objCSS = objFSO.OpenTextFile(myCSS, ForReading)
myCSS = objCSS.ReadAll
objCSS.Close

Set regEx = New RegExp   ' Create a regular expression.
regEx.Pattern = "<style[^>]*>([\S\s]*?)</style>" '' Set pattern to replace entire style section. 
regEx.IgnoreCase = False  ' Set case insensitivity.
regEx.Global = False   ' Set global applicability.

result = regEx.Replace(oldHTML, vbcrlf & "<style type=" & chr(34) & "text/css" & chr(34) & ">" & vbcrlf & myCSS & vbcrlf & "</style>" & vbcrlf)

if testFirst = false then
  Set objFile = objFSO.OpenTextFile(indexHTML, ForWriting, -1)
  objFile.WriteLine result
  objFile.Close
  objFSO.CopyFile backgroundFile, publishDir & backgroundFile
  msgbox("Finished, background.jpg and index.html are now in Published Folder")
 else
   msgbox(result)
 end if
 
 ''''''' change Flash strMode to transparent in story.js file ''''''''''''''''''''
if testFirst = false then
  publishDir = ret & "\story_content\"  '' replace with the name of the generated publication folder
  StoryJS = publishDir & "story.js"
  StoryOLD = publishDir & "StoryOLD.js"  ''save original just in case.
  
  Set objFSO = CreateObject("Scripting.FileSystemObject")
  Set objFile = objFSO.OpenTextFile(StoryJS, ForReading)
  content = objFile.ReadAll
  objFile.Close

  result = Replace(content,"// Whether or not we are loaded by an LMS","  strWMode = " & chr(34) & "transparent" & chr(34) & "; // I added this line" & vbcrlf)

  dirPath = objFSO.GetAbsolutePathName(".")
  story_content_Folder = dirpath & "\"
  objFSO.CopyFile story_content_Folder & StoryJS, story_content_Folder & StoryOLD 'make a copy oldStory.js
 
  Set objFile = objFSO.OpenTextFile(StoryJS, ForWriting, -1)
  objFile.WriteLine result
  objFile.Close
  '''msgbox("Finished, story.js")
end if

Wscript.Quit
 

This discussion is closed. You can start a new discussion or contact Articulate Support.