zoukankan      html  css  js  c++  java
  • UmbracoColor Picker–Demo CQ

    Demo

    Allow the end user has ability to change the background color with pre-defined color.

    Steps

    1. Create a datatype named BackGroundColor.

    image

    2. Select Color Picker as its render control and select Nvarchar as its Database datatype.

    image

    3. Add the pre-defined colors

    image

    You can add any number of colors as you wish.

    4. Add the color to Generic Properties in the TextPage document type.

    image

    It is reasonable to place Content  BackGround Color in the Generic properties tab as it controls the content’s background color.

    5. Set the color in the content properties tab

    image

    After 1 – 4 steps are carried out, the Content BackGround Color comes up to you when you select the properties tab in content page which take TextPage as its template. Select one of color as your background color here.

    6. Apply the color in the template

    image

    The code finally looks like the following.

    <div class="entry" style="background-color:#<umbraco:Item field="contentBackGroundColor" runat="server" />">
                        <umbraco:item runat="server" field="bodyText"></umbraco:item>
                    </div>

    7. See the effect.

    image

    More knowledge

    Umbraco datatypes are created based on the control either shipped with umbraco or self-developed implementing IDataType interface. You can create you specific datatype with specific pre-defined values in different context in your umbraco site. For example, you can create background color 1 and background color 2 based on color picker to control colors in different areas in the template. Have fun here.

    The source code is available at NovaUmbracoDemo in CodePlex.

    Supported by Nova Umbraco

  • 相关阅读:
    sqli-labs(十七)
    sqli-labs(十六)(order by注入)
    sqli-labs(十五)(堆叠注入)
    spring boot热部署
    java之定时任务
    python之字符串函数
    java加载配置文件信息
    python之运算符与基本数据类型
    python基础
    python介绍
  • 原文地址:https://www.cnblogs.com/czy/p/2424421.html
Copyright © 2011-2022 走看看