Overview
The default text color in most applications for hyperlinks is blue. In some cases, due to the background color or the background image color, the hyperlink may not be clearly visible. The article provides the steps to change the hyperlink text color using the WYSISYG editor in the CMS Dashboard.
This is the expected result of having a background color similar to the hyperlink text color.
Solution
Note: As this change requires editing the HTML source code, caution must be taken. Since the editor we are using is strictly complying with HTML rules, all of the HTML default rules cannot be changed for the application. Regular text color can be changed, but hyperlinks color changes are disabled because it is a default HTML rule. The changes need to be applied individually.
- Go to Create > Build and select the Feature that has a WYSIWYG editor where the text color needs to be changed. In this case, we will be working on the Info-1-tier Feature.
- Click on
</>
of the WYSIWYG editor, which will reveal the Code View, also known as the Source Code. You will now be able to edit the text color by changing the HTML attributes.
NOTE: In this case, we will be changing the text color to a primary color yellow so that we can use the word "yellow." You can also use Hex color (#FAFA00
) to get something more to your liking. To get the Hex codes, have a look at the HTML Color Codes article. -
To change the text color, insert the attribute
style="color:yellow"
to the code that contains the URL. The piece of code that needs to be edited is:<a href="https://support.biznessapps.com/hc/en-us/articles/360011017379">hyperlink</a>
-
Insert the attribute
style="color:yellow"
after the quotes of the URL:<a href="https://support.biznessapps.com/hc/en-us/articles/360011017379"style="color:yellow">hyperlink</a>
- Click on
</>
to go back to the normal view. You will notice the color of the text "hyperlink" change to yellow. - Click Save on the top right.
Testing
Verify the changes in the App Preview.
Comments
0 comments
Please sign in to leave a comment.