145 posts
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Located in Australia
+3 more
ThemeChills says

Hi all,

Perhaps you can help me out. I’m in the process of creating a WP theme which has certain elements that require RGBA support.

From what I have researched online, this doesn’t appear to be native to the Theme Customizer – currently only hex values are supported.

Because of this, I’m a bit stuck…would anyone have any recommendations on how I can get around this?

Thanks,

Leo

7 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
acosmin says
You could use this for the php part:

function ac_hex2rgb($hex, $opacity = "1") {
   $hex = str_replace("#", "", $hex);

   if(strlen($hex) == 3) {
      $r = hexdec(substr($hex,0,1).substr($hex,0,1));
      $g = hexdec(substr($hex,1,1).substr($hex,1,1));
      $b = hexdec(substr($hex,2,1).substr($hex,2,1));
   } else {
      $r = hexdec(substr($hex,0,2));
      $g = hexdec(substr($hex,2,2));
      $b = hexdec(substr($hex,4,2));
   }

   echo $r . ',' . $g . ',' . $b . ',' . $opacity;
}

I don’t know if it will help you, but …

1534 posts The Last Man Standing
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has sold $75,000+ on Envato Market and is now an Elite Author
  • Has been a beta tester for an Envato feature
  • Sells items exclusively on Envato Market
+10 more
ImanGM Moderator says

You could use this for the php part:

+1

I would recommend to add a Hex fallback for RGBA colors too :)

7 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Has collected 1+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
acosmin says

And here you have an example in jQuery: http://jsfiddle.net/ekinertac/3Evx5/1/

145 posts
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Located in Australia
+3 more
ThemeChills says

You could use this for the php part:

function ac_hex2rgb($hex, $opacity = "1") {
   $hex = str_replace("#", "", $hex);

   if(strlen($hex) == 3) {
      $r = hexdec(substr($hex,0,1).substr($hex,0,1));
      $g = hexdec(substr($hex,1,1).substr($hex,1,1));
      $b = hexdec(substr($hex,2,1).substr($hex,2,1));
   } else {
      $r = hexdec(substr($hex,0,2));
      $g = hexdec(substr($hex,2,2));
      $b = hexdec(substr($hex,4,2));
   }

   echo $r . ',' . $g . ',' . $b . ',' . $opacity;
}
I don’t know if it will help you, but …

Thanks, though don’t quite understand where I would integrate this in the theme customizer…

481 posts
  • Has been part of the Envato Community for over 6 years
  • Has sold $10,000+ on Envato Market
  • Had an item featured in an Envato Bundle
  • Won a Most Wanted contest
+5 more
QBKL says

You don’t need to use it IN the customizer. You use it as a function to convert the hex value in the customizer to your RGBA needs, when/where you need it. The value in the customizer still remains HEX.

In your customizer you’d have to offer the user two fields to set up, the HEX color and the opacity level, which you later process through the function.

145 posts
  • Has sold $10,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Has referred 1+ members
  • Located in Australia
+3 more
ThemeChills says

Ok, thanks everyone. I’ll look into it further.

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by