Customize Per Page responsive css?

[soxophoneplayer]

Using Responsive Sheffield Blue 2.0 modified up to work with zc 1.5.5e; many mods

I've customized a category listing page and created c_26.css file for my template css folder. This is on WAMP test site only. Changes I've made include adding a full body background image and changing font colors and such to play nice with that image. Using developer tool bar on firefox to look at the responsive renditions of my changes I can see: the large image isn't present except on large tablet horizontal (good - image not suited to small screen) but my font changes do seem to carry over to all responsive. In my particular case that results in white font over almost-white backgrounds (not nice). So - not sure why some styling carries over to responsive and some doesn't.

I've tried copy/paste/alter chunks from responsive_tablet and responsive_mobile into my custom category css to change either the font color or background color on only that category, to no avail.

Is there a way to create css files that will apply only to responsive category page in a similar way to the c_??.css vs stylesheet.css, or a way to add @media style info to my c_26.css that will apply only to responsive.

Quick solution would be to modify the tablet and mobile css globally using colors that will not conflict my custom category page - but I thought I'd ask about this first.

(I have read the css readme in the zc 1.5.5e css folder - I can see there how to change a specific page or change mobile/tablet but its not clear to me if I can do both - change a specific page css for mobile/tablet. I also don't know 'fer sure' if the firefox dev tool bar renditions are true to life renditions or just re-sizing.)

[Design75]

The responsive are loaded as last at the end of the "head" tag. Probably the changes you are making are overridden by these files, because your categorie specific file is loaded earlier in the process.

To overcome this you could try adding "!important" after the lines.
Like

.responsive {
  color: #000 !important;
}

[soxophoneplayer]

Thanks Design75 - that got me headed in right direction. There are somethings present in responsive_default that load last and supersede my C_26.css; in other things the latter prevails because nothing in subsequent loading sheets alter my changes, and indeed those changes apply to mobile/tablet views as well as desktop. Bit of a dog's breakfast hunting down the details.

In the end I put this in my custom category css:

@media (max-width:767px){ 
body {background: #c7a887 !important;}
}
@media (min-width:768px) and (max-width:979px){body {background: #c7a887 !important;}
}
@media (min-width:980px) and (max-width:1200px) {body {background: #c7a887 !important;}
}

That gave me a coloured background against my white fonts, and applied only to the customized category (and its products) page.

There was one little hickup (so far) with the mobile-Nav1 background color for the smallest screen - it is defined as almost white in responsive_default but is set as display:none everywhere else. My main site colours are defined elsewhere for that area but because I stripped them out on the custom page this nasty little line was kicking in. Editing that line did the trick. When my eyesight returns I'll try moving that entire line into my c_26 file.

[mc12345678]

Looks like in incorporation of the responsive template that equivalent responsive css overrides were not designed into the process...

[soxophoneplayer]

Looks like in incorporation of the responsive template that equivalent responsive css overrides were not designed into the process...

Ain't it the truth. I learned (well, mostly) early on that making even simple changes to a packaged template can be a nightmare, moreso since responsive became the new normal. As much as possible I try to stick with the template bones - I'll change the logo but I'll make the img the same size as package so the unseen padding and margins don't throw things askew, ever more likely to happen with responsive.

Lately I'm feeling adventurous and like going boldly where I've never gone before. I'm trying to build a completely different category page using only a single sharable css file. At the moment I'm not there - but close - there are a few spots where I can't get around the default responsive css files because they load last and override my custom changes.

[dbltoe]

One of the reasons we did the Color Changes Mod We recomment using it BUT use lat9's Clone a Template before you make any extra changes to the mod. Make it your own through cloning and the original will still be there as a backup/test.

[carlwhat]

...Lately I'm feeling adventurous and like going boldly where I've never gone before. I'm trying to build a completely different category page using only a single sharable css file. At the moment I'm not there - but close - there are a few spots where I can't get around the default responsive css files because they load last and override my custom changes.

css stands for cascading style sheets, and their load order can be complex.... (see: https://www.w3.org/TR/CSS/#css) there should be no reason why your custom changes do not override the templates default; unless of course some elements make use of the !important tag in the css.... which you should then change.

personally i am a BIG fan of putting of all my css changes in a separate css file and ensuring those take precedence over the default template stylesheets.

using the developer tools on browsers is a big help.

[mc12345678]

css stands for cascading style sheets, and their load order can be complex.... (see: https://www.w3.org/TR/CSS/#css) there should be no reason why your custom changes do not override the templates default; unless of course some elements make use of the !important tag in the css.... which you should then change.

personally i am a BIG fan of putting of all my css changes in a separate css file and ensuring those take precedence over the default template stylesheets.

using the developer tools on browsers is a big help.

The issue/problem is that the "templated" css files *do* load after the templates default, but then the responsive template css files load after those... Further, the changes being made are applicable to specific mobile, tablet or default and then within those potentially various resolutions. Therefore without additional code (some provided below), the ability to modify the content on one specific page for one specific type of device within a specific resolution is limited and nearly impossible.

I provide below an observer class that is expected to extend the builtin ZC functionality of CSS "overrides" into files prefixed with the applicable responsive_XXX_ filename where XXX is mobile, tablet, or default. This significantly expands the possibility of unique/individual modification, but can also lead to css mayhem if not reviewed and maintained with care.

To use this, add the following file named: auto.responsive_template_css_load.php to
includes/classes/observers
(final path)
includes/classes/observers/auto.responsive_template_css_load.php

<?php
/**
  * This observer written to work with core ZC 1.5.3 and above looks for the header end found in the includes/templates/YOUR_RESPONSIVE_TEMPLATE/common/html_header.php file
  *    and if applicable conditions are met to finally load the specifically identified responsive_XXX_CONDITION.css template override CSS file for the template style (XXX such as mobile, tablet, or default)
  *    that meets the desired override CONDITION such as used for standard templates.
  **/

class zcObserverResponsiveTemplateCssLoad extends base {
    function __construct() {
        $observe_me = array();
        $observe_me[] = 'NOTIFY_HTML_HEAD_END';
        $this->attach($this, $observe_me);
    }
    function updateNotifyHtmlHeadEnd(&$calling_class, $notifier, $current_page_base) {
        global $detect, $responsive_mobile, $responsive_tablet, $responsive_default, $sheets_array, $manufacturers_id, $tmp_products_id, $tmp_pagename, $ezpage_id, $tmp_cats;

/* $responsive_mobile = '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'responsive_mobile.css' . '" /><link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'jquery.mmenu.all.css' . '" />';
$responsive_tablet = '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'responsive_tablet.css' . '" /><link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'jquery.mmenu.all.css' . '" />';
$responsive_default = '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'responsive_default.css' . '" />';*/

        if (in_array($current_page_base,explode(",",'popup_image,popup_image_additional')) ) {
            $responsive_prefix = '';
        } else {
            echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . 'responsive.css' . '" />';
            if ( $detect->isMobile() && !$detect->isTablet() || $_SESSION['layoutType'] == 'mobile' ) {
                $responsive_prefix = 'responsive_mobile';
            } else if ( $detect->isTablet() || $_SESSION['layoutType'] == 'tablet' ){
                $responsive_prefix = 'responsive_tablet';
            } else if ( $_SESSION['layoutType'] == 'full' ) {
                $responsive_prefix = '';
            } else {
                $responsive_prefix = 'responsive_default';
            }
        }


        if (zen_not_null($responsive_prefix) && (isset($responsive_mobile) || isset($responsive_tablet) || isset($responsive_default))) {
            /**
             * load all template-specific stylesheets, named like "responsive_XXXX_style*.css", alphabetically where XXXX is the responsive template type (mobile, tablet or default)
             */
            $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^' . $responsive_prefix . '_style/', '.css');
            foreach($directory_array as $key=>$value) { // Updated for PHP 7.2 mc12345678 2017-06-29
                echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
            }
            /**
             * load responsive_xxxx stylesheets on a per-page/per-language/per-product/per-manufacturer/per-category basis. Concept by Juxi Zoza adapted by mc12345678.  Reuses the $sheets_array as defined in the common/header_php.php file which includes a slash prefix.  Could assign that array in here with/without the slash but then would need to maintain the list in both places, if the header file removes the front slash then the substr function below is unnecessary (replace substr($value, 1) with just $value). The substr function does not specifically address files with UTF-8 filenames.  That requires mb_substr and that "determination" to use that function has *not* been included below, but may need to be considered if the css file does not load after performing applicable validation that CSS files are "ready" to be loaded (clearing cache, cookies, etc...)
             */

            foreach($sheets_array as $key=>$value) { // Updated for PHP 7.2 mc12345678 2017-06-29
                //echo "<!--looking for: $value-->\n";
                $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/' . $responsive_prefix . '_' . substr($value, 1) . '.css';
                if (file_exists($perpagefile)) echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile .'" />'."\n";
            }

            /**
             *  custom category handling for a parent and all its children ... works for any responsive_xxx_c_XX_XX_children.css  where xxx is the responsive template type (mobile, tablet or default) and XX_XX is any parent category
             */
            $value = '';
            foreach($tmp_cats as $val) {
                $value .= $val;
                $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/' . $responsive_prefix . '_' . 'c_' . $value . '_children.css';
                if (file_exists($perpagefile)) echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile .'" />'."\n";
                $perpagefile = $template->get_template_dir('.css', DIR_WS_TEMPLATE, $current_page_base, 'css') . '/' . $responsive_prefix . '_' . $_SESSION['language'] . '_c_' . $value . '_children.css';
                if (file_exists($perpagefile)) echo '<link rel="stylesheet" type="text/css" href="' . $perpagefile .'" />'."\n";
                $value .= '_';
            }

            /**
             * load printer-friendly stylesheets -- named like "responsive_XXX_print*.css", alphabetically
             */
            $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^' . $responsive_prefix . '_' . 'print/', '.css');
            sort($directory_array);
            foreach ($directory_array as $key=>$value) { mc12345678 2017-06-29
                echo '<link rel="stylesheet" type="text/css" media="print" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />'."\n";
            }
        }
    }
}