Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Jun 2010
    Location
    Texas
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Give users ability to swap color themes!

    Hello all, I come here for assistance. I am rebuilding our internal resource
    site, @ the company where I work. And I thought that if I gave our users the
    options to set there own color themes, it would be something they would like...

    Anyways I come here to ask, if there is a simple way to do this by css, I want
    to stay away from using java, I know there are ways to do this with java, but
    want to see if there is away to do this by the use of css and if needed cookies.

    I would have 10 or more different color themes, layouts will not be affected
    just the simple color theme, font color, header color, table color, etc...


    Thanks,

    bill

  • #2
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts
    You would need either cookies or session variables. And yes this is fine as CSS, but you need a server side language like PHP or ASP to do the change. Basically you put a small drop down box with the option. Then this box using Javascript changes pages to a new one with a Get statement at top like:

    index.php?theme=blue

    So the PHP script says, ok if it's blue load this style sheet and if it's another color load this one.

    So a server side is required. I guess you could also do it with JS, just get the url in the location bar and run an if query. Then do a document.write command. But I would use PHP or ASP for this man. Real simple and quick really, doesn't require much work.
    "FORTRAN is not a language. It's a way of turning a multi-million dollar mainframe, into a $50 programmable scientific calculator."
    http://www.microfastcat.com -- FastCat Software, the fastest software on the NET!
    http://www.microthosting.com -- Free reseller web hosting, Hosting, VPS, FREE SMALL HOSTING!!!
    http://www.microtronix-tech.com -- Web design and programming

  • #3
    New Coder
    Join Date
    Jun 2009
    Posts
    49
    Thanks
    7
    Thanked 1 Time in 1 Post
    If you want to swap the color themes without reloading page, then you need javascript.

    If you want to swap the color themes reloading page, then you need to clone css (that you want to swap) and clone the page in which you want to swap the color themes.
    Thus you will able to associate the cloned page with the cloned css.

    May you describe better your site configuration?
    Naturally PHP it's the best uninvasive solution.

  • #4
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts
    You see I don't use JS that much, so didn't even think about doing it without a refresh. But now that I think about it, I have seen this done before.
    "FORTRAN is not a language. It's a way of turning a multi-million dollar mainframe, into a $50 programmable scientific calculator."
    http://www.microfastcat.com -- FastCat Software, the fastest software on the NET!
    http://www.microthosting.com -- Free reseller web hosting, Hosting, VPS, FREE SMALL HOSTING!!!
    http://www.microtronix-tech.com -- Web design and programming

  • #5
    New Coder
    Join Date
    Jun 2010
    Location
    Texas
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well basically I work at an local ISP, and our helpdesk page is a mess, and
    lacks proper structure, so I'm rebuilding from scratch, its basically going to
    consist of all html/xhtml and css. I know some php, and this would be best
    for this project, I want to stay away from java, most of our techs leave the
    helpdesk page up at all times, so I dont wana any resource hogging, as we
    used programs that require for us to monitor/support fiber/dsl/t1's... that
    require as much ram/processor that they can get....

    And while I was putting site together I thought it would be cool to give the
    techs something to spice up there bookmark of the site.

    So basically some guidance, point me to some examples, or how I could best
    achieve this, would be greatly appreciated!


    Edit: also if I can achieve this by cookies, that would be great, as we rarely clear our history/cookies/ and I want the same theme to always be there for that
    pc, they can change if they want of course, ...so that they don't have to consistently change/choose themes...

    thanks

    bill
    Last edited by itsabilly; 06-20-2010 at 01:04 PM.

  • #6
    New Coder
    Join Date
    Jun 2009
    Posts
    49
    Thanks
    7
    Thanked 1 Time in 1 Post
    Javascript and Java are two different scripting languages.
    Javascript is composed by two words, Java and Script, because its syntax was influenced by Java.

    Javascript doesn't require any ram/process of the webserver but only ram/process of browser (client-side).
    Javascript is the easiest solution if you don't know your helpdesk structure.

    I hope it will help you.
    Last edited by Maurizio1230; 06-20-2010 at 02:07 PM.

  • #7
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts
    Javascript doesn't require any ram/process of the webserver but only ram/process of browser (client-side).
    I think that's what he meant by they leave it open and I don't want it consuming resources. He didn't mean resources on server but resources on local PC viewing page.

    In short, yes JS will consume Pc resources of those viewing the page, that is way loading a popup like Lightbox if you have a lot of things open will jitter.

    If you have a load of apps on each techs PC running at once, then stear clear of JS. But in this case I have to side with JS, for what you are looking for will not consume almost anything at all. Since it will only run if they change themes.

    Now I don't know how JS works with cookies, I would suspect fine since JS is a client side script and cookies are stored client side.

    In short, decide how you would like to go, JS or PHP. I suggest PHP personally with a small JS caller about a line in size. But this is totally up to you man.

    If you choose on JS, I would suggest asking the admin to move this post to the JS area to get better help. Just a thought, but you decide which way you would like to go. Both are very viable and neither has a downside really for what little of a thing you want.
    "FORTRAN is not a language. It's a way of turning a multi-million dollar mainframe, into a $50 programmable scientific calculator."
    http://www.microfastcat.com -- FastCat Software, the fastest software on the NET!
    http://www.microthosting.com -- Free reseller web hosting, Hosting, VPS, FREE SMALL HOSTING!!!
    http://www.microtronix-tech.com -- Web design and programming

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    820
    Thanks
    10
    Thanked 78 Times in 76 Posts
    Both methods, JS and PHP, have already been done so you might want to Google for the scripts and implement them. Some modification might have to be made to fit your situation. Cookies will definitely need to be used if you want the selected theme to show up for users when they return.

    PHP Scripts Example:

    Change Color Theme With PHP – CSS Switch


    CSS Colors: Take Control Using PHP

    Source

    JS Example:

    Change Page Color Scheme Dynamically using Javascript

    Source
    ☠ ☠RON☠ ☠

  • #9
    New Coder
    Join Date
    Jun 2010
    Location
    Texas
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay I decided to go the php route, and well I got a frame settup, I went
    with this, because often we have to update links on an hourly basis, and rather
    than changing the same links on a 100 diff pages, this would be the easiest
    I thought of going with a cms or wiki, but an overall html setup seems to me
    to be the best setup at this date and time.

    www.iceiscold.com/workbench/helpdesk/index.html

    I just ran into one issue, the script works, but how can I get it to apply
    to entire site, rather than just that the nav window. If needed I can ask admin
    to move this thread to php.

    Also thanks to all of you for your help, especially you Major Payne!


    bill
    Last edited by itsabilly; 06-22-2010 at 08:42 AM. Reason: added link

  • #10
    Regular Coder jfreak53's Avatar
    Join Date
    May 2004
    Location
    Guatemala
    Posts
    477
    Thanks
    19
    Thanked 10 Times in 10 Posts
    Ok first frames, get rid of them, ewww. Bad idea man. You can make this work with entirely PHP instead of frames. All you do is make a header file and include it in all your pages, that way when you change links you change them once and they are included in all pages.

    PHP Code:
    include 'header.php'
    Very simple. That is why it's not updating the other frame. To make that work you would need a JS that updates both frames second one first then first one. And it's a lot of work. So just go with header files and footer files man. I do this all the time.
    "FORTRAN is not a language. It's a way of turning a multi-million dollar mainframe, into a $50 programmable scientific calculator."
    http://www.microfastcat.com -- FastCat Software, the fastest software on the NET!
    http://www.microthosting.com -- Free reseller web hosting, Hosting, VPS, FREE SMALL HOSTING!!!
    http://www.microtronix-tech.com -- Web design and programming

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Code:
    HTML>
    <HEAD>
    <SCRIPT TYPE="Text/JavaScript">
    <!-- Beginning of JavaScript -
    
    function changecolor(code) {
    
    document.bgColor=code
    }
    // - End of JavaScript - -->
    </SCRIPT>
    
    </HEAD>
    <BODY>
    
    <form>
    <input type="button" name="Button1" value="RED" onclick="changecolor('red')">
    
    <input type="button" name="Button2" value="GREEN" onclick="changecolor('green')">
    
    <input type="button" name="Button3" value="BLUE" onclick="changecolor('blue')">
    
    <input type="button" name="Button4" value="WHITE" onclick="changecolor('white')">
    
    </form>
    
    </BODY>
    </HTML>
    Frank
    Last edited by effpeetee; 06-23-2010 at 10:07 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    New Coder
    Join Date
    Jun 2010
    Location
    Texas
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks Frank, but what Im looking to achieve is allow various skins per say
    which I will create, templates/skins, and give users to change, not just the
    background color, I think jfreak53 mentioned will help. I will post back with
    my success.



    bill

  • #13
    New Coder
    Join Date
    Jun 2010
    Location
    Texas
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay, I'm pretty sure I have the skin/theme swap working the way I intend.
    I'm just running into one problem. Because I have the
    PHP Code:
    <?php include 'leftnav.php'?>
    in the nav div, and corresponding nav div to the right, its not working, it keeps
    getting pushed to the bottom. I have tried position: absolute and relative, as
    well as floating it, I can not get it to sit next to the nav div which contains the
    import/include of nav.php.... The nav php contains the php script to change
    skins/themes, the index page which will be template for all pages created
    contains the construct.css which tells which div to be positioned etc...

    http://www.iceiscold.com/workbench/php/

    My div structure is as:


    Code:
    <body>
    <div id="container">
    <div id="col1">	
    <div id="area">
    	<?php include 'leftnav.php'; ?>
    </div>
    <div id="col2">
    <div id="area">
    Test
    </div>
    </div>
    </body>
    The construct css that I am using to position the layout:

    Code:
    #container { width: auto;
    }
    
    #col1 {width: 210px;
    	   margin-left: 5px;
    }
    
    #col2 {width: 210px;
    	    position: absolute;
    	    margin-left: 225px;
    }
    
    #area {width: 210px;
    }
    What could I be doing wrong, any suggestions on how I can get the content div to align right to the nav div?


    Thanks,

    bill

  • #14
    New Coder
    Join Date
    Jun 2010
    Location
    Texas
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I probably could use a negative top position, but is that the best route?

  • #15
    New Coder
    Join Date
    Jun 2010
    Location
    Texas
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I figured it out, thanks to all of you!


    bill


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •