# Block options hex code not available?

**URL:** <https://forum.pinegrow.com/t/block-options-hex-code-not-available/805>\
**Category:** Styling (CSS)\
**Tags:** bug, feature-request, tool\
**Created:** [March 28, 2017, 3:13pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805 "2017-03-28T15:13:50Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jefferis](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jefferis/32/503_2.png) [@jefferis](https://forum.pinegrow.com/u/jefferis)\
**Post date:** [March 28, 2017, 3:13pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/1 "2017-03-28T15:13:50Z")

</div>

Hi folks, I am looking in the block options for background color and text color, and I see certain predefined colors like turquoise or tan, but when I try to manually add hex code for color, it doesn’t work… Is this a bug, a missing feature, or something being added in v. 3?

Kind of unnecessarily restrictive, IMO

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [March 28, 2017, 9:07pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/2 "2017-03-28T21:07:30Z")

</div>

Hi there, have you tried clicking the _show code_ icon on the right and editing the hex code directly into the pop up code view?

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [March 28, 2017, 9:26pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/3 "2017-03-28T21:26:39Z")

</div>

Hi @jefferis I’ve had a look at this using the header 1 block and if I change the background colour value in #header-1 .main-nav it works fine for me. Can you give me more information about which block(s) you are having an issue with and I’ll try and be of help?

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/9d4a9540ae1d1a4731f0260d11e671b61d8f55ed.png)

---

<div class="post-metadata">

**Author:** ![Jack\_Clarity](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)\
**Post date:** [March 29, 2017, 1:23am UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/4 "2017-03-29T01:23:47Z")

</div>

