123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338 |
- Customizing HTML/CSS in Templates
- ==================================
- Overview
- ---------
- Wagtail CRX is an extension of Wagtail. You can further customize your site by overriding the
- built-in templates to suit your needs. For this tutorial, we will assume that you have basic knowledge
- of the Django templating system. You can read more about it by visiting
- `Django template language <https:
- however, you can see its contents
- by visiting the Wagtail CRX source code here: `navbar.html <https:
- text-transform: uppercase;
- }
- As you can see, you may not need to use a lot of custom CSS. Sometimes a Bootstrap class will work perfectly.
- Sometimes all you need to do is customize your template HTML and then add Bootstrap classes as needed. It all
- depends on your use case.
- For our custom navbar, we needed to un-check the "fixed navbar" option in the CMS via **Settings > CRX Settings** in
- order for it to work. Check out what our 2-tiered navbar looks like:
- .. figure:: img/advanced_two_tiered_navbar.png
- :alt: Our 2-tiered navbar.
- Our custom 2-tiered navbar on our website.
- Example 2: Footer Customization
- -------------------------------
- Our footer does not need a customized HTML template; however, we think it does need some custom CSS to make it
- look the way we want. Some of our CSS can easily be done in the CMS -- without even touching our CSS file
- }
- Then we place the ``cherry-links`` class in the **Advanced** section of the Layout Block that contains the text
- for the links, like this:
- .. figure:: img/advanced_customcss1.png
- :alt: Adding a custom class to the Layout Block
- Our custom class added to the Layout Block in CMS
- We add it to every Layout Block that needs it. In this case, we have three blocks with links.
- .. figure:: img/advanced_footer_front.png
- :alt: Our footer right now
- Our footer with the custom classes
- .. note::
- We changed the ``pt-5`` class to ``py-5`` to add padding to the top and bottom. Sometimes you will need to try and
- see which classes will give you the results that you want.
- What else could we do to make the footer look better? Take some time to play around with Bootstrap classes in the
- CMS or create some of your own classes to target elements in the footer.
- Making More Drastic CSS Changes Sitewide
- ----------------------------------------
- **What we did:** So, we went back and changed some of our classes in the HTML template and in the CMS to reflect some
- new classes that we created, such as ``bg-lightyellow`` and ``bg-cherry``.
- We've also added some additional padding classes in places where we thought it would look good.
- Finally, we decided that our logo needed an update as well. So, we swapped our original logo for one
- that fit our new color scheme.
- This is what our website looks like now with all of our customizations and updates:
- .. figure:: img/advanced_improved_website1.png
- :alt: Our customized website so far
- Our updated and customized website so far
- And this is our CSS file at the moment:
- .. code:: CSS
- /*Navbar */
- .navbar .nav-link {
- font-family: 16px;
- text-transform: uppercase;
- }
- /* Custom CSS classes */
- .cherry-links a {
- color: #f75990;
- }
- .bg-lightyellow {
- background-color: #fff685;
- }
- .bg-cherry {
- background-color: #f75990;
- }
- With the combination of using Bootstrap classes directly in the CMS and making our own classes, which we can use in the CMS
- and in custom templates, we can quickly update our site with our changes. There's more that we want to do, but now
- we have a good start on a beautiful, customized website
|