The marketplace for Premium Themes — & — Templates

2,206,234 People using Mojo
353,564 Downloaded items
2115 Marketplace items
2 Green Monsters

Farbastic colour picker in custom theme options?

Forums General Farbastic colour picker in custom theme options?

This topic contains 10 replies, has 4 voices, and was last updated by  Sweet Themes 8 years, 5 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1019782

    Sweet Themes
    Member

    I'm currently working on a theme, and theme updates, in which I was planning to use the Farbastic colour picker included with WordPress to allow infinite theme colour choices (for various aspects of each theme).

    I wondered if anyone else has used this method in their themes, I can't find any examples searching via Google, and if they have, any tips?

    If not, I'll plough ahead and perhaps share the code etc when I get around to completing the work.

    #1019802

    wpexplorer
    Member

    I've only used this color-picker: http://eyecon.ro/colorpicker/

    I won't give away the whole secret, but here is a sneak peek…

     

    $('#colorpickerField1').

    ColorPicker({
     

                           onSubmit: function(hsb, hex, rgb, el) {

                                   $(el).val(hex);

                                   $(el).ColorPickerHide();

                           },

                           onBeforeShow: function () {

                                   $(this).ColorPickerSetColor(this.value);

                           }

                   })

                   .bind('keyup', function(){

                           $(this).ColorPickerSetColor(this.value);

                   });

    value="” />

     

    *I would like to try using the default WP one – but haven't gotten around to experiment. Would love to see the final result if you go that route! – Maybe a Mojo Blog post?

    #1019822

    Sweet Themes
    Member

    Thanks, I've seen some alternatives, but wanted to try and use Farbastic, as it's right there in the core files already.
    Already got it working, but not as I want it, shouldn't take too much to tweak it.
    I'll be sure to share when done if it's of interest to others.

    #1019842

    Brady Nord
    Key Master

    Sweet Themes said:

    Thanks, I've seen some alternatives, but wanted to try and use Farbastic, as it's right there in the core files already.

    Already got it working, but not as I want it, shouldn't take too much to tweak it.

    I'll be sure to share when done if it's of interest to others.


    I would love to see what you end up with.  I am yet to work with this. Let me know. 

    #1019862

    Design-Saga
    Member

    I did this with my Tribal theme, http://www.designsaga.com/them…..tml/tribal

    And here is how I did it,

     

     

        // Color picking
        jQuery('#colorpicker').farbtastic(colorMe);
    function colorMe(color)
    {
    jQuery('body, .widget .tag:hover, #feedback-submit, .button-theme, #comment-submit').css('backgroundColor', color);
    jQuery('.highlight, .highdark, #footer a:hover, .widget ul li:hover, .poster, .popular-posts .widget-content ul li:hover .popular-post-comment, .recent-comments .widget-content ul li:hover .poster, .entry h5, .entry .meta a, .gallery-caption h5, .menu-link a:hover, .menu-back:hover, .sub-menu li:hover a').css('color', color);
    jQuery('#main').css({ 'borderLeft' : '1px solid ' + color, 'borderRight' : '1px solid ' + color });
    Cufon.replace(':header');
    }

     

     

    This was for the demo, for the final product I ended up adding two color pickers in my admin panel where the user can easily change the color of the elements.

     

    http://www.designsaga.com/them…..-tutorial/

     

    @Brady,  I still haven't received an email from you.  Perhaps my email is wrong in the system?  I submitted a support ticket 2 days ago just in case but I haven't received a reply on that either.

    I would rather just start over with a new account than be stuck like this.  The only thing I noticed with my account is when I registered I used the username “Design Saga” but the system inserted a hyphen.  I didn't think that much of it at the time but after seeing other users such as “Sweet Themes” with spaces then I thought it was kind of odd.  Please advise me on what to do.

     

    #1019882

    Design-Saga
    Member

    I wrote a tutorial on this, http://www.designsaga.com/farb…..wordpress/

    #1019902

    Sweet Themes
    Member

    Design-Saga said:

    I wrote a tutorial on this, http://www.designsaga.com/farb…..wordpress/


    Thanks, gives me an idea of how others are doing it.

     

    :)  

    #1019922

    Sweet Themes
    Member

    Had a quick play with this and I'm pretty confident to get it sorted and re-usable in not too much time at all.

    I made it work with the built in farbtastic for the “main” colour option of one theme I made a while back, I just want to wrap it up a little more neatly and make sure it's ready for public consumption before using it in a theme and/or sharing the full code.

    Essentially it works so you have your options page, the colour option text inputs toggle a farbtastic controller, which allows you to select colours, save as usual.

    A dynamic css file is generated by PHP which references the colour(s) chosen by the user for different elements. Job done.

    #1019942

    wpexplorer
    Member

    Sweet Themes said:

    Design-Saga said:

    I wrote a tutorial on this, http://www.designsaga.com/farb…..wordpress/


    Thanks, gives me an idea of how others are doing it.
     

     

    :)  


     

    This is awesome man – thanks for sharing!

    #1019962

    Sweet Themes
    Member

    For admin options I've now got this working as I want with WordPress' built in farbtastic file.  Very pleased with it so far, think I've used screen space quite well too.

    I just want to work out a simple/unobtrusive demo version (completely different kettle of fish!) so people can preview themes in all their glory/hideous colour options!

    One thing I wonder about farbtastic in general is I haven't seen anyone make it work with touch devices?  Anyone else ever seen this?

    #1019982

    Sweet Themes
    Member

    Talking to myself now I'm sure, but I've cracked this.

    I've just sent an update of my Bulldog Newspaper theme to MOJO with the new admin feature enabled for unlimited colour choices using built in farbtastic.

    You can see how much better unlimited colours are than three by the demo of Bulldog, which also now uses farbtastic.  The demo uses a session variable to store and set your colour choice across pages.

    I also installed this on a test theme I work on (very basic) using two colours rather than one (one for hover states etc) and it works very nicely.

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.