Announcement

Collapse
No announcement yet.

Add other css files to the compressed actinic.css

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Add other css files to the compressed actinic.css

    Sellerdeck now has an excellent way of compressing the css, either manually adding the code:

    https://community.sellerdeck.com/for...ss-compression

    or using the widget

    https://community.sellerdeck.com/forum/knowledge-base/content-management/extensions/widgets/553015-widget-css-compression

    If you have other css files that you would like to add to the compressed actinic.css here is a way to do it.

    Firstly add the compression the the actinic stylesheet:

    The following code should be added at the very start of the stylesheet layout:

    Code:
    <actinic:block php="true">
    $sCSS = <<<'CSSDefinition'
    And the following code at the very end:

    Code:
    CSSDefinition;
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsCompressionEnabled%22%20%2f%3e">
    // Clean up CSS
    $sCSS = preg_replace('/\
    |\
    /', ' ', $sCSS); // eliminate newlines
    $sCSS = preg_replace('/\s+/', ' ', $sCSS); // convert all multiple tabs and spaces to a single space
    $sCSS = preg_replace('/\/\*.*?\*\//', '', $sCSS); // remove all comments
    $sCSS = preg_replace('/\s*(\{|\}|:|;|,|>|\/)\s*/', '${1}', $sCSS); // eliminate spaces either side of { } : ; , > /
    $sCSS = preg_replace('/([^0-9])0px/', '${1}0', $sCSS); // convert 0px to 0
    $sCSS = preg_replace('/^\s*/', '', $sCSS); // remove spaces remaining at start of CSS
    $sCSS = preg_replace('/([^\'])#([0-9a-fA-F])\2([0-9a-fA-F])\3([0-9a-fA-F])\4/', '${1}#${2}${3}${4}', $sCSS); // convert colours like #aabbcc to #abc
    $sCSS = preg_replace('/(padding|margin):([0-9]+(?:px|%)+) \2;/', '${1}:${2};', $sCSS); // convert margin:0 0; to margin:0;
    $sCSS = preg_replace('/(padding|margin):([0-9]+(?:px|%)+) \2 \2 \2;/', '${1}:${2};', $sCSS); // convert margin:0 0 0 0; to margin:0;
    $sCSS = str_replace(' !important', '!important', $sCSS); // remove space before !important
    $sCSS = str_replace(';}', '}', $sCSS); // get rid of trailing ; in rules
    </actinic:block>
    echo $sCSS;
    </actinic:block>
    Then make a couple of new lines before the second instance of CSSDefinition; and add the following:

    Code:
    <actinic:block php="true">
    array_map( function ($a) { return include($a); }, array('xx.css','yy.css','zz.css'));
    </actinic:block>
    where 'xx.css','yy.css' and 'zz.css' are your other css files.

    It didn't seem logical to have a 'php block' within a 'php block' but it needs this to work

    I am assuming you will need to add the following expression to the bottom of the outer layout to get the css files added to the snapshot, perhaps someone can correct me if I am wrong?

    Code:
    <script>
    // src="xx.css" // - adds file to snapshot
    // src="yy.css" // - adds file to snapshot
    // src="zz.css" // - adds file to snapshot
    </script>
    PS: In the KB article on manually adding the css compression the PHP tag
    Code:
    <actinic:block php="true">
    is omitted from the beginning and
    Code:
    echo $sCSS;
    </actinic:block>
    is omitted from the end
    and it won't work without them.
    https://community.sellerdeck.com/forum/knowledge-base/content-management/extensions/widgets/553015-widget-css-compression

    Click image for larger version

Name:	nophptags.jpg
Views:	39
Size:	72.8 KB
ID:	554394


    Thank you
    Jonathan Chappell
    Website Designer
    SellerDeck Website Designer
    Actinic to SellerDeck upgrades
    Graphicz Limited - www.graphicz.co.uk
Working...
X