Thoughts on the best method for using external CSS or JavaScript files?

Nick Sturdivant · August 2009

There is no doubt more than one answer to this question but here it is:

Something I've struggled with a bit in the past is determining exactly where and how to upload individual CSS and JavaScript files for use throughout a site (COM or CMS). When creating a page wrapper in COM, for example, you may specify additional <link> and <script> tags to reference external CSS and JavaScript files. The path is relative: "../css/..." and "../js/...," and that makes total sense, but how does one manage what is actually in those directories (add, remove, etc.)? Usually, I end up simply dropping a <style> tag within the wrapper's <head> tag...

The answer may be FTP access, but this would make iterative editing a painful process (constantly uploading and retesting). Under the COM document library there isn't a type available for CSS or JavaScript files, I don't think. Under the CMS, I do believe you may add a CSS or JavaScript file, say within the Assets folder, but I haven't attempted it.

What's the "best" way, if there is just one? Does it totally depend on whether you're working within CMS or COM?

Thanks!

Nick

Noah Cooper · August 2009

Nick,

FTP access really is the answer -- if you don't already have FTP credentials, you can get them from Convio Support. You're correct that this is not possible through the COM Document Library. Uploading into the assets folder on CMS has one problem -- on secure pages in COM, references to the non-secure CMS domain will cause browser security warnings. For wrappers that are to be used across both CMS and COM, it is probably best to use FTP.

Nick Sturdivant · August 2009

Cool, thank you!

dmartin · August 2009

Nick Sturdivant:
Cool, thank you!

For CSS styles, you can also create a reusable PageBuilder page that contains your styles within a <style> tag.

Then just insert that page via the S51 tag (ie. ]) into the header of the Page Wrapper. This actually inserts the styles into the head of every document though, rather than referencing an external stylesheet.

Nick Sturdivant · August 2009

dmartin :
For CSS styles, you can also create a reusable PageBuilder page that contains your styles within a <style> tag.

Then just insert that page via the S51 tag (ie. ]) into the header of the Page Wrapper. This actually inserts the styles into the head of every document though, rather than referencing an external stylesheet.

Well, that's still better than dropping a giant blob of styles in the wrapper (which may get dropped due to the whole design/source view switching issue); it would also prevent one from having to update various wrappers and instead update the one reusable page. Good thought.

James Zetlen · August 2009

One quirk of our FTP directory is its caching interval. Due to some of the systems we use to guarantee speedy page delivery, it can take up to 15 minutes for a change to an uploaded file to go "live". This doesn't happen with brand new files--there's no preexisting cache for them--but it can happen if you're doing development, and you're making frequent, incremental changes to your CSS or JS.

What we've learned to do at Convio is to use <style> and <script> tags during development, in reusable pages as you described. Those aren't subject to the caching interval. When development is complete and your style and script is finalized, you can then put it into linked files.

Erland Sanborn · December 2011

James Zetlen:
One quirk of our FTP directory is its caching interval. Due to some of the systems we use to guarantee speedy page delivery, it can take up to 15 minutes for a change to an uploaded file to go "live". This doesn't happen with brand new files--there's no preexisting cache for them--but it can happen if you're doing development, and you're making frequent, incremental changes to your CSS or JS.

What we've learned to do at Convio is to use <style> and <script> tags during development, in reusable pages as you described. Those aren't subject to the caching interval. When development is complete and your style and script is finalized, you can then put it into linked files.

Just to bring this thread back from the dead...Instead of resorting to reusable stylesheets and replacing them with absolute links after development, I use the random-number s-tag to defeat the serverside cache:

or

The nocache parameter is ignored, but provides a unique url to pass to the server, and I've noticed that it just about always serves up a fresh file.

Of course, caching is good, so you still have to remove that parameter once you're done, but I think it cuts a lot of time from the overall development process.

Noah Cooper · December 2011

Erland Sanborn:
Just to bring this thread back from the dead...Instead of resorting to reusable stylesheets and replacing them with absolute links after development, I use the random-number s-tag to defeat the serverside cache:

<link rel="stylesheet" href="ftp/path/to/whatever.css?nocache=]" />

or

