Startseite Erkunden Hilfe
Anmelden
CityApper
/
coderedcms
Mirror von https://github.com/coderedcorp/coderedcms
2
0
Fork 0
Dateien Issues 0 Wiki
Struktur: 9496dfeaf3
Branches Tags
coderedcms
/
docs
/
getting_started
/
customize_design.rst

customize_design.rst 2.1 KB
Verlauf Originalformat

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 
  1. Customize the design of your website
    2. 

  2. ====================================
    3. 

  3. 

  4. Below are a few settings that can be used to change branding, design, and layout of your website.
    5. 

  5. 

  6. Site name
    7. 

  7. ---------
    8. 

  8. 

  9. This is shown by default in the navbar, and also added to the title attribute of each page.
    10. 

  10. This can be changed in Settings > Sites > localhost. Hostname and port only need to be changed
    11. 

  11. when running in  production.
    12. 

  12. 

  13. :ref:`site-name`
    14. 

  14. 

  15. Site settings
    16. 

  16. -------------
    17. 

  17. 

  18. Under Settings > Sites in the Wagtail Admin, you will want to make sure this setting is up
    19. 

  19. to date with the proper Hostname and Port. Failure to do so can cause the Preview button on
    20. 

  20. pages to return a 500 error.
    21. 

  21. 

  22. Logo & icon
    23. 

  23. -----------
    24. 

  24. 

  25. The logo that appears in the navbar, the wagtail admin, and your favicon can be set in
    26. 

  26. Settings > Layout. Here you can also change navbar settings (based on Bootstrap CSS framework).
    27. 

  27. 

  28. :ref:`logo`
    29. 

  29. 

  30. Menu / navigation bars
    31. 

  31. ----------------------
    32. 

  32. 

  33. Navbars are top navigation elements that create a "main menu" experience. Navbars are managed
    34. 

  34. as snippets. They render from top down based on the order they were created in.
    35. 

  35. 

  36. :ref:`navbar-global`
    37. 

  37. 

  38. :ref:`navbar`
    39. 

  39. 

  40. Footers
    41. 

  41. -------
    42. 

  42. 

  43. Similar to Navbars, footers are also managed as snippets and also render top down based on
    44. 

  44. the order they were created in.
    45. 

  45. 

  46. :ref:`footer`
    47. 

  47. 

  48. Custom CSS
    49. 

  49. ----------
    50. 

  50. 

  51. A Django app called ``website`` has been created to hold your custom changes. In website/static/
    52. 

  52. there are custom.css and custom.js files that get loaded on every page by default. Adding
    53. 

  53. anything to these files will automatically populate on the site and override any default styles.
    54. 

  54. By default, Bootstrap 4 and jQuery are already included on the site.
    55. 

  55. 

  56. .. note::
    57. 

  57.     You can also use Bootstrap color and utility classes in the **Custom CSS** fields on your pages in CMS.
    58. 

  58.     Sometimes you may need more customization than Bootstrap classes can provide, in which case you can
    59. 

  59.     create your own custom classes in your CSS files and use them in your templates and in the CMS.
    60. 

  60. 

  61. Custom HTML templates
    62. 

  62. ---------------------
    63. 

  63. 

  64. To learn how to create custom HTML templates, see the advanced tutorial:
    65. 

  65. :doc:`/advanced/advanced01`.
    66.