Custom styles

The layout and structure of needs can be highly customized.

There are three ways to do this:

  • Define own jinja template for a need
  • Provide a css file by using needs_css
  • Set own css on sphinx level

Need jinja template

Please see needs_template on the configuration page.

Sphinx-needs CSS option

A css file can be set in the conf.py file by setting needs_css. See needs_css on the configuration page for more information.

Sphinx-needs provides the following css styles:

blank.css

_images/need_blank.png

modern.css

_images/need_modern.png

dark.css

_images/need_dark.png

blank.css

/* whole NEED container */
div.need {

}

/*
Styles based on need type
*************************
The name depends on the type name.
If a type like "story" was configured in conf.py,
span.needs-story can be used for custom styles for this type.
*/

span.needs-specification {

}

span.needs-requirement {

}

/*
Single elements
***************
*/

/* The type text of a need. The part before the title starts */
span.needs-type {

}

/* The title text of need. Part between need type and need id */
span.needs-title {

}

/* The ID of a need (text behind the need title) */
span.needs-id {

}

/* Tags inside a need*/
span.needs-tag {

}

/* Status of a need */
span.needs-status {

}

/* Outgoing need links.
Applies for outgoing links inside a need and for the role :need_outgoing: */
em.need_outgoing {

}

/* Incoming need links.
Applies for incoming links inside a need and for the role :need_incoming: */
em.need_incoming {

}

/* Linked needs inside text (by using role :need:)*/
em.need {

}

modern.css

/* whole NEED */
div.need {
    background-color: #eee;
    padding: 5px 10px 5px 10px;
    margin: 5px 0px;
    border-radius: 3px;
}

span.needs-type {
    color: #444;
}

span.needs-title {
    font-weight: bold;
}

span.needs-id, a.needs-id {
    font-size: 80%;
    color: #aaa;
}

span.needs-tag {
    background-color: #ccc;
    border-radius: 5px;
    padding: 0 5px;
}

span.needs-status {
    background-color: #004b6b;
    color: #fff;
    border-radius: 5px;
    padding: 0 5px;
}

em.need_outgoing {

}

em.need_incoming {

}


/* DataTable layout*/
table.dataTable {
    border-collapse: collapse;
    border: none;
}

div.dataTables_length {
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.15em 0.75em;
    background: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none;
}

div.dataTables_length select {
    background: none;
}

/*DataTables Download Buttons*/
div.dt-buttons {
   margin-left: 10%;
}

div.dt-buttons button {
    padding: 0.1em 1em;
    border: 1px solid #999;
    border-radius: 2px;
    font-size: 0.88em;
    line-height: inherit;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    background-color: inherit;
    background-image: none;
}

dark.css

/* whole NEED */
div.need {
    background-color: #333;
    padding: 5px 10px 5px 10px;
    margin: 5px 0px;
    border-radius: 3px;
    color: #eeeeee;
}

span.needs-type {
    color: #aaa;
}

span.needs-title {
    font-weight: bold;
}

span.needs-id {
    font-size: 80%;
    color: #aaa;
}

span.needs-tag {
    background-color: #ccc;
    border-radius: 5px;
    padding: 0 5px;
    color: #333333;
}

span.needs-status {
    background-color: #004b6b;
    color: #fff;
    border-radius: 5px;
    padding: 0 5px;
}

em.need_outgoing {
    background-color: #517918;
    color: #fff;
    border-radius: 5px;
    padding: 0 5px;
}

em.need_incoming {
    background-color: #c65d09;
    color: #fff;
    border-radius: 5px;
    padding: 0 5px;
}

em.need {
    background-color: #333;
    color: #fff;
    border-radius: 5px;
    padding: 0 5px;
}


/* DataTable layout*/
table.dataTable {
    border-collapse: collapse;
    border: none;
}

div.dataTables_length {
    margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.15em 0.75em;
    background: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: none;
    color: inherit !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: inherit !important;
    border: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: none;
    background: inherit;
}

div.dataTables_length select {
    background: none;
}

.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
    color: inherit;
}

table.dataTable tbody tr {
    background-color: inherit;
}

div.dataTables_length select {
    background: none;
    color: inherit;
    border: none;
}

div.dataTables_length select option{
    background: #333;
    color: inherit;
    border: none;
}

div.dataTables_filter input {
    background: inherit;
    color: inherit;
    border: 1px solid #666;
}

div.dataTables_filter input:focus {
    outline: none;
}

table.dataTable thead th, table.dataTable thead td {
    border-bottom: inherit;
}

/*DataTables Download Buttons*/
div.dt-buttons {
   margin-left: 10%;
}

div.dt-buttons button {
    padding: 0.1em 1em;
    border: 1px solid #999;
    border-radius: 2px;
    font-size: 0.88em;
    line-height: inherit;
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    background-color: inherit;
    background-image: none;
}

button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled) {
    background-color: inherit;
    background-image: none;
    border: inherit;
}

/*DataTables Column visibility Select list*/
div.dt-button-collection {
    background-color: #333;
}

/* Button active*/
div.dt-button-collection button.dt-button:active:not(.disabled), div.dt-button-collection button.dt-button.active:not(.disabled), div.dt-button-collection div.dt-button:active:not(.disabled), div.dt-button-collection div.dt-button.active:not(.disabled), div.dt-button-collection a.dt-button:active:not(.disabled), div.dt-button-collection a.dt-button.active:not(.disabled) {
    background: #444 none;
    box-shadow: none;
}

/* Button active hover*/
button.dt-button:hover:not(.disabled), div.dt-button:hover:not(.disabled), a.dt-button:hover:not(.disabled) {
    background: #333 none;
    box-shadow: none;
}

/* Button deactivated hover*/
button.dt-button:active:not(.disabled):hover:not(.disabled), button.dt-button.active:not(.disabled):hover:not(.disabled), div.dt-button:active:not(.disabled):hover:not(.disabled), div.dt-button.active:not(.disabled):hover:not(.disabled), a.dt-button:active:not(.disabled):hover:not(.disabled), a.dt-button.active:not(.disabled):hover:not(.disabled) {
    background: #555 none;
    box-shadow: none;
}

/* DataTablesScrollWrapper*/
div.DTS div.dataTables_scrollBody {
    background: inherit;
}

Own CSS file on sphinx level

If you want to use most of the sphinx-needs internal styles but only need some specific changes for single elements, you can provide your own CSS file by register it inside your conf.py:

def setup(app):
    app.add_stylesheet('css/my_custom.css')  # may also be an URL

Hint

Do not name it custom.css if you are using Read the docs as this name is already taken.