Christmas Fun with Image Component

In my previous post How to Style Built-In SCS Components I explained how you can use CSS to style built-in components in Oracle Cloud Service (SCS). This short Christmas time post builds on it to show how you can add a Christmas message to your site using Caption option in the Image component.

To recap, the Image component has the following CSS class structure below the “scs-component-content” class:

|  scs-image-container
|     scs-image-link
|        scs-image-iamge
|        scs-image-caption

The “scs-image-cpation” class is used to style the image caption. This is the class we will use to give Christmas feel to the caption text.

Start by adding Image component to a page in your site and then selecting a Christmas image to display. Open Settings panel and enter caption text that you want to be displayed on your image. By default, the image caption is rendered as a semi-transparent overlay stretched across bottom of the image:

You can find CSS that is applied to caption in the Image component by default in the design.css file of you SCS theme:

| .scs-image .scs-image-caption {
|   position: absolute;
|   left: 0px;
|   bottom: 0px;
|   right: 0px;
|   background-color: rgba(0, 0, 0, 0.54);
|   padding: 0.5em;
|   color: #FFFFFF; }

To make caption text to have a Christmas spirit, start by selecting font family that you want to use. I will use for that one of Google fonts available here. Select font families that you want to use and then link tag to load selected fonts to the page layout in your theme – I use the following line:

	<link href='https://fonts.googleapis.com/css?family=Mountains+of+Christmas|Ewert|Lato|Monoton|Nosifer|Rye' rel='stylesheet' type='text/css'>

Next you should add a new style to image component – follow steps described in How to Style Built-In SCS Components wiki to add new style entry in the design.json file for Image component:

| {
|    "name": "Christmas Fun",
|    "class": "scs-image-style-17"
| }

And then add the following CSS to define this style in the design.css file:

| .scs-image-style-17 .scs-image-caption {
|   font-family: 'Nosifer', cursive;
|   font-size: 30px;
|   font-style: normal;
|   font-variant: normal;
|   font-weight: bold;
|   line-height: 38px;
|   left: 0px;
|   top: 10px;
|   height: 70px;
|   padding: 0.5em;
|   background-color: rgba(0, 0, 0, 0.1); }

In the Settings panel of your Image component, select ‘Christmas Fun’ style to see your Christmas message:

Enjoy!

Merry Christmas and Happy New Year!