approved backgroundcolor grid layout

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Frans de Jong 548 posts 1840 karma points MVP 3x c-trib

Sep 28, 2015 @ 09:53

1

Approved backgroundcolor grid layout

Using Umbraco 7

Umbraco 7

Hi all,

I've been fighting the entire morning with the aproved color picker in the grid layout. I want to use it for colomn or row background colors.

I have copied the colorpicker.html from the propertyeditor folder to the prevalueeditor folder. The problem is that I can't get it to display colors from a datatype "approved colors".

So I can get the prevalueeditor to show up in the grid settings. I just need something to point it to the approved colors to get the colors.

I can't beleave this isn't in the grid already.

Frans

Copy Link

Amir Khan 1282 posts 2739 karma points

Dec 01, 2015 @ 22:19

Frans, did you ever sort this out? I've added the below to a color picker prevalue but it shows the error "you have not configured any approved colours", which is actually different than the error specified in the view.

<div ng-controller="Umbraco.PropertyEditors.ColorPickerController">

<div ng-if="!isConfigured" >
    <localize key="colorpicker_noColors">You haven't defined any colors</localize>
</div>

<ul class="thumbnails color-picker">
    <li ng-repeat="(key, val) in model.config.items" ng-class="{active: model.value === val}">
        <a ng-click="toggleItem(val)" class="thumbnail" hex-bg-color="{{val}}">

        </a>
    </li>
</ul>

<input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory"/>

Copy Link

Frans de Jong 548 posts 1840 karma points MVP 3x c-trib

Dec 03, 2015 @ 16:08

0

Nope, I gave up.

The problem to me is that the colorpicker doesn't find the approved colors. I'm still hoping somebody sees this topic who solved this problem.

Frans

Copy Link
Amir Khan 1282 posts 2739 karma points

Dec 03, 2015 @ 16:55

0

Same exact issue here Frans. I will post back here if I'm able to resolve it.

Copy Link
Frans de Jong 548 posts 1840 karma points MVP 3x c-trib

Dec 04, 2015 @ 12:54

0

Thanks. Hope you do.

Copy Link
Ben McKean 272 posts 549 karma points

Mar 09, 2016 @ 13:36

0

Did either of you ever find a solution to this?

Copy Link

Adis 3 posts 96 karma points

Sep 23, 2016 @ 11:34

Hi guys,

Today I had same problem as you guys, but I found solution. First in /Umbraco/Views/prevalueeditors/ you need to add new colorpicker.html file

Code of colorpicker.html file:

<div ng-controller="Umbraco.PropertyEditors.ColorPickerController">
    <ul class="thumbnails color-picker">
        <li ng-repeat="preval in model.prevalues" ng-class="{active: model.value === preval}">
            <a ng-click="toggleItem(preval)" class="thumbnail" hex-bg-color="{{preval}}">

            </a>
        </li>
    </ul>
    <input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory" />
</div>

Find your Grid datat type and add JSON configuration (same configuration could be used for "Settings" and "Styles" configuration):

{
    "label": "Background color of columns",
    "description": "Choose background color",
    "key": "background-color",
    "view": "colorpicker",
    "applyTo": "cell",
    "prevalues": [
      "#D30535",
      "#81E6E0",
      "#109D95",
      "white",
      "#53B3AE"
    ]
  },
  {
    "label": "Background color of row",
    "description": "Choose background color",
    "key": "background-color",
    "view": "colorpicker",
    "applyTo": "row",
    "prevalues": [
      "#D30535",
      "#81E6E0",
      "#109D95",
      "white",
      "#53B3AE"
    ]
  }

After you finish everything, you should be able to choose background color for Umbraco Grid rows and cells.

enter image description here

Copy Link

Osman Coskun 164 posts 398 karma points

Nov 16, 2017 @ 14:15

0

Hello Adis,

Thanks for the tip. But i have a problem. I see the predefined background colors, but i can not select one. When i click to a color nothing happens.

I'm using Umbraco version 7.7.4 assembly: 1.0.6505.22489.

Any ideas?

Copy Link
Adis 3 posts 96 karma points

Nov 17, 2017 @ 09:53

0

Hello Osman,

Unfortunately I don't have installed any website with this version of Umbraco, so I can't check it. I'm not sure why it's not working, maybe it's something related to your Umbraco version

Copy Link
Osman Coskun 164 posts 398 karma points

Nov 18, 2017 @ 06:25

1

Hello,

I managed to set background color with the package https://our.umbraco.org/projects/backoffice-extensions/grid-settings/

Thanks.

Copy Link
Frans de Jong 548 posts 1840 karma points MVP 3x c-trib

Sep 23, 2016 @ 13:35

0

Thanks for sharing the solution Adis!!

Copy Link
Adis 3 posts 96 karma points

Sep 23, 2016 @ 14:06

0

You're welcome, hope it'll work in your case also :)

Copy Link

Stephen Garside 6 posts 75 karma points

Jan 09, 2019 @ 07:05

Bit late to the party :) but if you add:-

<div class="check_circle">
<i class="icon icon-check small"></i>
</div>

to the prevalueeditors colorpicker view it will show the selected color - so full code is:-

<div ng-controller="Umbraco.PropertyEditors.ColorPickerController">
    <ul class="thumbnails color-picker">
        <li ng-repeat="preval in model.prevalues" ng-class="{active: model.value === preval.value}">
            <a ng-click="toggleItem(preval)" class="thumbnail" hex-bg-color="{{preval.color}}">
                <div class="check_circle">
                    <i class="icon icon-check small"></i>
                </div>
            </a>
            <span class="color-label" ng-bind="preval.key"></span>
        </li>
    </ul>
    <input type="hidden" name="modelValue" ng-model="model.value" val-property-validator="validateMandatory" />
</div>

Copy Link

is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?