I would like the user to have limited access to controlling certain CSS attributes of divs. The divs would all be similar, all have a some class name, and be displayed across the site with the styling rule of the user. So kind of like a user CSS stylesheet, except with certain rules that they can change.
Allow change to:
.className{
font:all attributes;
all four borders:all attributes;
float:cannot change;
}
Would the best way to be to store these in a database? Store the color, border width, etc in a MySQL database? Seems like a lot, with all of the information.
Allowing the user to have their own CSS document is risky, and I do not want them to be able to change the layout. I want to make this a part of my site, one anyone can use with no knowledge of CSS. I would like for them to have their choice of styles; like letting them have their own theme on a Drupal site, but make the changes easy to make for anyone (like have a list of pre-defined or something). But also they must have full control if they want, of the attributes I allow them to change.
Would preprocessing this information from a database and putting it in a style tag be inefficient? Seems like a lot of queries unless it was all in one query.
You should check out the jQuery UI ThemeRoller script, it uses a number of fields which are passed via the URL. Click on any of the themes on the left and see what happens to the URL.
You could easily replicate it to fit your needs, and instead save those values in a database. You could use the same naming convention too, if you like.
I think it's a great place to start.
To have your users able to generate and preview the styles dynamically, they must be parsed with Javascript (or server side to get tricky). Either way, you have to get a CSS rule out of it somehow, so you might as well do it before you throw it into the database. You're doing what you were going to do anyway, but saving yourself the trouble of making a big table.
Related
So. I'm a CSS amateur, and I'm dealing with an issue a bit above my experience.
Basically: we have a site with a third-party vendor. We cannot modify their stylesheet. I've been told we cannot forward the URL. We cannot unpublish the without deleting it, which is not an option. We cannot upload our own stylesheet. We cannot edit the page HTML beyond a small window. And we need to disable the the site-- specifically, login functions-- so users can't use it, and provide them a link to the new site.
tldr; If this sounds backwards and convoluted, please understand I'm just doing my best to work with a third-party that doesn't really have a lot of flexibility.
So far, I've done this by identifying the styles they have, and writing my own css to disable them (just setting everything to height:0px width:0px overflow:hidden has worked pretty okay) and inputting that into the text/html field they let me edit. Which, honestly, seems kind of like a design flaw that I can break any page as badly as I'm doing, but what do I know...
Problem: they have a login form in a table. No div or class associated with it. With no class/id, I can't style it through css. Styling "table" to height:0px, width:0px just, uh, blanks the whole page.
So, my question: how do I style a table with no class/id in CSS alone with no ability to add a tag to it?
And yes. I know what I'm doing is probably giving everyone reading it an aneurysm. I'm sorry for my CSS crimes.
You can target the said form trough some parent which will work until they either reposition the table outside that parent or fuck with something you used to target the parent.
To be more specific I need a HTML structure of the said page.
But generally let's say you find a parent with a class Parent and this is the only form (otherwise you have to say nth child of type form) inside that parent you can use .Parent>form { your CSS code}
This should expand options for you. Ideally find a parent somewhere that has id and hope its unique for site.
NOTE: Be very afraid when you target things like this, if you can't bind that to either that specific page or specific unique-for-site id parent, you risk somewhere being the one or multiple other match for your CSS selector, and since in most cases (unless you use CSS loader or have separate indexes including separate CSS files) you share same CSS to entire web page it will change them as well.
NOTE: Be even more afraid if you use CSS outside of it's domain - STYLING especcialy for security things, like giving access. This is a serious security violation if you only hide login elements. Anyone with a bit of knowledge can read the code and hide it on client and login. At least don't load then into DOM using display:none; instead visibility: hidden;
I want to implement a simple feature into my node.js/express app that allows the users (registered and nonregistered) to quickly change some settings in the CSS theme.
Is there a way of implementing it in a way that I don't have to record the user's preference into the db, instead the app just remembers the preference of the current browsing session and shows a different CSS theme depending on what the user selected.
And I need these styles to not be in a separate CSS file, but some kind of adjustment to the existing ones.
What would be the best way to implement it?
I thought about adding a few style modifications in a separate CSS file and then when the user selects a different theme, recording it as the current preference and loading that additional css for those users.
Do you think it's a good way or there's a more efficient one?
Look into LocalStorage (available in just about every modern browser) for storing the preference, or instead store the preference in a non-expiring cookie. The first approach is best if your preferences are complex (like overriding individual elements) and the second if they're simpler (like just one file override).
As for the updated CSS, don't modify existing files. Use the cascading nature of the language, which is built for overrides. In other words, inline the changed CSS into your html. It will usually take precedence over separate CSS files unless individual rule weights are different for some reason (like more specific selectors, which increase rule weight/priority).
I'm very new to Kentico and asp, I'm coming from a php/Wordpress background into this. I'm working on a Page Template that has an optional Carousel in it. I'll need the content of the carousel which I have set as a Document Type, but I'd also like to be able to have a Settings Document type in which they are contained. In the Settings Document Type I want to be able to control what kind of wrapper goes around the whole thing, using a form to do this. I've played around with Hierarchical Transformations, but can't seem to get them to work. At best, I'm able to display markup from the transformation, but the variables set in the Settings Form won't to come through.
Does anyone have any idea as to the best way to get this to work the way I want it to, or is this even possible? I only have access to the CMS and have no access to the file structure or anything like that. I've looked through pages of Kentico documentation, but it seems vague and I can't seem to find any examples of anything close to what I want to achieve.
Update: I've finally somewhat figured out how to make this work with Hierarchical Transformations, but I'm still having an issue with the Opening and Closing Wrappers which I set as Header and Footer Transformations. For some reason these tags appear twice, one within the other. The outer one does exactly what it's supposed to do, but the inner one doesn't take the variables set within the form. Anyone have any idea how I can just display this once?
I would like to have user customizable look and feel options on a website. I envision an interface for selecting background and text colors, images, fonts, etc.. I'm just not sure what the best way to store and use the information is. I plan on storing all options in a database table tied to the user.
Is there a good way to dynamically generate css for each user? Is it better to generate the css as they make changes and just store it, or to regenerate it for each page view? Are there established patterns for doing this kind of thing?
Separate out the parts of the CSS that are customisable from the parts that are static. That way you can still serve most of the CSS as you normally would.
Dynamically generate the CSS that is customisable. Don't try to do any optimisation or fancy caching unless you observe there's a performance problem.
The only potential performance problem is that the browser can't cache the customisable CSS. However, you probably don't want the browser to cache it anyway as that could mean that the user's colour scheme doesn't immediately update when they edit it.
If you do have a performance problem I wouldn't worry about ETags. ETags are designed to save the browser from re-downloading a component that it already has, but the customisable portion of the CSS is likely to be very small.
In case of a performance problem, consider inlining the customisable CSS directly into the HTML page. That will save an extra HTTP request. However, don't do this unless you are sure there is a need.
First of all, use appropriate caching headers for generated CSS and also use ETag header to re-validate CSS source when client asks for it. You must implement some fast ETag calculation algorithm, for example increment version field each time users changes some setting and return its value as ETag. In this scenario you may choose not to "generate the css as they make changes and just store it" but "regenerate it for each page view", because actually CSS will be stored in user agent cache and even when user presses F5 ETag will be used to ensure that CSS on client side is still valid.
Of course, CSS must be returned by some http handler (usercss.ashx or something like this). When including link to this CSS into HTML page, make sure to add some parameter to work around cached content issues, for example `
From my own experience I'd recommend you to use handler to serve user CSS as separate resource and do not embed it into HTML page each time it is generated, because in last case you must either recalculate CSS every time page is generated or somehow cache it on the server, both cases are rather bad ideas. Besides, this CSS may be rather large, there is no reason to download it on every request.
Is there any way to show local tasks to user if they doesn't have necessary permissions? Right now it seems like Drupal just excludes them from page code. I want to show them, but with different CSS class.
Version of Drupal is 5.20
Even though there are some differences concerning the local task building between Drupal 5 and 6, Mac is right that the logic to ignore entries not accessible by the current user is pretty deeply embedded in the menu.inc functions. If you want to look for yourself, start with theme_menu_local_tasks() and follow the function calls from there.
If I had to implement the feature you're looking for, I'd rather avoid Macs suggestion of messing around with the menu access settings directly. Instead, I'd override theme_menu_local_tasks() with a custom version and duplicate the entry retrieval logic in there. The first run would fetch the primary and secondary links as before, and the second would do the same while impersonating another user (probably user 1 in this case). That way, I'd get two versions of the local task markup which I'd then needed to diff somehow in order to find the ones not allowed for the current user, thus needing the extra CSS class.
Note that this would still be somewhat ugly to do, as menu_primary_local_tasks() and menu_secondary_local_tasks() return already themed lists, so the comparison would need to work on the markup, probably parsing out the li tags somehow. So it might be worth spending some time trying to do the same thing (fetching the local tasks as two different users), but using lower level functions to get the entries before theming.
Note: Should you end up using the user impersonation logic, make sure to use the safe, second version that disables session saving during impersonation.
I know the D6 version of hook_menu much better than D5's. AFAIK - however - you can't override that behaviour as it is hardcoded in menu.inc.
If I am right with what above, a workaround (rather inelegant, I must admit) could be:
Remove the access control from the menu item, so that all menu items are visible to all user.
Put access control in the callback directly (you will make the tab non-clickable in a moment, but if the user insert the URL directly, this will prevent access to pages they must not see).
In the page displaying the tabs, load a different js file according to what roles the user has. The js file for users with limited access will select tabs by mean of their text content (at least in D6 tabs do not get any "individual" class: they only get a common "tab" one), it will remove the link to the tabs the user has no permission to visit and it will add a custom class to those tabs that should be displayed differently.
Add CSS theming for your custom class.
As stated before, I do not know D5 much, so it might also turn out that you can actually achieve what you want in a much cleaner way!