Our Little Church DIY:
Color Code Modifications for Web Pages

Written For Christ has provided a template with default colors, which we hope you will modify to make your websites the way you like it.

Modify the Web Page Colors

As with most HTML web pages, the most common color format is the # character followed by 6 hexadecimal digits.

The variables to modify for your web pages can be found at: /css/root.css. Select your colors for your web-pages from the below HTML color tools.



Below is a portion of the file /css/root.css, which has the variables for web page colors.


...
:root {
    /* Topic/Paragraph Header (h1-h5) color */
    --headerFontColor: #0000FF; /* blue */
    /* Day of Week (in footer) color */
    --DayOfWeekColor: #0000FF; /* blue */
    /* Time of Day (in footer) color */
    --TimeOfDayColor: #000000; /* black */
    /* Error Message on web page color */
    --errorMessageColor: #CC0000; /*red */
    /* Footer BackGround color */
    --footer-bg-Color: #FFFF99;
    /* Footer Font color */
    --footerFontColor: #000000; /* black */
    /* Note on web page Font color */
    --NoteFontColor: #FF0000; /* red */
    /* Button BackGround color */
    --Button-bg-Color: #CCCCCC; /* light gray */
    /* Button Font color */
    --ButtonFontColor: #000000; /* black */
    
    /* Top of Navigation Bar BackGround color */
    --TopOfNav-bg-Color: #333333; /* charcoal gray */
    /* Top of Navigation Bar Font color */
    --TopOfNavFontColor: #EEEEEE; /* grayish white */
    /* Top of Navigation Bar Hover BackGround color */
    --TopOfNavHover-bg-Color: #555555; /* gray */
    /* Top of Navigation Bar Hover Font color */
    --TopOfNavHoverFontColor: #EEEEEE; /* grayish white */
    /* Navigation Bar Dropdown BackGround color */
    --NavDropdown-bg-Color: #F9F9F9; /* off white */
    /* Navigation Bar Dropdown Font color */
    --NavDropdownFontColor: #000000; /* black */
    /* Navigation Bar Dropdown Hover BackGround color */
    --NavDropdownHover-bg-Color: #555555; /* gray */
    /* Navigation Bar Dropdown Hover Font color */
    --NavDropdownHoverFontColor: #EEEEEE; /* grayish white */
    /* Navigation Bar Current button BackGround color */
    --NavCurrent-bg-Color: #006600; /* green */
    /* Navigation Bar Current button Font color */
    --NavCurrentFontColor: #FFFFFF; /* white */
}