Variables dictionary

This page shows all the Chulapa variables that you can use for theming your site. Additionally, some useful variables from Bootstrap are already listed.

Chulapa-specific variables

vars Description
navbar-chulapa-bg-color Navbar background color
navbar-chulapa-text-color Navbar text color
navbar-chulapa-hover-color Navbar text color on hover
navbar-chulapa-active-color Navbar text color for active item
navbar-chulapa-disabled-color Navbar text color for disabled item
navbar-chulapa-brand-color Navbar brand color
navbar-chulapa-brand-hover-color Navbar brand color on hover
navbar-chulapa-toggler-color Navbar color of the hamburger icon
navbar-chulapa-toggler-color-bg Navbar color of the hamburger icon background
navbar-chulapa-toggler-border-color Navbar color of the borders of the hamburger box
footer-chulapa-bg-color Footer background color
footer-chulapa-text-color Footer text color
footer-chulapa-hover-color Footer text color on hover
footer-chulapa-icon-color Footer color of the social icons
footer-chulapa-icon-hover-color Footer color of the social icons on hover
hero-chulapa-bg-color Hero header background color
hero-chulapa-text-color Hero header text color
landingpage-chulapa-bg-color Landing page background color
landingpage-chulapa-text-color Landing page text color
blockquote-chulapa-bg-color Blockquote background color
blockquote-chulapa-text-color Blockquote text color
footnote-chulapa-text-color Footnote/captions text color
pre-chulapa-bg-color Code block background color (may be overridden depending on your highlight option)
thead-chulapa-bg-color Table head background color
thead-chulapa-text-color Table head text color
pagination-chulapa-text-color Pagination text color
pagination-chulapa-text-hover-color Pagination text color on hover
pagination-chulapa-bg-hover-color Pagination background color on hover

Selected Bootstrap variables

See full set of variables here.

vars Description
primary Primary color
secondary Secondary color
success Success color
info Info color
warning Warning color
danger Danger color
light Light color
dark Dark color
enable-rounded Set to false to have square buttons
enable-responsive-font-sizes Font sizes are responsive when set to true
body-bg Body background color
body-color Body text color
link-color Link text color
font-family-base Main font family
headings-font-family Headings font family
font-size-base Base font size
headings-color Headings text color
carousel-control-color Color for carousel controls
carousel-indicator-active-bg Color for carousel indicators

Color map

The full Bootstrap color map could be modified by using these variables:

white gray-100 gray-200 gray-300
gray-400 gray-500 gray-600 gray-700
gray-800 gray-900 black blue
indigo purple pink red
orange yellow green teal
cyan