Theme Visual Editor: Alpha channel additon [Tutorial]
Feb 5, 2020 16:42:29 GMT -8
Nscalerr 🐺 likes this
Post by Retread on Feb 5, 2020 16:42:29 GMT -8
Have you ever wanted the ability to use colors with an Alpha channel in the Visual Editor on a ProBoards theme? You can!
Because this functionality isn't built into the Visual Editor, it will be necessary to create a workaround. Rather than have a single rgba color selector, we'll use the existing hex selector to get rgb information and add an Alpha channel input immediately below it. It isn't terribly difficult to do. This tutorial explains the process.
Method:
As an example, I've created a copy of the ProBoards stock theme.
Then I added a woodgrain pattern as the background image.
I changed the Banner Background image to none
We will be adding an Alpha channel to the background-color of the Banner.
This is our starting point:
We'll create this variable in the Style Sheet for the Alpha channel information:
I chose to preset that at 100% so there will be no change until it's altered by the VE.
Line 54 of a stock proboards theme, defines the stock blue color:
Line 240 uses that and more to define the styling of the Banner ID:
The only part we need in our overwrite is this:
And we'll break it down and rebuild, like this:
Note: Since we can't be certain the user will enter the Alpha information to include the % sign, we'll need to do some error trapping. The input type width does accept values as percentage. But it defaults to appending px to the value if no units are present in the input. That would cause our math to break. The unit(dimension, unit) function will correct for this mistake. We could use the input type Font Family rather than Width. That doesn't force units if they're not specified. But it does have a dropdown which will have inappropriate choices.
Appending the content of that code box to the bottom of the Style Sheet covers the first three steps in our method.
Step 4
Click on Visual Editor Builder, on the right side of the display.
Click on Header (Top) ... that section will expand.
Click on Forum Banner ... that section will expand.
Click on Banner Image ... that section will expand.
Hover over Background Color, then click the Add New Row icon:
We'll use Bgnd Alpha 0~100% for the name, Width for the input type, and select @banner_background_alpha from the dropdown for variables.
Click the Accept icon:
Then click the Save Theme button near the top of the page.
This completes Step 4 of our method
Step 5
Click the Visual Editor tab.
Click on Header (Top) ... that section will expand.
Click on Forum Banner ... that section will expand.
Click on Banner Image ... that section will expand.
Click on the input field to the right of Background Color and a color selector will appear.
For this example, I chose to just use the slider on the right of the selector to sweep into the red hue.
Then click on the field to the right of Bgnd Alpha 0~100%
For this example I chose to use 50%
Remember to click the Save Changes button on the bottom left of the page or the Save Theme button near the top.
Result:
Alpha Channel.pbt (2.17 MB)
You can employ this method to add an Alpha channel to any color or background color in the Visual Editor.
Comments, Criticisms, and Suggestions are welcomed. And if you like this, you know what to do ...
Because this functionality isn't built into the Visual Editor, it will be necessary to create a workaround. Rather than have a single rgba color selector, we'll use the existing hex selector to get rgb information and add an Alpha channel input immediately below it. It isn't terribly difficult to do. This tutorial explains the process.
Method:
- Add a new variable on the Style Sheet which the VE can use for the Alpha channel information.
- Extract the red, green, and blue channels from the existing color variable.
- Reiterate the class or ID where the color is being used and combine the channels to define the color and over-write the existing color definition.
- Add a new line item in the Visual Editor Builder, immediately below the existing color selector, so the user can input the Alpha channel information.
- Adjust the existing color selector and input the desired Alpha level in the Visual Editor.
As an example, I've created a copy of the ProBoards stock theme.
Then I added a woodgrain pattern as the background image.
I changed the Banner Background image to none
We will be adding an Alpha channel to the background-color of the Banner.
This is our starting point:
We'll create this variable in the Style Sheet for the Alpha channel information:
@banner_background_alpha: 100%;I chose to preset that at 100% so there will be no change until it's altered by the VE.
Line 54 of a stock proboards theme, defines the stock blue color:
@banner_background_color: #006CB7;Line 240 uses that and more to define the styling of the Banner ID:
#banner { display: table-cell; height: @banner_height; background-color: @banner_background_color; background-image: @banner_background_image; background-position: @banner_background_position; background-repeat: @banner_background_repeat; vertical-align: middle; padding: 0px 20px; text-align: @banner_text_align; overflow: hidden; }The only part we need in our overwrite is this:
#banner {background-color: @banner_background_color;}And we'll break it down and rebuild, like this:
/* Add Alpha channel to Banner Background Color */
@banner_background_alpha: 100%;
#banner { background-color:
rgba(
red(@banner_background_color),
green(@banner_background_color),
blue(@banner_background_color),
unit(@banner_background_alpha, ~"%")
);
}
/* ~ */Note: Since we can't be certain the user will enter the Alpha information to include the % sign, we'll need to do some error trapping. The input type width does accept values as percentage. But it defaults to appending px to the value if no units are present in the input. That would cause our math to break. The unit(dimension, unit) function will correct for this mistake. We could use the input type Font Family rather than Width. That doesn't force units if they're not specified. But it does have a dropdown which will have inappropriate choices.
Appending the content of that code box to the bottom of the Style Sheet covers the first three steps in our method.
Step 4
Click on Visual Editor Builder, on the right side of the display.
Click on Header (Top) ... that section will expand.
Click on Forum Banner ... that section will expand.
Click on Banner Image ... that section will expand.
Hover over Background Color, then click the Add New Row icon:
We'll use Bgnd Alpha 0~100% for the name, Width for the input type, and select @banner_background_alpha from the dropdown for variables.
Click the Accept icon:
Then click the Save Theme button near the top of the page.
This completes Step 4 of our method
Step 5
Click the Visual Editor tab.
Click on Header (Top) ... that section will expand.
Click on Forum Banner ... that section will expand.
Click on Banner Image ... that section will expand.
Click on the input field to the right of Background Color and a color selector will appear.
For this example, I chose to just use the slider on the right of the selector to sweep into the red hue.
Then click on the field to the right of Bgnd Alpha 0~100%
For this example I chose to use 50%
Remember to click the Save Changes button on the bottom left of the page or the Save Theme button near the top.
Result:
Alpha Channel.pbt (2.17 MB)
You can employ this method to add an Alpha channel to any color or background color in the Visual Editor.
Comments, Criticisms, and Suggestions are welcomed. And if you like this, you know what to do ...
Guitarnutz2