Sport Ngin User Group Forum
SportsEngine Community Forum
Sign up Latest Topics
 
 
 


Reply
  Author   Comment  
coach_H

Junior Member
Registered:
Posts: 2
 #1 
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
0
apayton

Junior Member
Registered:
Posts: 3
 #2 

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!

0
nickburggraf

Moderator
Registered:
Posts: 27
 #3 
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>


__________________
Burggie
0
apayton

Junior Member
Registered:
Posts: 3
 #4 

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
0
loren

Avatar / Picture

Community Manager
Registered:
Posts: 251
 #5 
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





0
docnzok

Member
Registered:
Posts: 57
 #6 
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
0
Previous Topic | Next Topic
Print
Reply

Quick Navigation:

Easily create a Forum Website with Website Toolbox.

Powered by Website Toolbox - Create a Website Forum Hosting, Guestbook Hosting, or Website Chat Room for your website.