coach_H Posted December 30, 2017 Share Posted December 30, 2017 Is there a way to change the style and or color of page dividers? Perhaps adding css to header code? I made a semi transparent page and now my dividers show as white dashed lines and I am wanting to do black or grey solid thin line. Thanks 1 Link to comment Share on other sites More sharing options...
apayton Posted April 6, 2018 Share Posted April 6, 2018 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 Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted April 6, 2018 Share Posted April 6, 2018 Alternatively, you can use the "Custom CSS Class" within the divider element. If you were to define that class name as "customDivider" for example, your head code would look something like this: <style> .customDivider { border: 0; height: 0; border-style: solid; border-color: black; border-width: 1px 0 0 0; } </style> Link to comment Share on other sites More sharing options...
apayton Posted April 6, 2018 Share Posted April 6, 2018 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 Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted April 9, 2018 Share Posted April 9, 2018 I tried using that code using customDivider in the Custom CSS Class and had issues as well. However, when adding the hr back into the code, all worked well. <style> .customDivider hr { border: 0; height: 0; border-style: solid; border-color: black; border-width: 1px 0 0 0; } </style> Hopefully that works for you as well. - Loren Link to comment Share on other sites More sharing options...
docnzok Posted August 31, 2018 Share Posted August 31, 2018 One other thing to consider is a mirror element. We use lacrosse sticks that are SVG files, which means whatever size container you put them in, they resize to that container width. Simply create an SVG image inside a Layout Container, name it, and then mirror it. Then you just add the mirror wherever you want the divider. You can also mirror a layout container with code in it. So if you have the <HR> looking like you want it, simply name the layout container and then mirror it. That way you dont have to copy and paste all the time. Just a suggestion Link to comment Share on other sites More sharing options...
neosphorbin Posted March 15, 2020 Share Posted March 15, 2020 Given the last two replies in this thread, would it be possible to combine those answers and use the .customDivider to define an SVG file as the divider? I'm currently accomplishing this by just inserting an SVG as a photo element for page dividers. I have code inserted to remove the photo border. Link to comment Share on other sites More sharing options...
neosphorbin Posted March 15, 2020 Share Posted March 15, 2020 Given the last two replies in this thread, would it be possible to combine those answers and use the .customDivider to define an SVG file as the divider? I'm currently accomplishing this by just inserting an SVG as a photo element for page dividers. I have code inserted to remove the photo border. Link to comment Share on other sites More sharing options...
docnzok Posted March 16, 2020 Share Posted March 16, 2020 Neo Tell me what you are trying to do and I will try to help. I use an svg image in a mirrored container to achieve a custom page divider. Like this. Let me know what you want to accomplish Link to comment Share on other sites More sharing options...
neosphorbin Posted March 16, 2020 Share Posted March 16, 2020 I guess I'm wondering if there is a way to modify the default page divider element code so that when I insert a page divider element it uses an SVG image. I'm currently just inserting a photo element as a page divider right now. Link to comment Share on other sites More sharing options...
docnzok Posted March 17, 2020 Share Posted March 17, 2020 You are able to add a CSS Class to the divider so as long as you have it formatted the way you want and the css is available on that page, you can just put in the css class when you add it. Link to comment Share on other sites More sharing options...
neosphorbin Posted March 17, 2020 Share Posted March 17, 2020 I see. That's another option (Custom CSS Class) that is not available to me for some reason. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now