<script type='text/javascript' src="ftp/path/to/script.js?nocache=]" />

The nocache parameter is ignored, but provides a unique url to pass to the server, and I've noticed that it just about always serves up a fresh file.

Of course, caching is good, so you still have to remove that parameter once you're done, but I think it cuts a lot of time from the overall development process.

To take that idea one step further ... with some advancements made semi-recently, it's possible to use a PageBuilder page to serve up content other than HTML, i.e. CSS. This is done using a U-Tag, U8, which sets the Content-Type response header. With this, you can use PageBuilder to create stylesheets! The advantage this provides is that since PageBuilder pages are run through Convio's templating engine, they can evaluate S-Tags and conditionals, allowing you to, for example, have a block in your stylesheet that is only rendered for TeamRaiser events.

To do this you'd create a PageBuilder page, let's call it wrapper_styles. This would be its content:

[[U8:text/css]]

body{

background:url(../images/bg.jpg);

}

#content{

margin:0 auto;

}

[[?x26x27x::x[[S334:app_id]]x::

/*TeamRaiser*/

.FormBox{

background:transparent;

}

::]]

Then in your page wrapper you'd have this in the <head>:

The pgwrap=n query string indicates the PageBuilder page's content should be rendered with no wrapper, and app_id=] simply passes the application ID of the requesting page to the stylesheet so it can be used in the conditional.

Erland Sanborn · December 2011

Noah Cooper:
To take that idea one step further ... with some advancements made semi-recently, it's possible to use a PageBuilder page to serve up content other than HTML, i.e. CSS. This is done using a U-Tag, U8, which sets the Content-Type response header. With this, you can use PageBuilder to create stylesheets! The advantage this provides is that since PageBuilder pages are run through Convio's templating engine, they can evaluate S-Tags and conditionals, allowing you to, for example, have a block in your stylesheet that is only rendered for TeamRaiser events.

To do this you'd create a PageBuilder page, let's call it wrapper_styles. This would be its content:

[[U8:text/css]]

body{

background:url(../images/bg.jpg);

}

#content{

margin:0 auto;

}

[[?x26x27x::x[[S334:app_id]]x::

/*TeamRaiser*/

.FormBox{

background:transparent;

}

::]]

Then in your page wrapper you'd have this in the <head>:

<link rel="stylesheet" type="text/css" href="SPageServer?pagename=wrapper_styles&pgwrap=n&app_id=[[S4]]&nocache=[[S55:1000,99999]]" />

The pgwrap=n query string indicates the PageBuilder page's content should be rendered with no wrapper, and app_id=] simply passes the application ID of the requesting page to the stylesheet so it can be used in the conditional.

Excellent!

This solves so many problems that haven't even come up yet. Thanks!

M OConnell · January 2016

I've officially exhumed this old thread due to something I've been trying to figure out and is in the same vein. Hello all!

Here's what i'm doing:

I have a secure Event page, with a pagebuilder page that calls in a CSS file through an S tag. Like this...

[[S51:BS_Min_336_CSS]]

Within that minified CSS file, there are references to a series of @Font-Families:

@font-face {

font-family: 'Glyphicons Halflings';

src: url('../fonts/glyphicons-halflings-regular.eot');

src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

}

My question is how do I mimic and securely serve these font file types -- since one can't fit these in the COM document library content types. I know for the SVG format, i can drop it straight into a pagebuilder file, but the other ones do not translate to HTML at all.

Since FTP is ruled out (as of 2009, how about 2016?) for secure files, i've been trying to dare this using the S tags. and content header declarations, but hitting console errors.

I'll leave it to the pros

Thanks in advance!

Erik Leaver · February 2016

I think your best bet is going to be to upload the font files directly into a ftp directory and then call them from there. That will allow you to serve them securely.

You can't upload files using sftp into Luminate, but you can serve files out of there securely.

Brian Mucha · February 2016

Just to elaborate a little.

FTP is just the method you use to get files to your instance's file directory. You would use FTP to create your fonts directory and upload your files, bypassing Luminate all together.

Once that is done, your @font-face code should work just as it is.

Thoughts on the best method for using external CSS or JavaScript files?

Comments

Categories