How do I add another css to Bootstrap?


Tags: html,css,twitter-bootstrap

Problem :

I am building a Bootstrap site and have a css (with function to show a sticky note post-it) from another project I want to implement.

When the css is loaded in the index.html, the menu in Bootstrap gets shadow effect from the sticky-css - how do I code the css to only show in ?

The sticky.css file:

@import url(http://fonts.googleapis.com/css?family=Reenie+Beanie);
@import url(http://fonts.googleapis.com/css?family=Patrick+Hand+SC);

.sticky.div:sn {
      margin: 0 auto;
}

.sticky h1,.sticky p{
  font-family:"Reenie Beanie","Ruthie";
  line-height: 100%;
  font-weight:normal;
}

.sticky ul,.sticky li{
  list-style:none;
}
.sticky  ul{
  overflow:hidden;
  padding:2em;
}

.sticky ul li{
  margin:1em;
  float:left;
}

.sticky ul li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:12em;
  width:12em;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}

.sticky ul li h1{
   font-family:"Reenie Beanie","Ruthie";
line-height: 90%;
  font-weight:bold;
  padding-bottom:10px;
}
.sticky ul li p{

  font-size:90%;
}

.sticky ul li:nth-child(even) a{
  -o-transform:rotate(4deg);
  -webkit-transform:rotate(4deg);
  -moz-transform:rotate(4deg);
  position:relative;
  top:5px;
  background:#cfc;
}
.sticky ul li:nth-child(3n) a{
  -o-transform:rotate(-3deg);
  -webkit-transform:rotate(-3deg);
  -moz-transform:rotate(-3deg);
  position:relative;
  top:-5px;
  background:#ccf;
}
.sticky ul li:nth-child(5n) a{
  -o-transform:rotate(5deg);
  -webkit-transform:rotate(5deg);
  -moz-transform:rotate(5deg);
  position:relative;
  top:-10px;
}
.sticky ul li a:hover,ul li a:focus{
  box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
  -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  position:relative;
  z-index:5;
}
.sticky ol{text-align:center;}
.sticky ol li{display:inline;padding-right:1em;}
.sticky ol li a{color:#fff;}


Solution :

Just add a custom class to your unordered list like this:

<ul class="sticky-thing">
    <li><!--your sticky list items --></li>
    <li><!--your sticky list items --></li>
    <li><!--your sticky list items --></li>
    <li><!--your sticky list items --></li>
</ul>

And then add .sticky-things to all the ul tags in your custom css like this:

ul.sticky-thing li{
  margin:1em;
  float:left;
}
ul.sticky-thing li a{
  text-decoration:none;
  color:#000;
  background:#ffc;
  display:block;
  height:14em;
  width:14em;
  padding:1em;
  -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  box-shadow: 5px 5px 7px rgba(33,33,33,.7);
  -moz-transition:-moz-transform .15s linear;
  -o-transition:-o-transform .15s linear;
  -webkit-transition:-webkit-transform .15s linear;
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
  -moz-transform:rotate(-6deg);
}
/* other ul properties */

And your sticky css will be independent from the bootstrap css.

Here's a modified version of your jsfiddle with a dummy bootstrap navbar (menu) added along with the above codes: http://jsfiddle.net/AndrewL32/e15hfqg1/2/


    CSS Howto..

    How to achieve two multi-step forms, one form on each side using CSS transformation

    How do I put a horizontal line/border right in the middle of a table row?

    How to make horizontal lines sit beside circle bullets using CSS

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    How to use css value for javascript in IF-THEN construction? [closed]

    CSS Flexbox : How to construct a specific layout

    Avoid children to interfer with the parents hover. (or how to .stop(false,true) a css transition)

    how to replace text with image in html/css

    I was wondering how I would make an image appear when I hover over another image [closed]

    How to make Media Query work when IE loads?

    How to wrap text in table cell without wrapping child elements

    jQuery UI sortable: how to leave css values of changed items untouched?

    If div is visible, than show that content in other div with jQuery

    How to write syntax in internal css to external css?

    How to FadeIn a parent element and then it's child elements with a slight Delay (CSS Only)

    How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

    How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?

    HTML & CSS: How to create four equal size tabs that fill 100% width?

    how to decrease the height of content area for

    with css?

    how to align a sidebar to the right with css?

    how i can select some attribute value from in line css

    how to set primefaces datatable columns padding with CSS padding

    How do I make the background fit the full size of the screen no matter what size the monitor is?

    CSS: How to produce rounded boxed list

    How to combine this css?

    C# How to base64 encode background gradient

    How to make a rectangle mask with css

    How to properly use CSS in GWTP?

    How to change font of select list items in the drop down

    How to set offset on (selectmenu) overlays in jQuery Mobile [using a fixed header toolbar]?