The first step is to get connected to the templates folder. To do so, see our guide here. For those that choose our out-of-the-box templates, they will be the set of templates that appear in your site(s) folder when the site is released to you. They come fully commented for you to quickly be able to modify and update them with the necessary graphics and information to get your site off the ground. The first thing you'll need to do is open base.html and update the following information:

1. SITE TITLE  
2. CUSTOM CSS  
   1. This will be anything you want to add beyond 
3. SITE FAVICON  
4. CUSTOM HEADER SCRIPTS   
   1. such as AMP specific, GAM, or Structured Content
5. WEATHER  
   1. The closest weather station from: http://www.rap.ucar.edu/weather/surface/stations.txt
6. SITE LOGO (preferably in SVG)
7. MENUS  
   1. User Menu - Named exactly like this, this menu is for logged-in users.
   2. Account Menu - Named exactly like this, this is for the login/logout buttons
   3. Main Menu - Named exactly like this, this is the main header menu.
8. SOCIAL MEDIA ICONS AND LINKS  
   1. This uses regular font-awesome icons, so create as many <li> as you need and just choose the class for the appropriate network from: https://fontawesome.com/v5.15/icons (unless you use your own).
9. TOP 728x90 AD UNIT  
   1. Add in the ad unit code from your ad server.
10. BOTTOM 728x90 AD UNIT 
    1. Add in the ad unit code from your ad server.
11. FIRST FOOTER AREA  
    1. This could be another menu, static text via a fragment, or any of the template tags in the docs.
12. SECOND FOOTER AREA  
    1. This could be another menu, static text via a fragment, or any of the template tags in the docs.
13. THIRD FOOTER AREA  
    1. This could be another menu, static text via a fragment, or any of the template tags in the docs.
14. FOURTH FOOTER AREA  
    1. This could be another menu, static text via a fragment, or any of the template tags in the docs.
15. FOOTER LOGO 
    1. Usually a smaller version of the main logo.
16. FOOTER SOCIAL MEDIA  
    1. Same as above, just larger icons.
17. FOOTER LEGALS AND COPYRIGHT  
    1. Links to flatpages and linkbacks to homepage.
18. FOOTER SCRIPTS 
    1. Any JS you need ran after the page loads.

Once this is complete you can open homepage.html and continue with the notes in this file. Typically this is just updating the sections that appear on the homepage to reflect the sections you've set up. For information on setting up sections, see here.

You'll see in base.html that we call the default bootstrap css. This is called style.css and is usually located in your static media folder. The exact path will vary depending on your site name.  Realistically only 5 lines in this file need to be modified. At the very top in the root variables sections you'll see:

--first: #008DFF;  
--second: #FF3333;  
--third: #5e50f9;
--font-family-heading: 'Roboto Condensed', sans-serif;
--font-family-body: 'Roboto', sans-serif; 

The first 3 represent the 3 main colors for your site, and updating these 3 lines will change the colors throughout the entire site.  The last 2 are the default fonts used. The CSS sheet already has fallback font sin place for older browsers that don't support CSS variables so you don't need to worry about those.  font-family-heading controls the font on all the <h> tags and font-family-body controls all of the body text on stories and flatpages. Of course, you are free to modify any of the other elements inside this file but we highly recommend that you create a custom CSS file and include it in base.html to accomplish this.

In the example above, the first variable is the main site color, the second variable is for accents and in some cases, there may be a third variable that is usually very minor things on specific pages like sponsored content headers and such. In most cases, the third color isn't used.

Save all the files and reload your site (if you're using FTP you'll need to upload the files first). If you need to clear the site cache to view your changes, you can add ?no_cache to the end of any URL.