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
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?
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?
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).
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.
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…
@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!
Answered my own question there.
Keep it simple and easy for people to update colour, images or any background properties.
That Sounds like a plan! (and SECRETLY!.. @schpengle never realised there was as difference … and so made mistakes…until now. cheers 
)
@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!
developer.mozilla.org explain it well (one website to bookmark)
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!
Can’t see this video… says it is unavailable…
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…
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.
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…
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.
@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.
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.
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.
