load specific .css

jackmaessen

using 2.0.18.10 with Bootstrap theme and Custom Pages plugin

I want to load for some custom pages a different .css file

There should be a line like: "if page is index.php?p=/scripts or page is index.php?p=/develop --> load scripts.css; else load style.css"

How can i add such an if/else statement in the default.php of Custom Pages below:

public function PluginController_Page_Create(&$Sender) {
        // See what page was requested
        $Page = ArrayValue('0', $Sender->RequestArgs, 'default');
          $MasterView = ArrayValue('1', $Sender->RequestArgs, 'default');
              $MasterView = $MasterView != 'admin' ? 'default' : 'admin';
        $Path = PATH_PLUGINS . DS . 'CustomPages' . DS . 'pages' . DS;
        // If the page doesn't exist, roll back to the default
        if (!file_exists($Path.$Page.'.php'))
            $Page = 'default';

        // Use the default css if not viewing admin master
        if ($MasterView != 'admin') {
            $Sender->ClearCssFiles();
            $Sender->AddCssFile('style.css');
        } else {
            $Sender->AddSideMenu('plugin/page/default/admin');
        }
         $Sender->AddModule('GuestModule');
        $Sender->MasterView = $MasterView;
      $Sender->Render($Path.$Page.'.php');
   } 

hgtonight

Generally speaking, you want to use additive CSS. That is, you want to keep style.css loaded on all front-end pages. Here is what I would do.

In your theme hooks file, add a hook into the plugin controller, check that we are on the Page() method, then check which page is loaded, and add in the scripts.css file as appropriate.

Something like this:

  public function PluginController_Render_Before($Sender) {
    // Only execute on the Page method of the plugin controller
    if($Sender->RequestMethod == 'page') {

      // Only add scripts.css for certain pages
      $PageName = GetValue(0, $Sender->RequestArgs, 'default');

      // put any page names you want to load different CSS files in this switch case statement
      switch($PageName) {
        case 'scripts':
        case 'develop':
          // You will probably need to modify this path
          $Sender->AddCssFile('scripts.css');
          break;
        default:
          // Don't do anything to other pages
          break;
      }  
    }
  }

jackmaessen

@hgtonight:
For testing, i made a file custom.css with in it : body {display: none;}

So all the pages listening to custom.css should give me a blank page.

I put these lines into my class.bootstrapthemehooks.php:

///////////// load different .css for specific pages ///////////
    public function PluginController_Render_Before($Sender) {
    // Only execute on the Page method of the plugin controller
    if($Sender->RequestMethod == 'page') {
      // Only add custom.css for certain pages
      $PageName = GetValue(0, $Sender->RequestArgs, 'default');
      // put any page names you want to load different CSS files in this switch case statement
      switch($PageName) {
        case 'scripts':
        case 'develop':
          // You will probably need to modify this path
          $Sender->AddCssFile('themes/VanillaBootstrap/design/custom.css');
          break;
        default:
          // Don't do anything to other pages

          break;
      }  
    }
  }
    ///////////////////////////////////////////////////////////////

What happens: all the pages become blank...
So why are the other pages, which do not have a match in the switch cases, also listening to cutom.css?
What goes wrong?

hgtonight

Whenever you get a completely blank page, the absolute first thing to do is add $Configuration['Debug'] = TRUE; to your /conf/config.php file. Vanilla is designed to run in a production environment out of the box. As such, it tries to hide any information from recoverable errors from the end user.

If you still get a blank page after enabling debugging, you need to do some investigation yourself. Remove the display: none; declaration from your custom.css file and add this line right above the switch case block in your theme hooks file: decho($PageName);

If that doesn't tell you the proper page, paste the entire contents of your theme hooks file (pastebin.com is great) and we can work through it.

jackmaessen

Well, i put this line:

$Configuration['Debug'] = TRUE;

into my config.php and still get a blank page. Even when i deleted custom.css out of the root.
When i set to FALSE, all the pages load as normal.
This is my class.bootstrapthemehooks.php:

http://pastebin.com/FqE2nRek

vrijvlinder

