I was wondering if you can change your style while lifetime?!
Example: Administrtor loggs into the app, chooses interface settings and finally changes the color of the overall header
That would be a nice component to do so: link
So is that possible? And can you give me a little hint how to do that :-)
Thank's
I had done this by having multiple css classes predefined and then on the back-end had a variable containing the current class in use.
You can then with an interface or some parameters, or user settings, etc, choose a class to give to the variable.
In my jsp page the code was something like this:
<div class="#{logEntry.styleClass}">
and the backend variable "styleClass" was of type String.
Related
I'm redesigning the templates for our online store (Using Castle Monorail with the NVelocity view engine) but want to provide the old layout to certain users.
I've started out adding a variable to the PropertyBag that determines the version the user should get and set the layout to 'BaseLayout.vm' which looks like this:
#if($StoreVersion == 2)
#parse("VersionTwo/DefaultLayout.vm")
#else
#parse('VersionOne/DefaultLayout.vm')
#end
This works OK for the layout and I can technically use this approach in every template file, but this seems a bit long winded. Is there a better way I can mechanize this?
Instead of having a layout that "forwards" conditionally to other layouts, you can put the condition in code and set the LayoutName property in the controller.
I would crate a controller filter and override the layout name to be rendered based to your logic
I have a dynamic PHP stylesheet, but I can't find a way to send variables to it so I used sessions instead. Figured this kinda sucked, so I'm going to give it another try but could need some help. It's an external stylesheet where a variable has effect through the whole document.
You probably want to use an embedded stylesheet (a <style> block) in the page: it increases the size of the main page, but solves the variable access issue without needing sessions and reduces your number of requests. You can just load your dynamic stylesheet into the main page's view using load->view.
EDIT: Ah, massive amounts of CSS would be one problem. Well, two alternatives are to:
Turn on the $_GET support in your CI install, you COULD pass in a request parameter in the CSS link and then check for the request parameter in the PHP controller or view file that generates the actual CSS. Not visually the tidiest option, but it does work.
Put in a cookie that you check in the controller that gets called for the CSS: you can then check that in the controller or view and do the right thing. Visually much tidier than the request parameter option, but a bit more involved.
EDIT: Would it be more elegant to tweak the GUI using CSS, or some other way?
Is there any good documentation (the official one only shows a basic example) for this tag?
I want to use it like this:
<s:decorate template="template.xhtml">
....richfaces UI...
</s:decorate>
in order to format a list of question-answer pairs without using rich tables or nested panels.
I get the gist of what it does, but I don't understand exactly how I can edit my own template.xhtml files and make the UI look as I want by using it.
The s:decorate is basically the same as ui:decorate with some extra functionality like rendered
The ui:decorate can be explained as:
The UI Decorate tag is a templating
tag that decorates content included
from another Facelet. Any content
outside of the UI Decorate tag will be
displayed by the Facelets view
handler. Any content within the
decorate tag will be passed to the
associated template as parameters or
simply ignored. You can use nested
ui:define tags to pass named content
to the associated template. See
ui:insert for more information.
For more info you can read here and here
To answer your update question. You should also use CSS to style the content of your template
A web designer has created a design for our Drupal web site which requires a different color scheme for various sections of the site. Drupal does not support this design requirement by default.
Currently I am using JavaScript to change the color scheme based on the page title. After adding some content pages I now realize that this is a terrible way of doing things. I need some ideas for a better way of changing the color scheme depending upon the content.
Is there a way to apply a different theme to a page based on its node value? I could create a slight variation of my theme for each color scheme, although that makes theme maintenance more difficult.
I've also thought about using CCK to add a field to my page content type and then changing the color scheme based on that custom field. This would eliminate the need to add code to my JavaScript for every new page.
Or is there a module for changing color schemes per page?
You might want to take a look at the ThemeKey module, which allows you to determine which theme is used based on conditions like node type or path.
You could add some css in hook_preprocess_page function based on node or other criteria and add the css in the page template as embedded styles.
The idea will be the same as doing it in JavaScript, but you will have php, drupal etc available to do what you need. It should be a lot easier since you can test the node type, or a value you set on the node object.
The CSS module does node-specific CSS, so you could use that to adjust colors.
I would suggest implementing hook_preprocess_page in your theme, and applying a body class based on the node type (or types) being displayed. Or, potentially, put these classes in the node's preprocess for display. So, for instance, if you're viewing a 'project' node, put:
<body class="... node-type-project">...
Then the designer can target styles based on which classes the body has. This is fairly easy to automate, just do a "node-type-". strreplace("_", "-", $node->type) to change any future node type into a class, which you then feed into either the body or the node.
Hey, anyone have any idea what the best way to allow users to save custom css would be? Specifically, there are about 4 color values that I would like to allow a user to choose and these colors would be used to create a custom theme for the user. I'm thinking save values in the database and then using dom:loaded with prototype to set the custom style values but I'm wondering if theres a faster way? Like dynamically creating css files or something?
and then using dom:loaded with prototype
Awww, don't do that! That won't work when JavaScript is turned off.
Approach 1: Static stylesheet, dynamic values in document head
For the sake of not having to work with a dynamically created style sheet, have a separate, static CSS file with all the definitions that won't change.
<link rel="stylesheet" href="styles/static.css" type="text/css">
<!-- Or whatever you name it -->
All the definitions that will change, you could put into the head of the HTML document, fetching the user-changeable values from a database.
<style type="text/css">
.classname { font-size: (fontsize); } <-- Insert dynamic value here
.classname { color: (color); } <-- Insert dynamic value here
....
<style>
that way, the majority of the CSS stays in static, cacheable files, while the dynamic part won't cause another HTTP request.
Approach 2: Dynamic stylesheet
If you have a lot of dynamically changing values, put the entire style sheet into a script file and output it, replacing placeholders with the values from the database.
The downside to this is that to force the browser to reload the style sheet on changes, you'll have to work with a version approach stylesheet.css?version=400 which is pretty complex to do, but can sometimes be more desirable than littering the head section with CSS.
You decide which approach suits your situation better. I find myself choosing the first one most often.
I would save the 4 values in the database and then create a css file from those values. You would want to make sure and cache the created css file for each user so you don't have to dynamically create it each page view.
Creating a custom css file adds another request the browser has to make so you would need to make sure your setting up the headers correctly to cache it. If the user does change their settings you would need do something to ensure the browser immediately stops cashing the old css file and loads the new file. One way to do this is to change the url of the css file.
Example:
/usercustom.css?version=(last saved date hash)
Instead I would use your first approach and create a JSON array that you inject into the page and then you use your javascript framework to load and use the array to style the page.
You could also store the color values in the cookie from the server and use and or write to them on the client.
I think that best way is to save it to Db, because you don't want to allow user to mess with your website. At least if some pages are public.
And I personally think that answers like "do it without JavaScript" is nothing but old school BS... Did they tried to turn of JavaScript today? I don't think so... And by this paragraph I don't mean that you have to do it using JavaScript. Do it in a way that suits your needs 🤔
Wish you nice Day