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.

Hide Church Name in Banner

This customization makes it so you can hide the name of your church so you can show your banner image, unobscured. This customization makes use of Custom Headers, and you do not need to clone your theme to accomplish this task:

<style>
#church_name { display: none;}

</style>

hidename

 

Increase the size of the images in your directory

This customization allows you to increase the size of the images in your Members directory within Church360 Unite. This customization makes use of Custom Headers, and you do not need to clone your theme to implement this change:

<style>
#membership_directory .member-avatar,
#membership_directory .member-avatar img {
width: 1.2em;
height: 1.2em;
}
</style>

The key part to note is the "Width" and "Height" lines. In the above code, height and width is measured in a unit called "em" and 1.2 em is the default size of your images. You can increase these values to increase the size of your images. We recommend keeping height and width equal for best results. In the image below, the width and height has been set to 5em each.

IncreaseImageSize.png