Customization

Customization

This project was designed to be generic and customizable. At minimum, you will want to update templates to include your event's name and logo, but you may customize them to whatever degree you wish. See file structure for more details about templates.

Core event settings and constants, such as cutoff dates, are kept at the bottom of the settings file. These settings can be imported and used in any view, form, or in general any other python file. See the Django docs on settings to read more about how to use them.

Some settings you will definitely want to change are:

• HACKATHON_NAME - The name of your hackathon, for use in templates
• DEFAULT_FROM_EMAIL - This can be used in templates, and it will also be used by Django's email system)
• CONTACT_EMAIL - By default, the same as DEFAULT_FROM_EMAIL. The email users should contact you at, for use in templates
• REGISTRATION_OPEN_DATE - When registration opens
• REGISTRATION_CLOSE_DATE - When registration closes
• EVENT_START_DATE - When the event starts
• EVENT_END_DATE - When the event ends
• MEDIA_ROOT - The path on the server where user-uploaded files will end up, including resumes

You will also need to set the necessary settings for your email server, so that Django can send emails to users. Read about those settings here.

Near the top of the settings file, you must also set ALLOWED_HOSTS and CORS_ORIGIN_REGEX_WHITELIST for your domain.

For convenience, some constants have been passed into the context of all Jinja templates by default, so they can be used right away. See the Jinja2 config file for full details.

Branding and Styling

Both the Event App and Dashboard App are styled by seperate SCSS files found in their respective directories.

Event App

Warning: Deleting items in styles.css, _mixins.scss, and _variables.scss will mess up styling throughout all template pages. Please read the following carefully and make sure you know what you're doing when you're modifying the aforementioned files.

Materialize is the CSS framework that the Event App uses. Review their documentation to get a further understanding of how the template is styled.

In order to determine the original source of a class, class names in kebab notation are from Materialize and class names in camel case are found in styles.scss. We recommend you follow this convention when adding your own classes.

SCSS mixins are stored in _mixin.scss. Currently, there are 2 mixin functions: @mixin flexPosition to be used if you want to style a class with CSS Flexbox and @mixin responsive to be used in place of Media Queries. If you are not familiar with mixins, example usages of both mixins are in styles.scss.

Color, font family, and font size variables are stored in _variables.scss. Edit the values in the map to customize for your hackathons branding. For further organization, the variables are stored into maps and called using SCSS functions.

For example:

$fonts: (
    body: "Nunito",
    header: "Roboto",
); 

@function font($fonts-name) {
    @return map-get($fonts, $fonts-name); //(name of map, key)
}

Instead of calling...

h1 { font-family: $header; }

...you should get the $header variable through the font function:

h1 { font-family: font(header); }