Just cloned the basic_project and trying to customize by following this - http://pinaxproject.com/docs/0.7/tabs/#ref-tabs
Created a new app "myapp", added the new tab to the right_nav and edited the "site_tabs.css" as well.
However when I click on the tab, although the page does change to myapp, the background color of the tab doesn't change.
This line in the documentation - Create a myapps/base.html template that all pages under that tab will extend. Make sure it defines a block body_class with content myapp is confusing me.
What is that "body_class" with content myapp ?, is it some "div" with the class having "{% block body_class%}" ?
My code of the myapp page is pretty simple right now -
{% extends "site_base.html" %}
{% load i18n %}
{% load ifsetting_tag %}
{% block head_title %}
{% trans "Custom App page" %}
{% endblock %}
< div class="myapp">
< h1 >
{% trans "Custom App page" %}</h1>
{% if user.is_authenticated %}
< p >You are signed in !!</p>
{% else %}
< p >You are NOT signed in !!</p>
{% endif %}
< /div >
The site_base.css is as follows -
body.profile #tab_profile a,
body.myapp #tab_myapp a,
body.notices #tab_notices a
{
color: #000; /* selected tab text colour */
}
body.profile #tab_profile,
body.myapp #tab_myapp,
body.notices #tab_notices
{
margin: 0; /* to compensate for border */
padding: 5px 0 5px;
background-color: #DEF; /* selected tab colour */
border-left: 1px solid #000; /* tab border */
border-top: 1px solid #000; /* tab border */
border-right: 1px solid #000; /* tab border */
}
Any pointers would be great. Thanks.
Just define a block named
body_classinside yoursite_base.htmlwith the contentmyapplike this:This will override the block defined in
base.html.It is probably used to by CSS to make your tab active. See the example at the bottom of the documentation.
Now, if you're opening pages that use your template, the body tag looks like this:
Therefore the CSS selector above can match for your tab.