I'm currently working on a simple web application where users each have their own site with its own subdomain.
I want to give each user a settings panel where they have a form for changing a few simple css properties for only their site.
I'm thinking of something like a simpleform form with jquery and a colour picker to change the elements colour. Each user would probably have to have their own stylesheet though? (Not with full access to it but just so that the properties are unique to that site.)
Im not completely sure how to put that all together.
If anyone has ideas I would greatly appreciate your help.
Maybe this website will help you getting started.
http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
also see this.
http://www.thesitewizard.com/css/switch-alternate-css-styles.shtml
The easiest to implement is to generate the customizable css-statements just in the html-head section of your layout, and not in a separate css-file. This way you also don't have to think about cache problems.
Of course this not the most scalable method, as the css is written for each page. But first make it work, than make it fast.
Okay so the answer I found is pretty simple.
To change the background-color I added a :string field to my sites table
called bgcolor.
I then added the new inputs to my simpleform forms - on the new and edit views for Site.
Finally I added an inline <style> block to the layout I use for the user's Site
<style type="text/css">
body{ background-color: <%= #site.bgcolor %>;}
</style>
same for everything else I want to customize.
And everything seems to work. Win for ERB.
Related
I am struggling with one thing I am not so into and any extra help could help.
I just received the WordPress website from the design company. The agreement was to make it editable, change more than just a content by the time. After the end of cooperation, I started to edit some parts of the website but there is no such an option as Appearance in my Wordpress option panel. I asked the developer how can I change basic CSS of some elements on the website but he argued that it is restricted to change any HTML or CSS because it might cause some errors in the code after rewriting it. I get it, but there should be another way to get to the files, how else I could style the new elements? Is there a no way to add Appearance option to the panel? I am not the expert, it just seems too unrealistic for me to say: it is restricted because of this and that and there is no way to add it. Any experience with that, please? Do we have to find Wordpress developer to go through it, or it is just the fact that I can not edit it anymore?
Thank you for any comment!
Best regard,
Miroslava
You can easily edit any wordpress appearance by edit the theme, take a look into wp-content/themes, there should be the files of the theme usually php and css files
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 am currently using the jQuery autocomplete feature. Functionality wise, it works awesome!
But in terms of styling (in addition to theme roller), I would really like to see something like
http://loopj.com/jquery-tokeninput/ and
http://www.emposha.com/demo/fcbkcomplete/
I am still reading the codes in these plugin, so that I can achieve similar look/behavior. Ideally, I would rather stick with jQuery UI library than switching over to other plugin. How would one go about making this happen?
EVERYTHING in Jquery is style-able via CSS. If you want to achieve a different look, simply build CSS that will override the default styles. If there's a specific style you're trying to achieve, I'm sure quite a few of us would be happy to help with ideas to make them happen.
BTW, the emposa.com site link you provided is completely dead. I'm hoping you're not trying to achieve THAT style....
i want to manage all the design of my website(asp.net) through my css.
my client requirement is he should be able to change all design of website within 4-5 hrs.
is this possible.
is there any trick to do this?
Sure it is. ASP.NET doesn't but render html, css and javascript. What you need it to let it render the html you're after and hook in css for layouting.
ASP.NET also provides you with some great functionality: Themes and skins. These make changing css, images, ... a snap by either configuration or setting a certain premaid theme in code. I suggest you take a look at these videos for more information:
Customize my Site with Profiles and Themes?
Create User Selectable Themes for a Web Site
Use Skins with CSS for a Flexible and Maintainable ASP.NET Web Site
That's a very tall order indeed. By design does the client mean the color/theme or also the layout?
Basically is boils down to the following:
1. Generate semantic html only from you ASP.NET code. That is no in-line style and use meaning full css class names for html that needs to be styled
2. Break your css files into two. One for style and layout and another for color. If you're using images, they should be a part of your color css file
You can start here but also be clear about what your client means by "should be able to change the design within 4-5 hours".
Yes this possible if you have good knowledge of CSS i.e. 2 and 3. Have look at below links which can provide you and idea about layouts fully dependent on CSS
Yui library
Yui CSS tools
Many more ideas like CSS sprite can be used to achieve what you need
I'm trying to create a page that allows a user to change the "look and feel" of the site. I would like to use something similar to jQuery's ThemeRoller or FireFox's Developer Tool.
I can't force the user to use Firefox and I don't need all the options that the ThemeRoller has. I'm really only looking for header, background, font size and font type.
Any suggestions?
Thanks
Try a Stylesheet Switcher, it can be as advanced as you want and this will give you a lot more control the simple Div targeting.
http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm
If your concern is transferring fewer/smaller files and you really want to avoid jQuery UI, it would be quite easy to develop a small jQuery plugin to modify background, font-size/type, and some header stuff.
Since you ask about jQuery specifically, I assume you have some experience working with it. Check out the plugin authoring documentation at http://docs.jquery.com/Plugins/Authoring
If you aren't worried about transferring fewer/smaller files, just use jQuery UI themeroller and ignore the features you don't want.
I couldn't find a plugin that already did this. I used Brosho to give me a base starting point. Brosho basically set's "Brosho: css info" to the element using the attr method. Then scans the entire document for Brosho to create the CCS to export.
Store the user's style attributes in a datastore (cookie or server based). Then on each page of the site have something like the following if user's preferences are stored server-side:
$(document).ready(function() {
$("h1").css('color','<% =UsersHeaderFontColor');
$("body").css('color','<% =UsersBodyFontColor');
$("body").css('font-size','<% =UsersFontSize');
$("body").css('font-family','<% =UsersFontFamily');
});
If you want to get from a cookie, then there's a nice jquery cookie plugin that would allow you to set/get cookie name/value pairs.