Adding a new CSS file instead of editing an existing CSS file - SMF 2.0

[ElectricSquid]

I'm looking for information on how to add and connect to a custom css file in SMF 2.0 (RC1.2 currently).

While producing the MyStatus Mod, there are a bunch of new css controls I need to add for the layout of it's pages. All these controls are positioning oriented so the mod will still be theme universal. So I want to use my own css file, and not add to an existing css file that will most likely be changed when a theme is used on a forum that this mod is installed to.

The problem I'm having is, as hard as I look, I am not able to find where some of the existing css files are being called from.

For example, post.css or who.css

Those css file exist, but I cannot find the file that calls on them.
Basically, that's what I need to know. Where do I add a link to these files?

I know it can be done in index.template.php, but if it can be done more elegantly, I would like to do it the cleanest way possible.

Thanks!!

[Arantor]

The cleanest way would be to add the <link> tag that calls for the stylesheet, and add that HTML inside $context['html_headers'].

Basically, just append your code to that array element (strictly append, not rewrite) somewhere in your action and it should be picked up by properly written themes.

[ElectricSquid]

The cleanest way would be to add the <link> tag that calls for the stylesheet, and add that HTML inside $context['html_headers'].

Basically, just append your code to that array element (strictly append, not rewrite) somewhere in your action and it should be picked up by properly written themes.

Can you be a little more specific?
Where is $context['html_headers'] located?
... and what exactly do you mean by...

(strictly append, not rewrite) somewhere in your action

[ElectricSquid]

I found this in Load.php
Is this what you are referring to?

Code Select Expand



// Do any style sheets first, cause we're easy with those.
if (!empty($style_sheets))
{
if (!is_array($style_sheets))
$style_sheets = array($style_sheets);

foreach ($style_sheets as $sheet)
{
$sheet_path = file_exists($settings['theme_dir']. '/css/' . $sheet . '.css') ? 'theme_url' : (file_exists($settings['default_theme_dir']. '/css/' . $sheet . '.css') ? 'default_theme_url' : '');
if ($sheet_path)
{
$context['html_headers'] .= "\n\t" . '<link rel="stylesheet" type="text/css" id="' . $sheet . '_css" href="' . $settings[$sheet_path] . '/css/' . $sheet . '.css" />';
if ($db_show_debug === true)
$context['debug']['sheets'][] = $sheet . '(' . basename($settings[$sheet_path]) . ')';
}
}
}




[ElectricSquid]

The cleanest way would be to add the <link> tag that calls for the stylesheet,

... and where am I adding this <link> tag?
What template?

[Antechinus]

Index.template.php, like this:

Code Select Expand

// The ?rc1 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?rc1" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style', $context['theme_variant'], '.css?rc1" />';

echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/print.css?rc1" media="print" />';

// IE7 needs some fixes for styles.
if ($context['browser']['is_ie7'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/ie7.css" />';
// ..and IE6!
elseif ($context['browser']['is_ie6'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/ie6.css" />
<script language="JavaScript" src="', $settings['theme_url'], '/scripts/topnav.js" type="text/JavaScript"></script>';
// Firefox - all versions - too!
elseif ($context['browser']['is_firefox'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/css/ff.css" />';

Just add another link rel with whatever conditionals you want.

[ElectricSquid]

I give a Tip of My Hat to the SMF core coder who designed such a slick way of connecting to a custom CSS file.

You guys were close, but here's the super slick way of making your custom CSS file AUTOMATICALLY hook up in SMF 2.0 ...

1) Name your CSS file the same name as your main function in your template file.
2) Drop your CSS file into the CSS folder found in the default theme folder.

Your done.
That's it.
No edit to any files.
SMF 2.0 is built to take whatever the main function name is in the template file, and look for it's css file (of the same name) in the css folder.

Example:

SomeMod.template.php
  function I_am_the_main_function()

CSS folder
  I_am_the_main_function.css

[Arantor]

If you had told me it was strictly for your custom action I would probably have suggested this, as it's used for the admin functions. However style invariably is used for more than just that and if any of it is used outside the custom pages (which, in fact, it often is) then it makes sense to make it more globally available.

To answer your previous question, $context['html_headers'] is an array element of the 'magical' $context, the one that gets global'd everywhere because at any given time it pretty much contains the state of SMF.

If you want to add custom stuff to <head>, there's the place to do it, e.g. custom Javascript for example.

I couldn't remember the syntax of <link> offhand and only had a limited amount of posting time earlier, but hoped you'd be able to see what I was referring to from index.template.php.

As for appending, I simply meant you must never:

Code Select Expand

$context['html_headers'] = whatever

This will destroy the existing contents. Instead:

Code Select Expand

$context['html_headers'] .= whatever

This will append the new items to the end of the existing.

[ElectricSquid]

As for appending, I simply meant you must never:

Code Select Expand

$context['html_headers'] = whatever

This will destroy the existing contents. Instead:

Code Select Expand

$context['html_headers'] .= whatever

This will append the new items to the end of the existing.

Is $context['html_headers'] .= whatever the same as $context['html_headers'][] = whatever?

So you guys can see the difference in what I'm asking, is .= the same as [] = in the question above?

[Arantor]

No, quite quite different.

You add [] at the end when you're adding a new array entry. $context['html_headers'] is a string meaning you have to append to the end of it like a string. $context itself is an array, $context['html_headers'] is not.

[SlammedDime]

wow... all so complicated for something oh so simple...

Say your stylesheet is called 'mystyle.css' and is located in the css directory... simply use the following code:

loadTemplate(false, 'mystyle');

[ElectricSquid]

wow... all so complicated for something oh so simple...

Say your stylesheet is called 'mystyle.css' and is located in the css directory... simply use the following code:

loadTemplate(false, 'mystyle');

Really?
Could it be that friggin easy

Boy, you just gave us all the smackdown.

So should  loadTemplate(false, 'mystyle'); be put in the Sources or Template file?

[SlammedDime]

Source file

[Arantor]

Perhaps, but you can also use my method for adding other stuff into the header such as inline Javascript should you need to.

[ElectricSquid]

I think it's great that we have all these ways posted here in one short topic.
I'm sure this will answer a lot of questions about this in the future, especially through site searches.

Great job guys
... and thank you very much!!

[ElectricSquid]

Thanks, that just came in handy

[sangwe11]

Both ways are good, and I prefer (for css thats only needed in custom pages) to use the loadTemplate('boo', 'css'); way.

However, if I'm creating a global mod, for example, one that provides a jquery floating bar, with tons of ajax features and stuff, I'd use Arantors method for both the CSS and javascript.

As to javascript in custom pages, I again, tend to use the other method Arantor suggested, which is appending the headers variable.

[Arantor]

As with everything, it all depends on what you're doing. Some of the stuff I posted will come in very handy with what I have in mind shortly...

[sangwe11]

As with everything, it all depends on what you're doing. Some of the stuff I posted will come in very handy with what I have in mind shortly...

Tell us more

[Arantor]

That would be telling...

Let's just say that when it's done it'll be in a class of its own, and if it does get approved (which I'm slightly hesitant about right now!) it'll be done by bending a rule or two.