When creating a website using Twitter Bootstrap you often find yourself using the same CSS code snippets. Below are some of mine.
/*Standard bootstrap colour palette*/
.gray-darker
{
background:#222222;
color:white;
}
.gray-dark
{
background:#333333;
color:white;
}
.gray
{
background:#555555;
color:white;
}
.gray-light
{
background:#999999;
color:white;
}
.gray-lighter
{
background:#EEEEEE;
color:#222222;
}
.brand-primary
{
background:#428BCA;
color:white;
}
.brand-success
{
background:#5CB85C;
color:white;
}
.brand-info
{
background:#5BC0DE;
color:white;
}
.brand-warning
{
background:#F0AD4E;
color:white;
}
.brand-danger
{
background:#D9534F;
color:white;
}
/* Remove colours of navigation bar */
.navbar-default, .navbar-inverse
{
background-image:none;
background-color:white;
border-color:white;
box-shadow:none;
}
/* Set default colour for inactive navigation items in inverse bar */
.navbar-inverse .navbar-nav > li > a
{
background:#222222;
color:white;
}
/* Set hover colour for inactive navigation items in inverse bar */
.navbar-inverse .navbar-nav > li > a:hover
{
background:#333333;
color:white;
}
/* Set default colour for active navigation items in inverse bar */
.navbar-inverse .navbar-nav > li.active > a
{
background:#555555;
color:white;
}
/* Set hover colour for active navigation items in inverse bar */
.navbar-inverse .navbar-nav > li.active > a:hover
{
background:#999999;
color:white;
}
/* Set default colour for inactive navigation items in default bar */
.navbar-default .navbar-nav > li > a
{
background:#222222;
color:white;
}
/* Set hover colour for inactive navigation items in default bar */
.navbar-default .navbar-nav > li > a:hover
{
background:#333333;
color:white;
}
/* Set default colour for active navigation items in default bar */
.navbar-default .navbar-nav > li.active > a
{
background:#555555;
color:white;
}
/* Set hover colour for active navigation items in default bar */
.navbar-default .navbar-nav > li.active > a:hover
{
background:#999999;
color:white;
}
/* Align figure text to centre */
figure
{
text-align:center;
}
/* Align figure images to centre */
figure img
{
margin:0 auto;
}
/* Change size and colour of glyph icons */
span.glyphicon
{
font-size:6em;
color:#222222;
}
/* Make the carousel images centre and take up the whole carousel */
.carousel > .carousel-inner > .item > img
{
margin:0 auto;
width:100%;
}
/* Lift the arrows a little higher to vertical middle and dim */
.carousel-control > .icon-prev, .carousel-control > .icon-next, .carousel-control > .glyphicon-chevron-left, .carousel-control > .glyphicon-chevron-right
{
top:40%;
opacity:0.5;
}
/* Remove the awful background gradient */
.carousel-control.right, .carousel-control.left
{
background-image:none;
}
/* Take the right arrow closer to the edge */
.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right
{
right:20%;
}
/* Take the left arrow closer to the edge */
.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left
{
left:20%;
}
No comments:
Post a Comment