Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Adopt the CSS path in the js files of a responsive site
Okay, following scenario:
A client wants a adopt a static site to Textpattern. This site has a responsive design with separate css and js folders. The client wants to be able to edit the CSS in the Presentation tab (though this is sometimes not the best idea).
The actual config.js contains the path to the css files (prefix: 'css/style' with several css files in the referred css folder, as style.css, style-desktop.css, style-mobile.css etc.pp.), but changing this to prefix: 'css.php?n=style' does obviously not work (I assume as the CSS files in the css folder have a “.css” extension, but the reference to the CSS in the Presentation tab does not).
And replacing any occurrence of “.css” in the other Javascript files might not be the most intelligent way, I suspect.
Any hint for a good working solution?
Offline
Re: Adopt the CSS path in the js files of a responsive site
Would rvm_css be of help?
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Adopt the CSS path in the js files of a responsive site
In theory yes, but in practice less, I suppose.
The header looks actually as follows.
<link href="http://fonts.googleapis.com/css?family=Ubuntu+Condensed|Ubuntu" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/config.js"></script>
<script src="/js/skel.min.js"></script>
<script src="/js/skel-panels.min.js"></script>
<noscript>
<txp:css format="link" rel="stylesheet" name="skel-noscript" />
<txp:css format="link" rel="stylesheet" name="style" />
<txp:css format="link" rel="stylesheet" name="style-desktop" />
</noscript>
If I understand correctly the plug-in’s function, I would need to
- look at the site once with a non-script browser to take effect (pls simply assume that the txp:css command has been replaced with the plug-in command)
- script the css references twice (one with the js files, the second with the plug-in command, inserting the three lines with the no script command)
Also, in the latter case the responsiveness would be “off”.
Offline
Re: Adopt the CSS path in the js files of a responsive site
This is what I would do
- back up the css files in my comp and delete them from the server
- install the rvm_css plugin
- check that it works
- copy paste css files in txp’s css tab and giving them the same names as the original css ones
- replace the following code
<txp:css format="link" rel="stylesheet" name="skel-noscript" />
<txp:css format="link" rel="stylesheet" name="style" />
<txp:css format="link" rel="stylesheet" name="style-desktop" />with
<txp:rvm_css format="link" n="skel-noscript" format="link"/>
<txp:rvm_css format="link" n="style" format="link" />
<txp:rvm_css format="link" n="style-desktop" />6. check that all is working just fine
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
Re: Adopt the CSS path in the js files of a responsive site
Kossatsch wrote #289636:
If I understand correctly the plug-in’s function…
rvm_css allows you to edit CSS files in Presentation->Styles on the admin side, and it keeps a disk cache of the CSS in a nominated directory (/css by default) each time you save the Stylesheet. Thus the disk and database copies are kept in sync, as long as you continue to edit them from the admin side.
The <txp:rvm_css> tag reads the cached copies on disk instead of from the database so your Txp site incurs fewer database calls (arguably faster to render).
So you have two options after installing rvm_css and saving each existing CSS file from the admin side:
- Tell your static site to use Textpattern’s
/cssdirectory as the place it finds the CSS files. - (if on *nix) Set up your static site so the css directory there is a symlink to the Textpattern
/cssfolder.
As long as I’ve understood your requirements, that should do the trick. There’s always the possibility I’ve mis-interpreted your goal though…
The smd plugin menagerie — for when you need one more gribble of power from Textpattern. Bleeding-edge code available on GitHub.
Txp Builders – finely-crafted code, design and Txp
Offline
Re: Adopt the CSS path in the js files of a responsive site
Sorry, you misunderstood me, but you gave the decisive hint. It works, great.
Let me explain:
- the static site must be made a txp installation
- the js file above calls the css files directly from the server
- but the client wants to edit the css in the txp templates tab
Your comment disk and database copies are kept in sync helped me really.
My mistake: I had the plug-in installed, but saving had no effect as the static css files had been there already before. For this reason I thought I needed to trigger the css files first in some kind.
So this is what I do now:
- the plug-in has been installed and works without any modifcation (multisite installation, by the way, as this kind of installation sometimes does not work with all plug-ins)
- I leave the code as before (I could also replace txp:rss with txp:rvm_css, but finally this does not matter, as this code snippet is the fallback for non-script browsers)
Thanks Yiannis and Stef (eh. not Stephen), you made my day.
Last edited by Kossatsch (2015-04-01 13:11:43)
Offline