Jump to content
Welcome! Community launches Feb. 1st ×
  • 0

Page Divider


coach_H
 Share

Question

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
  • Like 1
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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!

Link to comment
Share on other sites

  • 0

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

  • 0

 

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

  • 0

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

  • 0

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

  • 0

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

  • 0

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...