(first posted: Sep 28, 2006)
(1374 Reads)
keywords: css tinymce
Permalink
Conditional user content via css
Specifically I have pages that need to contain different text depending whether the user is logged in or not. "Here's the benefits...Click here to Register" versus "Welcome, click here to do this"
I could have put all the content in a separate template for the page, with a big <xar:if> and <xar:else> around it. That's the worst scenario because I don't want my client messing with my templates. Beside we're not talking webmin-capable users here!
Or I could have defined 2 body fields on the object, one for the logged in user and one for the anonymous one. And then put a conditional in a separate template for the page.
Or, I could have just made 2 different pages, but then you need to put conditions in any links to those pages.
OK, so what's the trick???
In my pages/default.xt template (used by all pages on my site), in the <head> section I add the conditional code:
<style>
<xar:if condition="xarUserIsLoggedIn()">
.user-not-loggedin { display: none; }
<xar:else />
.user-is-loggedin { display: none; }
</xar:if>
</style>
Then, I create two styles in the css file used by TinyMCE wysiwyg editor (mine is named editor.css, and kept in mytheme/style/editor.css)
.user-is-loggedin {}
.user-not-loggedin {}
When TinyMCE is configured properly, these styles now appear in the styles dropdown list available to users.
A user can edit content as usual, but make a <p> or <div> or other element and give it a style of user-not-loggedin or user-is-loggedin. Then when the page displays, only the appropriate elements are visible.
Cool!
One drawback is that in fact both sets of content are actually in the page, if you view source, although only one set is displayed and visible to visitors.
There are no comments attached to this item.