WordPress.org

Ready to get started?Download WordPress

Forums

create a color scheme for a wordpress custom theme (3 posts)

  1. alexdog1805
    Member
    Posted 1 year ago #

    how to create a color scheme for a custom wordpress theme that can be modified from admin panel...

  2. jamesg40
    Member
    Posted 1 year ago #

    Simple to do, first create your color styles in seperate style sheets and name them like so. blue.css - black.css - brown.css - ect.... Then in your admin options panel you could add something simple like this

    array( "name" => "Color Scheme",  //color scheme
        "desc" => "Select the color scheme for the theme",
        "id" => $shortname."_color_scheme",
        "type" => "select",
        "options" => array("black","blue","brown","green","grey","orange","purple","red","white","yellow"),
        "std" => "blue/blue"),

    then you would need to add something like this to your head to call the color schemes stylesheets

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/styles/<?php echo get_option('nt_color_scheme'); ?>.css" />

    Notice that along with the option value I am also adding the template url along with the /styles. I did this because my color option style sheets are in a directory called styles and this part helps it find them.
    Now just a note about the style sheets, In my head document I have a link to my standard style sheets like normal. I have the style.css link as well and what I do is simply have a base style set in my style sheet for most items and then the color options are only in the colored style sheets. Say for instance, I have a border-top that seperates some items on a page, I want it to be blue when I select the blue template or red when the red is selected, so I only put that on the red or blue style sheet and use the appropriate hex color value. You can have a default on yoru stylesheet, just do not use the !important tag in the style on the default and DO use it on the colored style sheet like so.
    the default style sheet has ===

    #thecontent {
    border-top:1px solid #333333 ;
    color:#333333;
    
    }

    and the colored style sheet has===

    #thecontent {
    border-top:1px solid #333333 !important ;
    color:#333333 !important;
    
    }

    Hope this helps.
    As long as you have the save button and all, everything should work fairly well.

  3. jamesg40
    Member
    Posted 1 year ago #

    By the way, just so you know... There are a few different ways to do this. This is only the way that I have found that works for me. If your admin panel is using all functions and stuff this may not be the way to go, but since I am not a php expert, its what works for me. Now if I can just find a way to add an image uploader and a color picker to my admin panel, I will be much happier, lol. Have a great day!!!

Topic Closed

This topic has been closed to new replies.

About this Topic