What are some ways I can further customize my theme in Church360° Unite? [FAQ]

Follow

Church360° Unite offers a wide variety of options and tools to customize your site.

However, for those with the technical know-how, you can customize even more through the Advanced section of the Themes menu.

While this is not an exhaustive list of customizations you can make with your theme, we hope to provide some examples that will be helpful. Technicians will update this page as more customization code is created.

Custom Cell Background Color and Independent Background Image (Modern Theme exclusive)

This customization applies only to the Modern theme, or themes cloned from the Modern theme. This customization will allow you to change the background colors of cells and also change the background image on just one page, instead of your entire site.

The following code will need to be applied in the Custom Scripts section of your theme, which can be found under the Advanced section of the Themes menu.

<script>
$(document).ready(function() {
    var url = window.parent.location.pathname;
  if(url.indexOf('/*page URL*') > -1){
        $('#body').css("background","rgb(161, 202, 241)");
      $('#background').attr("src","*URL of Background Image you want to use*");
}});
</script>

There are a few sections to point out, shown above in bold.

  • First, where you see page URL, this is where you will indicate which page you want to make this customization to. 
  • Next, the section after "rgb" is where you indicate the RGB values of the color you want to use for the cell background color. In the example, this would make the cell background color a light blue.
  • Finally, the *URL of Background Image you want to use* will be replaced with the URL of an image that you've uploaded to your Church360 Unite website that you'd like to use on the background image of that page.

Change the color of the Sign In/Sign Out/Settings Boxes

This customization allows you to change the color of the sign in/sign out/settings boxes and the icons within those boxes (if icons appear for those boxes in your theme). The following code will need to be applied in the Custom Headers section of your theme, which can be found under the Advanced section of the Themes menu.

<style>
 span.-unite-welcome-message { background: none !important; color: Green !important; }
 span.-unite-link-to-settings { background: none !important; color: Red !important; }
 span.-unite-link-to-signout { background: none !important; color: Blue !important; }
span.-unite-link-to-signin { background: none !important; color: Blue !important; }

 #current_user .-unite-welcome-message a { color: white !important;}
</style>

Each of the span lines controls a different aspect.

  • The beginning part of the first four lines affects the background color of the box this button is contained in. You can type in "none" to make the background transparent on these boxes.
  • The "color" part of these lines affects the color of the text within these boxes.
  • The fifth line that starts with "#current_user" will affect what color text the person's name shows up as next to the Settings and Sign out buttons.

Adjust Calendar Spacing and Font Color

This customization makes it so your calendar event names are not truncated and can greatly affect the actual size of your calendar.

This customization also allows you to change the font color of the events on your calendar.

The following code will need to be applied in the Custom Headers section of your theme, which can be found under the Advanced section of the Themes menu.

<style>
/* CALENDAR SETTINGS */
div.fc-content {color: white;}
.fc-content-skeleton {text-decoration: none;}
div.calendar.fc {width:100%;}
.fc-view-container,
.fc-toolbar {/* padding-right: 25px; */}
.fc-view-container *,
.fc-view-container *:before,
.fc-view-container *:after {white-space:normal;}
.fc-ltr
.fc-basic-view
.fc-day-number {font-weight:bold;}
#body a.fc-event{text-decoration:none;min-height:28px;}
[data-name="discussion"] {display: inherit;}
div#page_sidebar.event-tabs {padding: 0px 0px 0px 5px; width: 200px; font-size: 0.85em; top: 10px; min-height: 300px; margin: 0 -18px;}
.event-actions {width: 200px; text-align: left !important; text-indent: 12px; line-height: 32px;}
span.event-action.event-link-to-my-calendar:before {font-family: 'FontAwesome'; content: '\f073 ';}
span.event-action.event-link-to-email-invitation:before {font-family: 'FontAwesome'; content: '\f003 ';}
.event-information .event-actions {margin: 0 -18px;}
[data-name="participants"] {border-top-width: 1px; border-top-style: solid; border-color: #999999; border-collapse: collapse;}
</style>

  • To choose which font color you want to use, in the first line that starts "div.fc-content {color: white;}", instead of "white", you may type in any color you want to use for the font.

 

Was this article helpful?
0 out of 0 found this helpful
Have a question: Submit a Request