apayton
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Product Forums
Articles
Posts posted by apayton
-
-
I came here looking for the same thing. I ended up figuring it out on my own and thought I would come back and share the solution!
This is a two part solution. First, you need to add the styling for your page divider to the html head code. Second, you need to add a Code element to your page to insert the divider (rather than the standard Page Divider element).
STEP 1: ADDING THE HTML HEAD CODE
This styling code can be written to provide many different divider styles. I wanted a heavier weight double line in gold, so my styling looks like this:
<style>
hr {
border-top: 6px double #f9d70b;
}
</style>
If you want a thin black line, you can use this code:<style>
hr {
border: 0;
height: 0;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
}
</style>
For a thin gray line, you just need to change the border-color property as shown here:
<style>
hr {
border: 0;
height: 0;
border-style: solid;
border-color: #DCDCDC;
border-width: 1px 0 0 0;
}
</style>
You can modify these examples to any color by referencing the hex value of that color. There are many places online where these codes can be looked up, like here: https://www.w3schools.com/colors/colors_groups.asp
Remember that if you only want the divider style applied to the current page, add this code to "Single Page <HEAD> Code". If you want the style to be available to child pages, add the style code to the "Cascading <HEAD> Code" section.
STEP 2 ADDING THE ELEMENT TO YOUR PAGE
If you currently have the current Page Divider elements in your page, you should delete them and instead add a Code element. The code element content should look like this:<hr width=100%>
That's all there is to it. Hope you find this helpful!-
1
-
Page Divider
in Website Code Library
Posted
Hi Burggie.
If I went this route, and added your code to the Head Code, would I then create a Page Divider element and specify "customDivider" in the Custom CSS Class field of that element? I'm curious because I tried this strategy and it didn't work for me. I tried both with "customDivider" and ".customDivider" in the Custom CSS Class field.
I'm a programmer, but new to UI development, so I'm eager to learn new tricks when something doesn't work for me! : )
Thanks!
- Aspen