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 |
indexcards-chulapa-border-color |
Border color of cards on indexcategory layout |
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 |