Please upgrade here. These earlier versions are no longer being updated and have security issues.

load specific .css

This discussion is related to the Custom Pages addon.
jackmaessenjackmaessen ✭✭✭
edited February 2014 in Vanilla 2.0 - 2.8

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');
   } 
Tagged:

Comments

  • hgtonighthgtonight ∞ · New Moderator

    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;
          }  
        }
      }
    

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

    jackmaessen
  • jackmaessenjackmaessen ✭✭✭
    edited February 2014

    @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?

  • hgtonighthgtonight ∞ · New Moderator

    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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • 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

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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">

  • jackmaessenjackmaessen ✭✭✭
    edited February 2014

    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.

    vrijvlinder
  • hgtonighthgtonight ∞ · New Moderator

    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.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • 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;
    
  • edited January 2015

    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 ?

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

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    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');

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

    vrijvlinder
  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited January 2015

    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 ...

    peregrine
Sign In or Register to comment.