The following tutorial is for experienced web developers only. Please proceed at your own risk. If you are unsure of any of this and need assistance, contact the Department of Internet Ministries first. In this tutorial we will be reviewing how to edit the colors, backgrounds, and additional styles of your website.

Step 1) Navigating to the CSS File

You may access your CSS (Cascading Style Sheets) files either through the MODX manager or via FTP. If you have an FTP client and know how to use it, log in to your website and navigate to /web/content/assets/themes/. If you do not know how to use FTP, proceed as follows:

First, log into your MODX manager. Once you have logged in, on the top tabs click "Elements" and then "Manage Files."

Next, click on the folder labelled "assets", and then on the one named "themes". At this point there will be a list of folders with the templates that your site has. If you only have one template, then click the folder. If you have more than one folder, you must click on the one that your site currently uses.

Once you have selected your template folder, click on the "css" folder. You should now see a list of css files. Locate the "template.css" file and click on the green circle with a checkmark that is in the same row. Clicking on this icon will bring up the css file below.

Step 2A) Editing the CSS File for Templates 1-7*

*Please note that this does not apply for templates 4 and 5 as they only have one background.

If you are using templates 1, 2, 3, 6, or 7, then please continue to read on. If you are using either templates 8 or 9, please skip to the next section in where we explain how to change the background image for these templates.

Once the css code displays below, you should see the following line of code either near or at the top of the document: "@import url(theme-[color].css;" where [color] is the name of the theme you are currently using.

To change the theme, replace the current color with that of the one you wish to use. For example, the theme my site is currently using is the "theme-sage.css" template that looks like this:

If I wanted to change it to the royal theme for Great Lent, I would edit the line of code and replace "theme-sage.css" with "theme-royal.css." The new line of code should read: "@import url(theme-royal.css);". Make sure that the line you are editing is the one after "/*Template Themes*/".

Once you have edited the code, click "Save" to finish editing the css file. At this point your website should be using your new color scheme!

Step 2B) Editing the CSS File for Templates 8-9

Once the code is displayed, locate the line of code in the css file that displays your background image. The code should read
"background: #fff url(/modx/assets/themes/common/backgrounds/[imagefile].jpg) no-repeat fixed;"
where [imagefile] is the name of the image you are using.

To change your background image, simply replace the current image file with the one you wish to use. For example, my site currently uses a burgandy polystavrion background that looks like this:

However, say I wanted to use an icon of Christ as the background instead. A list with some images that we provide as backgrounds can be found by going back to the "themes" folder and then selecting "common" followed by "backgrounds." Not all the images listed are the correct dimensions (1920 x 1200 pixels), so you should check by clicking on the binocular icon. You may also upload your own images that are of the appropriate dimensions by using the "Choose File" button. Additionally, you may find these backgrounds at the downloadable graphics section of the Department of Internet Ministries webpage.

In the list above you may have noticed the "christ.jpg". In the CSS line I just change "polystavrion_burgundy_2.jpg" to "christ.jpg" and click save. Then my new background will appear:

It is possible to make additional changes to existing stylesheets that come with your website, but the it is not recommended without consultation with the Department of Internet Ministries. We instead recommend creating a new stylesheet (i.e., parishmods.css) and making any changes there. You can then link to that stylesheet from the template.css file.