Setup Context Processors

Materialize nav comes with a context processor to use some settings to change the default base styling.

# Context Processor to work with settings
TEMPLATES = [
    {
        ...
        'OPTIONS': {
            'context_processors': [
                ...
                'materialize_nav.context_processors.get_context',
            ],
        },
    },
]

Alternative way to get the standard context for views

# views.py

from materialize_nav.context_processors import get_context


def show_page(request):
    # Get the context with the style settings
    context = get_context(site_name='demo', title='Basic Content', primary_color='teal')

    context["object"] = "MyObject"
    return render(request, "my_page.html", context)

Styling controls

Materialize nav comes with several style options used in the template context variables listed below.

• MATERIALIZE_SITE_NAME

• MATERIALIZE_TITLE

• HIDE_CONTAINER

• SHOW_SIDENAV

• FIXED_SIDENAV

• PRIMARY_COLOR

• SECONDARY_COLOR

• PRIMARY_COLOR_LIGHT

• PRIMARY_COLOR_DARK

• SUCCESS_COLOR

• ERROR_COLOR

• LINK_COLOR

If you went through the Setup Context Processors step then you can modify several settings to change the default style. This is an alternative to manually providing all of the template context variables.

# settings.py

MATERIALIZE_SITE_NAME = None  # Display this name in the navbar as the main name
MATERIALIZE_TITLE = None  # This is the page title displayed as the browser tab name

MATERIALIZE_HIDE_CONTAINER = False  # If True make the page take up the full width
MATERIALIZE_SHOW_SIDENAV = True  # If True have a menu button available to open up the side navigation menu
MATERIALIZE_FIXED_SIDENAV = False  # If True and SHOW_SIDENAV make the side navigation menu always showing

MATERIALIZE_PRIMARY_COLOR = 'materialize-red lighten-2'
MATERIALIZE_SECONDARY_COLOR = 'teal'
MATERIALIZE_PRIMARY_COLOR_LIGHT = '#e51c23'
MATERIALIZE_PRIMARY_COLOR_DARK = None
MATERIALIZE_SUCCESS_COLOR = None
MATERIALIZE_ERROR_COLOR = None
MATERIALIZE_LINK_COLOR = None

USER_THUMBNAIL_PROPERTY = 'profile.thumbnail'  # For user.profile.thumbnail
USER_BACKGROUND_PROPERTY = 'profile.background'  # For user.profile.background
# USER_THUMBNAIL = 'accounts/default_user.png'  # This is a default image
# USER_BACKGROUND_IMAGE = 'accounts/default_user.png'  # This is a default image

Styling process

There are two methods for changing the default coloring for Materialize CSS.

• The old method is to use the templatetag include_dynamic_css which would use the django template system to generate a style tag with the proper css classes overridden.

• The new method only requires using the base.html. It includes the materialize_nav/materialize_nav_colors.js file which uses javascript to create a style tag to edit the proper css classes. This method should require less work from django to change the style.