diff --git a/admin/admin_panel/img/theming/default_theme.png b/admin/admin_panel/img/theming/default_theme.png new file mode 100644 index 00000000..daf28db0 Binary files /dev/null and b/admin/admin_panel/img/theming/default_theme.png differ diff --git a/admin/admin_panel/img/theming/first_customization.png b/admin/admin_panel/img/theming/first_customization.png new file mode 100644 index 00000000..1e217ab1 Binary files /dev/null and b/admin/admin_panel/img/theming/first_customization.png differ diff --git a/admin/admin_panel/img/theming/hide_jumbotron.png b/admin/admin_panel/img/theming/hide_jumbotron.png new file mode 100644 index 00000000..e8416baf Binary files /dev/null and b/admin/admin_panel/img/theming/hide_jumbotron.png differ diff --git a/admin/admin_panel/img/theming/hide_jumbotron_view.png b/admin/admin_panel/img/theming/hide_jumbotron_view.png new file mode 100644 index 00000000..e25b88e5 Binary files /dev/null and b/admin/admin_panel/img/theming/hide_jumbotron_view.png differ diff --git a/admin/admin_panel/img/theming/jumbotron_slide_add.png b/admin/admin_panel/img/theming/jumbotron_slide_add.png new file mode 100644 index 00000000..bd246a66 Binary files /dev/null and b/admin/admin_panel/img/theming/jumbotron_slide_add.png differ diff --git a/admin/admin_panel/img/theming/theme-def-0003.png b/admin/admin_panel/img/theming/theme-def-0003.png deleted file mode 100644 index fcdf4be7..00000000 Binary files a/admin/admin_panel/img/theming/theme-def-0003.png and /dev/null differ diff --git a/admin/admin_panel/img/theming/theme-def-0003a.png b/admin/admin_panel/img/theming/theme-def-0003a.png deleted file mode 100644 index a564a584..00000000 Binary files a/admin/admin_panel/img/theming/theme-def-0003a.png and /dev/null differ diff --git a/admin/admin_panel/img/theming/theme-def-0003b.png b/admin/admin_panel/img/theming/theme-def-0003b.png deleted file mode 100644 index a3d8a31a..00000000 Binary files a/admin/admin_panel/img/theming/theme-def-0003b.png and /dev/null differ diff --git a/admin/admin_panel/img/theming/theme-def-0003c.png b/admin/admin_panel/img/theming/theme-def-0003c.png deleted file mode 100644 index afcc7789..00000000 Binary files a/admin/admin_panel/img/theming/theme-def-0003c.png and /dev/null differ diff --git a/admin/admin_panel/img/theming/theme-def-0007h.png b/admin/admin_panel/img/theming/theme-def-0007h.png index e144b87d..3a566aa1 100644 Binary files a/admin/admin_panel/img/theming/theme-def-0007h.png and b/admin/admin_panel/img/theming/theme-def-0007h.png differ diff --git a/admin/admin_panel/img/theming/theme_properties.png b/admin/admin_panel/img/theming/theme_properties.png new file mode 100644 index 00000000..19c4afc8 Binary files /dev/null and b/admin/admin_panel/img/theming/theme_properties.png differ diff --git a/admin/admin_panel/img/theming/themes.png b/admin/admin_panel/img/theming/themes.png index 09ac2bc0..041ea813 100644 Binary files a/admin/admin_panel/img/theming/themes.png and b/admin/admin_panel/img/theming/themes.png differ diff --git a/admin/admin_panel/img/theming/view_site.png b/admin/admin_panel/img/theming/view_site.png new file mode 100644 index 00000000..24d24f8a Binary files /dev/null and b/admin/admin_panel/img/theming/view_site.png differ diff --git a/admin/admin_panel/index.rst b/admin/admin_panel/index.rst index 03850652..0345b16f 100644 --- a/admin/admin_panel/index.rst +++ b/admin/admin_panel/index.rst @@ -81,36 +81,36 @@ Jumbotron and Get Started link .. note:: Remember, everytime you want to apply some changes to the Theme, you **must** save the Theme and reload the GeoNode browser tab. In order to quickly switch back to the Home page, you can just click the ``VIEW SITE`` link on the top-right corner of the Admin dashboard. - .. figure:: img/theming/theme-def-0003c.png + .. figure:: img/theming/view_site.png :align: center The next section, allows you to define the first important Theme properties. This part involves the GeoNode main page sections. -.. figure:: img/theming/theme-def-0003.png +.. figure:: img/theming/theme_properties.png :align: center *Jumbotron and Logo options* By changing those properties as shown above, you will easily change your default home page from this -.. figure:: img/theming/theme-def-0003a.png +.. figure:: img/theming/default_theme.png :align: center *GeoNode Default Home* to this -.. figure:: img/theming/theme-def-0003b.png +.. figure:: img/theming/first_customization.png :align: center *Updating Jumbotron and Logo* -It is possible to optionally **hide** the ``Jumbotron text`` and/or the ``Call to action`` button +It is possible to optionally **hide** the ``Jumbotron text`` -.. figure:: img/theming/theme-def-0003d.png +.. figure:: img/theming/hide_jumbotron.png :align: center -.. figure:: img/theming/theme-def-0003e.png +.. figure:: img/theming/hide_jumbotron_view.png :align: center *Hide Jumbotron text and Call to action button* @@ -159,140 +159,6 @@ Selecting the above slide in a slide show and enabling slide show (using the "we .. figure:: img/theming/theme-def-0007h.png :align: center -Copyright and contact info footer -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -The default GeoNode footer does not present any type of contact info. - -.. figure:: img/theming/theme-def-0004.png - :align: center - - *Default GeoNode Footer* - -By enabling and editing the ``contact us box`` fields - -.. figure:: img/theming/theme-def-0004a.png - :align: center - - *Enable contact us box* - -it will be possible to show a simple *Contact Us* info box on the GeoNode footer section. - -.. figure:: img/theming/theme-def-0004b.png - :align: center - - *Contact Us Footer* - -Similarly, by editing the ``Copyright`` text box and/or background color - -.. figure:: img/theming/theme-def-0004c.png - :align: center - - *Copyright Text and Color* - -it will be possible to show the Copyright statement to the bottom of the page - -.. figure:: img/theming/theme-def-0004d.png - :align: center - - *Copyright* - -Partners -^^^^^^^^ - -GeoNode simple theming, allows also a ``Partners`` section, in order to easily list links to third-party institutions collaborating to the project. - -The example below shows the ``Partners`` section of `WorldBank CHIANG MAI URBAN FLOODING `_ GeoNode instance -made through integrating theming options. - -.. figure:: img/theming/theme-def-0005.png - :align: center - - *Urban-flooding GeoNode Partners Section* - -The ``Partners`` items can be managed through the ``http:///admin/geonode_themes/partner/`` Admin section - -.. figure:: img/theming/theme-def-0005a.png - :align: center - - *GeoNode Partners Admin Section* - -From here it is possible to add, modify or delete partners items. - -A new partner is defined by few elements, a ``Logo``, a ``Name``, a ``Display Name`` and a ``Website`` - -.. figure:: img/theming/theme-def-0005b.png - :align: center - - *Add a Partner* - -In order to attach or detach a ``Partner`` to an existing ``Theme`` on GeoNode, you will need to edit the Theme and go to the ``Partners`` section - -.. figure:: img/theming/theme-def-0005c.png - :align: center - - *Theme Partners Section* - -From here you will be able to either to change the ``Partners title`` text and/or select/deselect ``Partners`` from the ``multi-select`` box. - -.. note:: In order to select/deselect elements from the ``multi-select`` box, you **must** use the ``CTRL+CLICK`` button combination. - -Privacy Policies and Cookie settings -^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ - -By enabling the ``Cookies Law Info Bar`` checkbox (``True`` by default) - -.. figure:: img/theming/theme-def-0006.png - :align: center - - *Cookies Law Info Bar checkbox* - -it will be possible to allow GeoNode presenting the `Privacy Policies and Cookie settings` pop-ups and links at the bottom of the home page - -.. figure:: img/theming/theme-def-0006a.png - :align: center - - *Cookies Law Info Bar* - -There are plenty of options available, allowing you to customize contact info as long as colors of the bar and page. - -One of the most important to consider it is for sure the ``Cookie law info bar text`` - -.. figure:: img/theming/theme-def-0006b.png - :align: center - - *Cookie law info bar text* - -The default text contained in this section is the following one - -.. code-block:: html - - This website uses cookies to improve your experience, - check this page for details. - We'll assume you're ok with this, but you can opt-out if you wish. - - -The text can be changed and customized, of course. Nevertheless it points by default to the following page - -.. code-block:: shell - - /privacy_cookies/ - -aka `http:///privacy_cookies/` - -.. figure:: img/theming/theme-def-0006c.png - :align: center - - */privacy_cookies/ Default Page* - -The page contains a default generic text along with some placeholders, which, most probably, won't feet your needs. - -In order to change this you have two options: - -1. Change the link reported into the ``Cookie law info bar text`` section, to make it pointing to an external/static page. - -2. Change the contents of ``/geonode/templates/privacy-cookies.html`` Django template accordingly to your needs; this is basically a plain ``HTML`` page which can be easily customized by using a standard text editor. - Switching between different themes ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ @@ -848,7 +714,7 @@ In other words the options available from the :guilabel:`select-boxes` of the :g :align: center *Metadata Completeness* - + Even if not all the fields have been filled, the system won't prevent you to update the metadata; this is why the ``Mandatory`` fields are mandatory to be fully compliant with an ``ISO 19115`` metadata schema, but are only recommended to be compliant with GeoNode. @@ -1128,7 +994,7 @@ The hierarchical structure of a custom ``Menu`` is the following one: :align: center *Create a new Menu from the Admin panel* - + You will need to provide: * A ``Title``, representing the name of the ``Menu`` visible by the users @@ -1158,7 +1024,7 @@ This small section won't cover entirely the GeoNode OAuth2 security integration, Here we will focus mainly on the :guilabel:`Admin > DJANGO/GEONODE OAUTH TOOLKIT` panel items with a specific attention to the ``Access tokens`` management. -The :guilabel:`Admin > DJANGO/GEONODE OAUTH TOOLKIT` panel (as shown in the figure below) allows an admin to manage everything related to +The :guilabel:`Admin > DJANGO/GEONODE OAUTH TOOLKIT` panel (as shown in the figure below) allows an admin to manage everything related to GeoNode OAuth2 grants and permissions. As better explained in other sections of the documentation, this is needed to correctly handle the communication between GeoNode and GeoServer. @@ -1170,7 +1036,7 @@ As better explained in other sections of the documentation, this is needed to co Specifically from this panel an admin can create, delete or extend OAuth2 ``Access tokens``. -The section :ref:`oauth2_tokens_and_sessions` better explains the concepts behind OAuth2 sessions; we want just to refresh the mind here +The section :ref:`oauth2_tokens_and_sessions` better explains the concepts behind OAuth2 sessions; we want just to refresh the mind here about the basic concepts: * If the `SESSION_EXPIRED_CONTROL_ENABLED <../../basic/settings/index.html#session-expired-control-enabled>`_ setting is set to `True` (by default it is set to `True`) @@ -1265,4 +1131,4 @@ force its session to expire. Remember that the user could activate another session by logging-in again on GeoNode with its credentials. -In order to be sure the user won't force GeoNode to refresh the token, reset first its password or de-activate it. \ No newline at end of file +In order to be sure the user won't force GeoNode to refresh the token, reset first its password or de-activate it. diff --git a/basic/theme/img/admin_menu.png b/basic/theme/img/admin_menu.png new file mode 100644 index 00000000..85fd4919 Binary files /dev/null and b/basic/theme/img/admin_menu.png differ diff --git a/basic/theme/img/css_override.png b/basic/theme/img/css_override.png index e23ca5a0..9bbbde42 100644 Binary files a/basic/theme/img/css_override.png and b/basic/theme/img/css_override.png differ diff --git a/basic/theme/img/custom_home.png b/basic/theme/img/custom_home.png new file mode 100644 index 00000000..6b897358 Binary files /dev/null and b/basic/theme/img/custom_home.png differ diff --git a/basic/theme/img/customized_geonode_project_home.png b/basic/theme/img/customized_geonode_project_home.png index 8a1b884d..31df8231 100644 Binary files a/basic/theme/img/customized_geonode_project_home.png and b/basic/theme/img/customized_geonode_project_home.png differ diff --git a/basic/theme/img/inspect_element.png b/basic/theme/img/inspect_element.png index 19da2767..e9168d36 100644 Binary files a/basic/theme/img/inspect_element.png and b/basic/theme/img/inspect_element.png differ diff --git a/basic/theme/img/inspect_element_old.png b/basic/theme/img/inspect_element_old.png new file mode 100644 index 00000000..19da2767 Binary files /dev/null and b/basic/theme/img/inspect_element_old.png differ diff --git a/basic/theme/img/logo_override.png b/basic/theme/img/logo_override.png index bcc06119..6c4b06a0 100644 Binary files a/basic/theme/img/logo_override.png and b/basic/theme/img/logo_override.png differ diff --git a/basic/theme/img/theme_admin_1.png b/basic/theme/img/theme_admin_1.png new file mode 100644 index 00000000..c9ef753b Binary files /dev/null and b/basic/theme/img/theme_admin_1.png differ diff --git a/basic/theme/img/theme_admin_2.png b/basic/theme/img/theme_admin_2.png new file mode 100644 index 00000000..bedff841 Binary files /dev/null and b/basic/theme/img/theme_admin_2.png differ diff --git a/basic/theme/img/themes_admin_section.png b/basic/theme/img/themes_admin_section.png new file mode 100644 index 00000000..a46844f1 Binary files /dev/null and b/basic/theme/img/themes_admin_section.png differ diff --git a/basic/theme/index.rst b/basic/theme/index.rst index 185759d9..16002433 100644 --- a/basic/theme/index.rst +++ b/basic/theme/index.rst @@ -10,8 +10,6 @@ Theming your GeoNode Project ============================ There are a range of options available to you if you want to change the default look and feel of your :ref:`geonode-project`. -Since GeoNode’s style is based on `Bootstrap `_ you will be able to make use of all that Bootstrap has to offer in terms of theme customization. -You should consult Bootstrap’s documentation as your primary guide once you are familiar with how GeoNode implements Bootstrap and how you can override GeoNode’s theme and templates in your own project. Logos and graphics ^^^^^^^^^^^^^^^^^^ @@ -35,30 +33,40 @@ Let’s walk through an example of the steps necessary to change the default log .. code-block:: console - $ sudo wget https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Service_mark.svg/500px-Service_mark.svg.png - $ sudo chown -Rf geonode: . + $ wget https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Service_mark.svg/500px-Service_mark.svg.png + $ wget https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Wikimapia_logo_without_label.svg/426px-Wikimapia_logo_without_label.svg.png -O logo.png -#. Change to the :file:`css` directory: +#. Create snippets directory : .. code-block:: console $ cd ../../.. + $ mkdir /templates/geonode-mapstore-client/snippets + $ cd /templates/geonode-mapstore-client/snippets -#. Override the CSS that displays the logo by editing :file:`/static/css/site_base.css` with your favorite editor and adding the following lines, making sure to update the width, height, and URL to match the specifications of your image. +#. Create a new HTML file named :file:`brand_navbar.html` .. code-block:: console - $ sudo vi site_base.css + $ sudo vi brand_navbar.html .. code-block:: css - .navbar-brand { - width: 350px; - height: 80px; - background: transparent url("../img/500px-Service_mark.svg.png") no-repeat; - background-size: 300px 70px; - background-position-y: center; - } + {% extends "geonode-mapstore-client/snippets/brand_navbar.html" %} + {% load static %} + {% block extra_style %} + + {% endblock %} + {% block logo_src %} + {% static 'img/logo.png' %} + {% endblock %} #. Restart your GeoNode project and look at the page in your browser: @@ -74,12 +82,11 @@ Let’s walk through an example of the steps necessary to change the default log Visit your site at http://localhost/ or the remote URL for your site. -.. figure:: img/logo_override.png - :align: center + .. figure:: img/logo_override.png + :align: center - *Custom logo* + *Custom logo* -You can see that the header has been expanded to fit your graphic. In the following sections you will learn how to customize this header to make it as you want. .. note:: You should commit these changes to your repository as you progress through this section, and get in the habit of committing early and often so that you and others can track your project on GitHub. @@ -94,76 +101,67 @@ In the last screenshot, you saw that the main area in the homepage is covered up First, we’ll walk through the steps necessary to displace it downward so it is no longer hidden, then change the background color of the header to match the color in our logo graphic. -#. Reopen :file:`/static/css/site_base.css` in your editor: +#. Reopen :file:`/static/css/brand_navbar.html` in your editor: .. code-block:: console - $ cd /home/geonode/my_geonode/my_geonode/static/css - $ sudo vi site_base.css + $ cd /templates/geonode-mapstore-client/snippets + $ sudo vi brand_navbar.html -#. Add the following CSS rules to consider the expanded header height: - .. code-block:: css - - #wrap { - margin-top: 100px !important; - padding-top: 0px; - } - -#. Add a rule to change the background color of the header to match the logo graphic: +#. Append a rule to change the background color of the header to match the logo graphic: .. code-block:: css - .navbar-inverse { + #gn-brand-navbar { + .... background-color: #ff0000 !important; } -#. Add a background image for the *hero* section: +#. Create new file to manipulate *hero* section: - .. code-block:: css + .. code-block:: console - .jumbotron { - background: url("https://cdn.pixabay.com/photo/2017/09/16/16/09/sea-2755908_960_720.jpg") no-repeat !important; - background-size: cover !important; - } + $ cd /templates/geonode-mapstore-client/snippets + $ sudo vi hero.html -#. Your project CSS file should now look like this: +#. Add the following code to change the background image and font for the *hero* section: .. code-block:: css - .navbar-brand { - width: 350px; - height: 150px; - background: transparent url("../img/500px-Service_mark.svg.png") no-repeat; - background-size: 300px 100px; - background-position-y: center; - } - - #wrap { - margin-top: 100px !important; - padding-top: 0px; - } - - .navbar-inverse { - background-color: #ff0000 !important; - } - - .jumbotron { - background: url("https://cdn.pixabay.com/photo/2017/09/16/16/09/sea-2755908_960_720.jpg") no-repeat !important; - background-size: cover !important; - } + {% extends "geonode-mapstore-client/snippets/hero.html" %} + {% block extra_style %} + + {% endblock %} #. Collect the static files into STATIC_ROOT, restart the development server and reload the page: - .. code-block:: console + .. code-block:: console $ python manage.py collectstatic $ sudo service apache2 restart -.. figure:: img/css_override.png - :align: center + .. figure:: img/css_override.png + :align: center - *CSS override* + *CSS override* You can continue adding rules to this file to override the styles that are in the GeoNode base CSS file which is built from `base.less `_. @@ -174,142 +172,107 @@ You can continue adding rules to this file to override the styles that are in th *Screenshot of using browser debugger to inspect the CSS overrides* -Templates and static pages -^^^^^^^^^^^^^^^^^^^^^^^^^^ - -Now that we have changed the default logo and adjusted our main content area to fit the expanded header, the next step is to update the content of the homepage itself. -Your GeoNode project includes two basic templates that you will use to change the content of your pages. - -The file :file:`site_base.html` (in :file:`/templates/`) is the basic template that all other templates inherit from and you will use it to update things like the header, navbar, site-wide announcement, footer, and also to include your own JavaScript or other static content included in every page in your site. -It's worth taking a look at `GeoNode's base file on GitHub `_. -You have several blocks available to you for overriding, but since we will be revisiting this file in future sections of this guide, let's just look at it for now and leave it unmodified. - -Open :file:`/templates/site_base.html` in your editor: - -.. code-block:: console - - $ cd /home/geonode/my_geonode/my_geonode/templates - $ sudo vi site_base.html - -You will see that it extends from :file:`base.html`, which is the GeoNode template referenced above and it currently only overrides the ``extra_head`` block to include our project's :file:`site_base.css` which we have modified in the previous section. - -.. code-block:: html - - {% extends "base.html" %} - {% block extra_head %} - - {% endblock %} - -You can see on `line 189 of the GeoNode base.html template `_ that this block is included in an empty state and is set up specifically for you to include extra CSS files as your project is already set up to do. - -| The file :file:`site_index.html` is the template used to define your GeoNode project's homepage. - Let's actually override this template. -| It extends GeoNode's default :file:`index.html` template and gives you the option to override specific areas of the homepage like the *hero area*, but it also allows you leave other sections as they are. - You are of course free to override the sections which you prefer, the following steps give you an example. +Modify GeoNode Homepage +^^^^^^^^^^^^^^^^^^^^^^^ -1. Open :file:`/templates/site_index.html` in your editor. +So far we learned how to modify some template sections of your GeoNode main page. +You can do it individually per section template, adding a new page under +:file:`/templates/geonode-mapstore-client/snippets` folder with the +section name (ex: :file:`brand_navbar.html`) or by extending the base template file +:file:`custom_theme.html` where you can add different theme settings in one place. -2. Edit the first ``

`` element inside the ``
`` to say something other than "Welcome": +#. Remove the previous `hero` section :file:`hero.html` file: - .. code-block:: html - -

{{custom_theme.jumbotron_welcome_title|default:_("GeoNode Project Example")}}

- - .. warning:: Pay attention to the ``custom_theme.jumbotron_welcome_title`` part, if you delete it you will cannot use the "admin-based" theme customization option (see :ref:`simple-theming`) - -3. Edit the introductory paragraph to say something about your GeoNode project: + .. code-block:: console - .. code-block:: html + $ rm /templates/geonode-mapstore-client/snippets/hero.html -

-

{{custom_theme.jumbotron_welcome_content|default:_("This GeoNode has been customized through my GeoNode Project.")}}

-

+#. Create a new :file:`custom_theme.html` file: - .. warning:: Take care of the ``custom_theme.jumbotron_welcome_content`` if you are using the "admin-based" theme customization option (see :ref:`simple-theming`) + .. code-block:: console -4. Your edited ``site_index.html`` file should now look like this: + $ cd /templates/geonode-mapstore-client/snippets + $ sudo vi custom_theme.html - .. code-block:: html - {% extends 'index.html' %} - {% load i18n %} +#. Add the following content to this page: - {% comment %} - This is where you can override the hero area block. You can simply modify the content below or replace it wholesale to meet your own needs. - {% endcomment %} + .. code-block:: css - {% block hero %} -
-
-

{{custom_theme.jumbotron_welcome_title|default:_("GeoNode Project Example")}}

-

-

{{custom_theme.jumbotron_welcome_content|default:_("This GeoNode has been customized through my GeoNode Project.")}}

- {% if not custom_theme.jumbotron_cta_hide %} -

- - {{custom_theme.jumbotron_cta_text|default:_("Get Started »")}} - -

- {% endif %} -
-
+ {% load static %} + {% block content %} + {% endblock %} -5. Collect the static files into STATIC_ROOT, restart the development server and reload the page to see the changes: +#. Restart httpd server .. code-block:: console $ python manage.py collectstatic $ sudo service apache2 restart +#. Your customized layout should be similar to the next picture: + .. figure:: img/customized_geonode_project_home.png :align: center - *Customized Geonode Project Home Page* - -Other theming options -^^^^^^^^^^^^^^^^^^^^^ - -You are able to change any specific piece of your GeoNode project’s style by adding CSS rules to site_base.css, but since GeoNode is based on Bootstrap, there are many pre-defined themes that you can simply drop into your project to get a whole new look. -This is very similar to `WordPress `_ themes and it is a powerful and easy way to change the look of your site without much effort. - -Bootswatch -~~~~~~~~~~ - -From `Bootswatch `_ you can download ready-to-use themes for Bootstrap-based website. - -.. warning:: Currently GeoNode uses the 3.3.7 version of Bootstrap, so `suitable Bootswatch themes `_ should have been built for the same version. - -The following steps will show you how to use a theme from Bootswatch in your own GeoNode Project. +#. Edit title and intro message -1. Download the `Bootswatch themes for Bootstrap v3.3.7 archive `_ and extract it on some folder in your disk. +Login as administrator on GeoNode and go to ``Admin`` page: -2. Select a theme (in this example we will use *Sandstone*) and copy the ``bootstrap.css`` file inside the theme folder to the ``/static/css`` (the static folder of your GeoNode Project). - -3. Update the ``site_base.html`` template to include this file. It should now look like this: - - .. code-block:: console + .. figure:: img/admin_menu.png + :align: center - $ cd /templates - $ sudo vi site_base.html +Create a new theme under `GeoNode Themes Library` and ``Themes``: - .. code-block:: html + .. figure:: img/themes_admin_section.png + :align: center - {% extends "base.html" %} - {% block extra_head %} - - - {% endblock %} +Add a ``Name``, ``Description`` and turn on ``Is enabled`` option. +At the bottom, add a ``Jumbotron title`` and ``Jumbotron content``. +This will override the default GeoNode welcome title and message. +Click ``Save`` at the bottom in the end. -5. Collect the static files into STATIC_ROOT, restart the development server and reload the page: + .. figure:: img/theme_admin_1.png + :align: center - .. code-block:: console + .. figure:: img/theme_admin_2.png + :align: center - $ python manage.py collectstatic - $ sudo service apache2 restart +After this, reload your GeoNode homepage. The output should be similar to this: - .. figure:: img/bootswatch_theme.png + .. figure:: img/custom_home.png :align: center - - *Bootswatch Theme for the Geonode Project*