You could also just add the css for that specific page in the custom page itself at the head of the page.

<?php $this->AddCssFile('themes/VanillaBootstrap/design/custom.css');?>

if the page is made as an html document you can add it to the page in the head section as a link like this.

<link rel="stylesheet" type="text/css" href="themes/VanillaBootstrap/design/custom.css" media="all">

jackmaessen

I found the problem! The solution of hgtonight is working perfectly! But what happend? I made a custom.css with this code:

.Panel.span4 { // complete side column dissappear
display: none;
}

I put this file in the same folder as where my style.css is.
I refreshed the browser and all the pages lost their left column.
Then i renamed cusom.css to custom123.css and the side column appears back on all the pages.
So, when the file is named "custom.css", in a strange way, it makes itself default. When changing the name, "style.css" is default again. I can't explain this strange behaviour but it happens.
After renaming custom.css to custom123.css, i put the code from hgtonight in class.bootstrapthemehooks.php and i found out that now only the pages in the swith case change their style and not the others anymore.
Anyway, thank you very much @hgtonight for this code and @vrijvlinder thankyou for thinking about a solution.

hgtonight

Glad you figured it out!

I honestly thought you were using custom.CSS as a placeholder name. Vanilla is designed to be overridden and custom.css and style.css are the names that are automatically loaded for themes.

jackmaessen

I have just one more question about this: is it also possible to load a different template if the page is "scripts" or "develop" ?

Something like:

switch($PageName) {
        case 'scripts':
        case 'develop':
          // You will probably need to modify this path
          $Sender->AddCssFile('themes/VanillaBootstrap/design/custom_scripts.css');
           // HERE LOAD DIFFERENT TEMPLATE (themes/VanillaBoootstrap/views/scripts.master.tpl)  
          break;
        default:
          // Don't do anything to other pages

          break;

neerlandsgezelschap

I tried applying this. Added case 'discussions' to the switch statement. Nothing happend.
Im trying to add this the the main page (the page visitors see when visiting my site) which is currently set the 'All categories'.

Here's my code:

///////////// load different .css for specific pages ///////////
    public function PluginController_Render_Before($Sender) {
    // Only execute on the Page method of the plugin controller
    if($Sender->RequestMethod == 'page') {
      // Only add custom.css for certain pages
      $PageName = GetValue(0, $Sender->RequestArgs, 'default');
      // put any page names you want to load different CSS files in this switch case statement
      switch($PageName) {
        case 'index':
          // You will probably need to modify this path
          $Sender->AddCssFile('custom.css', 'themes/themefile/design');
          break;
        default:
          // Don't do anything to other pages
          break;
      }  
    }
  }
    ///////////////////////////////////////////////////////////////

Something im doing wrong ?

neerlandsgezelschap

@vrijvlinder, maybe some insight into your solution. Im fairly new to this, the themehooks method doesnt seem to work for me.

vrijvlinder

I would approach this differently , not sure if it is the best. I would remove or add as necessary . On the page you want some other css remove the custom and add the new one.

$this->RemoveCssFile

$this->AddCssFile

Name the new css files something other than custom even if they are modified clones of the custom. As hg said, the custom.css gets called first and overrides the style.css on the rules that the custom.css has. I put cp.css for custom pages . You can use cp1.css etc for others.

$Sender->AddCssFile('cp.css', 'themes/themename/design/cp.css');

neerlandsgezelschap

@vrijvlinder, what about my pagename, how do i know what the pagename is ?

vrijvlinder

No you would add that to each page you make that you want this going on. In the master of the page you made.In the very top of each page

<?php if(!defined('APPLICATION')) die();

$this->AddCssFile('themes/Mytheme/design/cp1.css');
$this->RemoveCssFile('themes/Mytheme/design/custom.css');?>

This is assuming the mods to the original custom.css also contain the overrides for the style.css

If it does not then this whole thing would be best done as a plugin since the css of a plugin supersedes the custom.css as well as the style.css

But if the page is going to be static in other words nothing printed to the page, then just add the style sheet you want and remove the one you don't.

Look at helper_functions.php for what is available to pillage ...