Welcome to Geeklog, Anonymous Monday, December 30 2024 @ 01:26 pm EST

Geeklog Forums

loading in separate css file


Status: offline

dwl

Forum User
Junior
Registered: 01/05/11
Posts: 25
Hello all,

I have a static page I am creating and it requires some custom css only for this page. Is there a simple method I can use to have a link to a separate css file that will only load when this static page is viewed? All I can think of is something static that would go into the header.thtml along with this block:

<!-- <meta http-equiv='Pragma' content=no-cache> -->
<link rel=stylesheet type='text/css' href='{css_url}' title='{theme}'>
{feed_url}
{rel_links}
{plg_headercode}
{advanced_editor}


I know the very simple answer would be to input my css in the css file associated with my theme but I'm thinking of now and in the future. Why have many definitions in a file that will only be called upon if a certain page is viewed? If the static page is deleted, then I have to plod through my main theme css file to clean it up.
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1470
Location:Canada
If you are using Geeklog 1.8.0 (latest release is currently rc2) then you could do this by the scripts class (same idea as your jQuery question). Set the staticpage to execute php and then add (make sure post mode is HTML Formatted)

Text Formatted Code

global $_SCRIPTS;
$_SCRIPTS->setCSSFile('test', '/test/style.css');
 ?>

Test css file


I tested the code on one of my sites and it worked fine.

The only time this may not work is if you are displaying the staticpage through an autotag since autotags are usually executed after COM_SiteHeader has been run (which is when the head of the webpage is generated).
One of the Geeklog Core Developers.
 Quote

Status: offline

::Ben

Forum User
Full Member
Registered: 01/14/05
Posts: 1569
Location:la rochelle, France
I know the very simple answer would be to input my css in the css file

You could also use the style tag in your page
Text Formatted Code

<div style="background:#663399; padding:20px;">
<h1 style="color:#FFFFFF;">My content</h1>
</div>


Ben
I'm available to customise your themes or plugins for your Geeklog CMS
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
You could also use the style tag in your page
<div style="background:#663399; padding:20px;">
<h1 style="color:#FFFFFF;">My content</h1>
</div>


Inline styles?
Bad Ben, Bad!

-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

::Ben

Forum User
Full Member
Registered: 01/14/05
Posts: 1569
Location:la rochelle, France
How bad? A little bad? Enormously bad? Bad habit? Smile

Could you please provide a clean solution for this static page ?

Ben
I'm available to customise your themes or plugins for your Geeklog CMS
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
In a modular CMS it is common to get frustrated and resort to inline styles and/or the use of !important to override site stylesheets.

From a plugin standpoint, making use of standard classes would be optimal. But also a plugin specific set of classes and its own stylesheet is also acceptable.
Hopefully the plugin author dynamically checks to see if the visitor is on a page that requires the stylesheet before inclusion <- I'm guilty of including mine statically :doh:

But for a single page like a staticpage, the use of your own classes and the <style /> tag would be best.

Inline styles contributed to a large amount of core code hacking for geeklog users in the past. Hopefully we are past that - Bad habits die hard.

-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1470
Location:Canada
Quote by: suprsidr

Hopefully the plugin author dynamically checks to see if the visitor is on a page that requires the stylesheet before inclusion <- I'm guilty of including mine statically :doh:




The one problem with this is when the plugin uses autotags. Autotags can be used in a lot of places now (template files, blocks, etc.). A lot of these things are generated AFTER COM_siteHeader is called which sets the css files. So if your plugin autotags needs css then you will have to set the css file all the time, since at the time the header code is set we do not know if it will be needed.

To get around this problem COM_siteHeader and COM_siteFooter should be one of the last few functions called before we display content in Geeklog itself or the plugins.

Tom
One of the Geeklog Core Developers.
 Quote

Status: offline

suprsidr

Forum User
Full Member
Registered: 12/29/04
Posts: 555
Location:Champaign, Illinois
To get around this problem COM_siteHeader and COM_siteFooter should be one of the last few functions called before we display content in Geeklog itself or the plugins.

I agree.

Which is why I've been stuck including my SS statically.

The use of pre-existing style classes are the best method.
Also if your page needs just a few, adding your styles to the bottom of the main SS is ok too. Just remember when you update Wink

-s
FlashYourWeb and Your Gallery with the E2 XML Media Player for Gallery2 - http://www.flashyourweb.com
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1470
Location:Canada
Quote by: Laugh

To get around this problem COM_siteHeader and COM_siteFooter should be one of the last few functions called before we display content in Geeklog itself or the plugins.

Tom



Just to update my own post, this statement is only true if the right blocks are not generated by COM_siteFooter (for some themes they are).
One of the Geeklog Core Developers.
 Quote

Status: offline

ivy

Forum User
Full Member
Registered: 11/25/04
Posts: 314
Location:Tokyo Japan
Geeklog function CUSTOM_templateSetVars() in lib-custom.css can add any theme var to header.thtml.
If you add staticpage id var to header.thtml bellow,
Text Formatted Code
$template->set_var( 'sp_id', $page );


then, you can change header.thtml bellow
Text Formatted Code
<body id="staticpage_{sp_id}">




Geeklog Japan https://www.geeklog.jp
 Quote

All times are EST. The time is now 01:26 pm.

  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content