|
CSS - Creating Various Css Themes For A Site And Letting Users Select
Hola,
I'm about done with my site design. CSS is almost complete, and I'm happy with how the site appears across all browsers. The next step in my development cycle is going to be provide alternate color themes to my users. I will have a default theme, and at the top right corner will be a small palette/swatch of about 7 colors, each representing a color theme. What is the best way to approach this? My idea is that each theme has its own set of color variables which would be included as a file, inserted into the style sheet.Each theme would have it's own include file, and a variable placed in a cookie would determine which theme file was included. ie (i'm using cfml but it should apply to any scripting language) ------------------------------- <cfset background = #e3edc2 > <cfset color = #333 > <cfset text = #686397 > <cfset validated text = blue > <cfset error text = red > <cfset header background = #abd240 > <cfset navbar backgroud = #686397 > ----------------------------------- Then in the actual style sheet I would have --------------------------------------------- <cf include template="theme.cfm"> body { background: #variable#; color: #variable#; font: .8em arial, helvetica, sans-serif; margin: auto; padding:0px; } a { color: #variable#; } .smalltext { font-family: arial, helvetica, sans-serif; color: #variable#; font-size: .7em; } --------------------------------------------------------- Does this seem logical? Basically, I just want people to be able to choose between various color sets that would be applied to the style sheet dynamically. I can then work from one Main style sheet and add color themes as I please. Similar TutorialsHi, I would like two columns, one with the title (i.e. menu1,2,3) and the next with the select menu. In the past, I have used tables (yikes!). I am assuming it should be a list,however, the markup could be changed if something else is more suitable. Any suggestions on appropriate CSS, or sites which give good examples? Thanks Code: <ul id="selection_list"> <li>menu1<select id="menu1" name=" menu1" ><option value="1">opt1</option><option value="2">opt2</option><option value="3">opt3</option></select></li> <li>menu2<select id="menu2" name=" menu2" ><option value="1">opt1</option><option value="2">opt2</option><option value="3">opt3</option></select></li> <li>menu3<select id="menu3" name=" menu3" ><option value="1">opt1</option><option value="2">opt2</option><option value="3">opt3</option></select></li> </ul> Does anyone know this number. My three column layout has the middle (fluid) column below the left and right columns. It is valid and it is fine on Opera and Firefox and IE. could anyone with safari go to: http://www.mmimageart.com/fineart.html http://www.mmimageart.com/fineart2.html http://www.mmimageart.com/fineart3.html and tell me if you see any errors, specially the text under the thumbnails getting out of place? or does everything looks normal to you ? thanks. I know this can be done and of course now that I want to try it I can't find any sites that have this option to use as a guide and my search didn't turn up anything. Any one here experienced with this or now a site I could use as a guide?? Hello I'm a newbie on this forum and have a CSS problem I could do with some help on. On this website www . glewstonecourt . com (please remove spaces as I can't post links just yet!) I've been told by the client that some website visitors are experiencing problems with the navigation..... the first few buttons are appearing fine, but then the subsequent ones aren't.... but I can't seem to replicate the problem! Any suggestions anyone? bren Hey! I would like to write a script that allows users to select .css files from a pulldown menu that is populated by all the .css files located in a given directory. The goal is to "write" the selected file's name into a config file (I assume) so that that particular .css file will be the one used. Then if the user wants to change .css files, they nav. back to the pulldown page and reselect a new .css file. Is this possible? I don't expect that someone will write this for me...but hopefully someone might be able to point me in the right direction... A feature that would allow users to upload (only) .css files would also be excellent...but I realize that would require populating the dropdown with information in my database...(thus negating the first paragraph...) Which method would be better? And how can I go about writing the pulldown selection to a config file? Your wisdom is much appreciated. Thank you. Cranjled PS. If doing this with PHP is not the right way...please don't hesitate to tell me! I only assumed php since my site is in php... is it possible to create this in css ? if so, does anyone have a tutorial on how to ? or what its called so i may research it more (content box? container box?) ty btw, just the style not the stuff inside them lol hye peeps i need to create a external css for my website www. losttv . 50webs. com would someone please help me, i have no idea. ive made the site how i want it to look and i need the css else i wont pass my assignment. i have no idea how to create it either and have tried reading books? any advise would be SO welcome ricki Hello, I'm trying to create about 4 columns to hold different things in an organized manner with css. My site is www.rafm.org and if you go to the paste section, and look at the recent pastes, I want them to be in columns with column headers. So, how do you create columns with css? Hello, I am trying to aling two unordered lists side by side by each other. I want them to look like: Code: Example 1: Example2: *blah *blah *blah *blah *blah *blah I'm running into two problems: 1) I can't get them spaced apart from each other. I tried putting them in a table, but the cells just sit right next to each other so there's no space. 2) Since it is an UL, the dotted bullet points are centered, however, I would like them left-justified like the example. Is this possible? Thanks guys, [EDIT] After posting, the example does not display like I want it. I want a whole SPACE GAP between the two lists. The post made them run together. One thing I've never been able to replicate using CSS that you can do w/ tables is a simple content area with tab, where the border goes just around those areas and there's a set width for the tab but no set width to the area beneath it. I'll try to graphically depict what I mean he _____________ |************|____________________ |*********************************| |*********************************| |*********************************| |*********************************| |*********************************| ------------------------------------------------- Seems simple enough, right? Just imagine that's a solid border and the asterisks are the content area, and I want to create this using only CSS and divs. The tab, say, is fixed at 100px, but the area below is at some percent, say 90% of the page. The problem ends up being the portion to the right of the tab. I need to create a div there so that the top right border is drawn, which is really the bottom border of that space. I can't simply give the area below a top border because then it would place a border under the tab, and I want the tab to be seamless with the area beneath. CSS can't figure out what the remaining width of the div to the right of the tab (at least without using the under developed display:table-cell), so I can't specify the width of that div, which means I can't know how far to extend it to reach the right side of the area below. So, generally, as far as I can tell, the above depiction can't be done without tables. Can anyone find a workaround? Please let me know if I'm not explaining this well enough. Thanks! I want to have all my hyperlinks in my CSS file, so I can call them all at once. Is there any way to do this? Or do I have to code them into every page individually?? I am working on a project in which users will be able to sign up for a program, lets compare it to a myspace page... and they can customize the look and feel of that page to a very limited extent. What is the best way to have them choose colors of the page through CSS, have those changes be there always applied to their page and their page alone? I don't need help with the implementation, I currently have it to where users can choose from pre-built stylesheets and those are used, but how do you set it up to where what options they choose in the setup wizard are then creating a new stylesheet just for that user on the fly? Thanks a ton, SS I've always liked the various illustrated borders on some sites where the box or container of the text/images looks like an image itself, but it turns out to be something drawn with either CSS or some other web syntax. I tried to find ways to make DIV elements have a rounded-corner box or use some images as a border that will scale or change as the object increases or decreases in size. What I found were the "border-radius" and "border-image" elements. However, from what I've read online and at this DevShed forum thread, these are proposed elements for CSS3 which are not available at this time. However, the effects that are similar or exactly what these proposed future elements are supposed to do are being used now. So the question is: HOW are web designers getting custom images or rounded corners on solid borders in DIV objects WITHOUT these elements? Is it another, non-CSS markup/programming language that is making this happen (i.e.- XML, Java, JavaScript, DHTML)? Hi, I'm trying to create a border around the body, no matter how wide the window is. Here is an example:click here You will notice that the right hand border is to far right. He's the css for the body tag: Code: body {
background-image: url(images/bkg.gif);
background-repeat: repeat-x;
font-family:"Lucida Grande", "Lucida Sans Unicode", "bitstream vera sans", "trebuchet";
background-color: #414548;
border-style:solid;
border-width:24px;
border-color:#414548;
border-bottom-width:200px;
width:98%;
height:100%;
margin-left:0;
margin-right:0;
}
I think the problem isn't in the body CSS, but maybe some place else. I can't figure it out. Can someone help? thanks I know this should be possible - I'm not a CSS noob, nor a grand master I'm trying to create an internal webapp that only needs to work with current modern browsers - so I'm not constrained by all the IE hack stuff. It uses jquery-ui in places I can get a version that nearly works in Safari, and one that nearly works in FF - but not one that works in both. And all attempts still have minor glitches. (sorry - forum wouldn't let me post live links - you will have to copy and paste) The target would be this: ptone.com/temp/wrad/target.png With the layout being fluid both vertically and horizontally - status bar always visible on the bottom - overflow content in the tab divs would be scrolled (see transcript tab in examples below) Neither of these are perfect, but here is the one that works in Safari: ptone.com/temp/wrad/test-layout.html and here is the version that almost works in FF ptone.com/temp/wrad/test-table.html Neither works in the other browser I've looked at lots of stuff about two column fluid vertical - but they almost all involve just one of the columns being fluid and one being set to content height. I want everything to be fluid (with a min h/w) except for the tabbed content Absolute positioning seems to be the way to go here - but I'm struggling getting the jquery-ui tabs not to collapse in one browser or another. Any help appreciated. -Preston I'm trying to create a menu using 'list' but so far without much success :-( Problems? Not displaying horizontally in browser. Can't center text in box. Adding 'padding' didn't work. Any help would be much appreciated, Mike P.S. Please ignore the colors ;-) //paste.pocoo.org/show/207718/ Please add http to the above - I'm not yet allowed to .. I'm trying to create a full width bar across the page. My current attempt is at: http://www.mixicon.com/dev/test.html It is currently working in Safari, but not in Firefox.I'm open to opinions in what I might be missing here, any thoughts? I'm mostly happy with how it looks in Safari, so I need any help to get it there in other browsers. The attached image shows what it should look like. So, I'm trying to find out if there's an easy way to create a shadow around a border. Essentially, I've got a white background div, with an inner div that takes up part of the white. The inner div has a gray background, and I want to somehow give it the impression of being raised from the white. I couldn't find too much searching through google.. then again, not sure what exactly I need to search for in google. Any help would be greatly appreciated. Thanks Hi everyone, I'm kind of new to CSS. Here is my situation... I have a page with a Youtube video on it. I have multiple videos I would like to share on this page. Is there any way I can create an menu navigation with hyperlinks that allow me to replace the current video on the page with a new video without having to create a new page? Ryan |
|||||||