> [@jefferis](#):
>
> Kind of unnecessarily restrictive, IMO

Calm down @jefferis, two posts and both mention “restrictive”! There aren’t any restrictions, it’s just understanding how to apply the changes.

To change any of the predefined blocks background colour, you can use the dropdown menu block options, then change the relevant colour via the CSS class.

You can also add your own CSS class, such as “.restrictive-blue” and apply that to any element.

You can also change the relevant #header-1 .main-nav

Or

You could create a new rule (attach to a new stylesheet for better management of your custom styles) for #header-1 .main-nav

Personally I prefer to create my own class and attach to a new stylesheet and I prefer not to use important (unless I have too).

---

<div class="post-metadata">

**Author:** ![Jack\_Clarity](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)\
**Post date:** [March 29, 2017, 4:42am UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/5 "2017-03-29T04:42:00Z")

</div>

Here’s a video running through the various different ways and also what happens when you run into problems, such as needing to add important but I done that on purpose to show you don’t have to use important if you know how to update CSS classes.

[https://youtu.be/lg4t9ni-FcM](https://youtu.be/lg4t9ni-FcM)

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [March 30, 2017, 1:16pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/6 "2017-03-30T13:16:36Z")

</div>

That was a truly Awesome Vid… pretty much blew me away and took my mind right off the house work!  
RIGHT PANIC!

MY guest has got over the Severn Bridge from England and will be here in under an Hour.  
and Ive become a web fiend again… in the middle of the most major house, deep clean Ive done since being here.

Nooooooooo!.. run away…

---

<div class="post-metadata">

**Author:** ![Jack\_Clarity](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)\
**Post date:** [March 31, 2017, 11:33am UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/7 "2017-03-31T11:33:05Z")

</div>

@schpengle I’m torn at the moment, should I use background-colour or background for my block-kit. The professionals seem to prefer background (and combine properties), but it’s easier for newbies (especially to pinegrow) to have background-colour with the choice of the colour picker!

---

<div class="post-metadata">

**Author:** ![Jack\_Clarity](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)\
**Post date:** [March 31, 2017, 11:42am UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/8 "2017-03-31T11:42:01Z")

</div>

Answered my own question there.

Keep it simple and easy for people to update colour, images or any background properties.

---

<div class="post-metadata">

**Author:** ![schpengle](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/schpengle/32/238_2.png) [@schpengle](https://forum.pinegrow.com/u/schpengle)\
**Post date:** [March 31, 2017, 12:28pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/9 "2017-03-31T12:28:51Z")

</div>

That Sounds like a plan! (and SECRETLY!.. @schpengle never realised there was as difference … and so made mistakes…until now. cheers 🙂 )

---

<div class="post-metadata">

**Author:** ![Jack\_Clarity](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)\
**Post date:** [March 31, 2017, 2:36pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/10 "2017-03-31T14:36:31Z")

</div>

@schpengle really it doesn’t matter! just useful to know the differences and even if you have background: #000 you can override with background-color via the color picker.

Just seems the easier you make it for people to customise, the better. Anyway, time to stop worrying over minor details and get on with building this block kit!

---

<div class="post-metadata">

**Author:** ![Jack\_Clarity](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)\
**Post date:** [March 31, 2017, 3:13pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/11 "2017-03-31T15:13:12Z")

</div>

> **[background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)**
>
> The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method.

[developer.mozilla.org](http://developer.mozilla.org) explain it well (one website to bookmark)

---

<div class="post-metadata">

**Author:** ![Jack\_Clarity](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)\
**Post date:** [April 2, 2017, 8:46am UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/12 "2017-04-02T08:46:29Z")

</div>

And for those that prefer the soothing sound of @matjaz voice! This video appeared on my YouTube list of videos to view

He recommends the same, create your own custom styling, allowing for better management and avoiding any of your CSS updates being overwritten when updating files.

“the proper way” good habit to get into!

---

<div class="post-metadata">

**Author:** ![jefferis](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jefferis/32/503_2.png) [@jefferis](https://forum.pinegrow.com/u/jefferis)\
**Post date:** [April 7, 2017, 2:16pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/13 "2017-04-07T14:16:35Z")

</div>

Can’t see this video… says it is unavailable…

---

<div class="post-metadata">

**Author:** ![jefferis](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jefferis/32/503_2.png) [@jefferis](https://forum.pinegrow.com/u/jefferis)\
**Post date:** [April 7, 2017, 2:19pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/14 "2017-04-07T14:19:05Z")

</div>

I am a new user of Pinegrow, but I know how to edit css by hand… Intuitively, it would be easier I thought to use the block options property to add custom css but you cannot add the hexcode here, only one of the predefined colors…

 ![](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/1X/500184a29cc5bffe9008f0cbf3defa5403eaa38e.jpg)

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [April 8, 2017, 7:53pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/15 "2017-04-08T19:53:19Z")

</div>

Hi @jefferis can you give us a bit of context, I’m trying to recreate you situation but not enough info so hard to give assistance.

---

<div class="post-metadata">

**Author:** ![jefferis](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jefferis/32/503_2.png) [@jefferis](https://forum.pinegrow.com/u/jefferis)\
**Post date:** [April 8, 2017, 9:11pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/16 "2017-04-08T21:11:58Z")

</div>

It really isn’t hard. I have clicked on a block, went to properties, and selected background color. In that box, I would like to enter a hex color like #232323 or something and I am not allowed to enter a color there manually. I have to choose one of the preset colors like aqua…

---

<div class="post-metadata">

**Author:** ![Rob](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/rob/32/9_2.png) [@Rob](https://forum.pinegrow.com/u/Rob)\
**Post date:** [April 8, 2017, 10:32pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/17 "2017-04-08T22:32:09Z")

</div>

Try this, when you’ve the correct rule selected in the css panel click on the \< \> to the right of the rule name. This should allow you to manually enter the color reference.

---

<div class="post-metadata">

**Author:** ![Jack\_Clarity](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)\
**Post date:** [April 11, 2017, 3:21pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/18 "2017-04-11T15:21:09Z")

</div>

@jefferis I’m unsure why you’re struggling to understand considering the replies from myself and @Rob, but the “block options” are associated with classes that the Pinegrow team kindly included, they are aren’t there to generate new color options or add a custom color with a color picker.

If you know how to edit CSS by hand, why can’t you just add your own class? If you don’t want aqua, just have .barbie-girl and the colour can be pink!

Or as @Rob mentions and I mentioned earlier, why can’t you click “aqua” from the style menu and change the hex value? It really isn’t hard.

---

<div class="post-metadata">

**Author:** ![jefferis](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/jefferis/32/503_2.png) [@jefferis](https://forum.pinegrow.com/u/jefferis)\
**Post date:** [April 11, 2017, 3:24pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/19 "2017-04-11T15:24:31Z")

</div>

Hey, i am just mentioning something that was counter intuitive from an ease of use perspective. I know how to do it by hand. Just expected to be able to manually enter code in that empty space.  
My forte would be user interfaces.

---

<div class="post-metadata">

**Author:** ![Jack\_Clarity](https://avatars.discourse-cdn.com/v4/letter/j/a9adbd/32.png) [@Jack\_Clarity](https://forum.pinegrow.com/u/Jack_Clarity)\
**Post date:** [April 11, 2017, 3:27pm UTC](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805/20 "2017-04-11T15:27:53Z")

</div>

thats fair enough @jefferis, I know there is room for improvement re the Pinegrow interface, but we should remember Pinegrow isn’t a code generator like other software, so it isn’t designed in the same way as other software.

Although I know the focus is on improving the interface for PInegrow 3.0, so just hang in there or do the smart thing and create a stylesheet with all your custom classes for background colour.

You can then assign that class in a matter of seconds.

[Next page](https://forum.pinegrow.com/t/block-options-hex-code-not-available/805.md?page=2)
