I have a picture on a html file/site and I want to add the list of available colors for that picture. I want to create very small boxes or dots, a small box for every color. In a text box or shape, you can quickly change the color of text, the inside (fill) color, or the color of the border. Let's select the shape—the Drawing Tools appear in the ribbon, with the Format tab active. Here's the same shape after we changed the border to orange, the fill to a light green, and the text to black. Developers can now add a custom theme color palette to publishing experience, and with those, create content boxes like these below. Content Box Examples. This is a sample paragraph text with a colored background. You can use this to feature content, highlight something important, or provide a call-to-action.

The CSS opacity property is a great way to set a low opacity on HTML elements making the entire element semi-transparent including all of its children. But what if we only wish to set the opacity on the background color whilst keeping the content (such as text and images) opaque? Here are a few ways to accomplish that:

Set Background Color Opacity Using Alpha Channel Color Notations

We can use the following CSS3 alpha channel color functional notations to set the background color to a lower opacity:

Using the RGBA (Red-Green-Blue-Alpha) Model:

Syntax:

Where the values of each color in RGB can be an integer between 0-255 or a percentage value from 0-100%, and the value of Alpha can be a number between 0-1.

Examples:

Using the HSLA (Hue-Saturation-Lightness-Alpha) Model:

Syntax:

Where the possible values of the HSLA color notation are:

• Hue: specified in degrees (imagine a color wheel) where:
  • 0° – red
  • 60° – yellow
  • 120° – green
  • 180° – turquoise
  • 240° – blue
  • 300° – pink
  • 360° – red
• Saturation: specified in percentage where 0% is completely desaturated (or gray) and 100% is fully saturated (or full color).
• Lightness: specified in percentage where 0% is completely dark (or black) and 100% is completely light (or white).
• Alpha: a number between 0-1 where 0 is fully transparent and 1 is fully opaque.

Examples:

Use a Lower Opacity CSS Pseudo Element to Create a Colored Background Layer

By creating the content element nested inside a parent element like so:

We can create an background layer with no content via CSS pseudo elements like so:

Now we can make the background layer the same size as the parent div and position it relative to the parent div:

You should now see a pink colored background layer with an opacity of 50% that only applies to the background color and not the content.

Here's a quick explanation of how the generated content (our background layer) is styled:

• To generate empty/invisible content we can simply set the content property's value to an empty string or a space character.
• Setting width and height to 100% ensures the generated content is of the same size as the parent element.
• Setting a lower opacity makes the background layer transparent.
• position: relative on the parent element and position: absolute on the generated content ensures the generated content is positioned relative to the parent.
• Setting left: 0 and top: 0 ensures the generated content is positioned to the top left edge of the parent element.
• Setting a negative z-index value ensures the generated content recedes to the background and all child element content appears above it.

If the parent element has a background color of its own, then you can set a positive z-index value on the generated content (the background layer) and a higher z-index value on the child element along with relative positioning like so:

Hope you found this post useful. It was published (and was last revised ). Please show your love and support by sharing this post.

Here’s how you can use the Content Editor web part to include a text message on your project web pages in SharePoint.

If you’ve ever created a new project web page in SharePoint, you probably wanted to include some kind of text box for your team. This is a great way to present useful information like project scope, contact or support details, or even a training message to help team members use the site

The first idea that may come to your mind is to simply type directly into a SharePoint zone on a page directly like this:

There is nothing wrong with the above. But you can get more flexible results using the Content Editor web part.

The Content Editor web part offers the following advantages:

· Flexibility – You can move the web part to any zone on a page without having to copy and paste your text. Plus, you won’t get broken URLs if you include them in the Content Editor web part.

· One-click visibility control – You can hide the text contained in the Content Editor web part with a click. This can come in handy if you want to show a reminder message on certain days only – or if you want to prepare but not publish the content right away.

· Audience targeting – You are able to target the Content Editor web part by permission group. So messages can be displayed only to specific project teams based on permissions.

· Consistency – You can keep all your pages looking consistent by using standard web part titles.

How to add a Content Editor web part in SharePoint

You can add the Content Editor web part to your SharePoint page in a few clicks:

Add the Content Editor web part

1. Click Edit from the Page ribbon.

2. Click on the zone where you would like to add the text.

3. Click on Insert. Then click on the Web Part icon in the ribbon.

4. Under Categories, select Media and Content. Then select Content Editor under Parts (don’t see Content Editor? Get instructions to enable it below). Click Add.

You should now see the Content Editor web part in the zone you selected.

Edit the Content Editor web part

1. To edit the Content Editor, click on the upside down triangle on the right and select Edit Web Part.

2. Enter your text into the Content Editor web part.

3. You can customize the Content Editor under Appearance, including changing the title and specifying the height and width of the web part.

4. If you want to remove the title of the web part entirely, click Appearance and change the Chrome Type to None.

5. When you are done, click OK in the Content Editor web part and save the page

There you have it. You built your own flexible web part for text entry that can be placed anywhere on the site page.

Content Editor web part is missing from your SharePoint?

Don’t see the Content Editor web part as an option in your ribbon? Microsoft released an update last year that disables certain web parts by default in Office 365 and SharePoint online. To restore the Content Editor web part, you or your SharePoint admin will need to turn the scripting capabilities back on for your site.

Solved: Background Color Of Content-Box - Canvas Community

You can find instruction to do so here. After you enable scripting and refresh your site, you can continue where you left off above.

Want more tips and tricks for construction project management professionals?

Our new ‘Tips from the Field’ series features time-saving information for construction project managers. Subscribe to our newsletter to get our latest tips and tricks delivered directly your inbox each month.

Expression Web Tutorial: How To Design A Website With Microsoft Expression Web

And be sure to check out our previous tip to learn how to import data from Excel into SharePoint.