0

I don't know what I'm doing wrong here. I created a page with accordians, the jquery script loads just fine but when I link the CSS stylesheet, no CSS shows up. It is not an external stylesheet, I posted the CSS in the same stylesheet used for all pages which is styles.css

The page

http://scarincihollenbeck.com/law-practices/

When it's inspected the stylesheet says it loaded but It doesn't display anything. Been stuck for hours, any help would be appreciated.

*:before,
*:after {
 -webkit-border-sizing: border-box;
 -moz-border-sizing: border-box;
  border-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

 .container-lawpractice {
  width: 90%;
  margin: -10px auto;
}

 .container-lawpractice > ul {
  list-style: none;
  padding: 0px;
  margin: 0 0 20px 0;
}

 .dropdown a {
  text-decoration: none;
 }

 .dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
   color: white;
   background: #d02422;
  -moz-box-shadow: 0 1px 0 #1a1a1a inset, 0 -1px 0 black inset;
  -webkit-box-shadow: 0 1px 0 #1a1a1a inset, 0 -1px 0 black inset;
   box-shadow: 0 1px 0 #1a1a1a inset, 0 -1px 0 black inset;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
  padding: 10px 17px;
  text-align: left;
  border-left: 10px solid black;
  font-family: 'DIN1451W01-Mittelschrif', Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 600;
 }

  .dropdown [data-toggle="dropdown"]:hover {
   background: #121211;
   color: white;
   border-left: 10px solid #d02422;
  }

  .dropdown .icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.8em;
  color: #fff;
  top: 14px;
  right: 10px;
  }

  .dropdown .icon-arrow.open {
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
   transition: transform 0.6s;
  }

  .dropdown .icon-arrow.close {
 -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -moz-transition: -moz-transform 0.6s;
  -o-transition: -o-transform 0.6s;
  -webkit-transition: -webkit-transform 0.6s;
  transition: transform 0.6s;
 }

 .dropdown .icon-arrow:before {
  content: '\25BC';
  }

  .dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
  list-style: none;
  padding: 0;
 margin: 0;
  }

 .dropdown .dropdown-menu li {
  padding: 0;
  }

  .dropdown .dropdown-menu li a {
  display: block;
  color: black;
   background: #EEE;
  -moz-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
  -webkit-box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
   box-shadow: 0 1px 0 white inset, 0 -1px 0 #d4d4d4 inset;
   text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3);
   padding: 10px 10px;
   font-size: 13px;
   text-indent: 30px;
   font-family: 'DIN1451W01-Mittelschrif', Arial, Helvetica, sans-serif;
   border-left: 10px solid #d02422;
   font-weight: 500;
  }

  .dropdown .dropdown-menu li a:hover {
  background: #FFFFFF;
  color: #d02422;
  font-weight: 700;
  border-left: 10px solid black;
  }

  .dropdown .show,
  .dropdown .hide {
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
   -webkit-transform-origin: 50% 0%;
   transform-origin: 50% 0%;
  }

.dropdown .show {
  display: block;
  max-height: 9999px;
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -webkit-transform: scaleY(1);
  transform: scaleY(1);
  animation: showAnimation 0.5s ease-in-out;
  -moz-animation: showAnimation 0.5s ease-in-out;
  -webkit-animation: showAnimation 0.5s ease-in-out;
  -moz-transition: max-height 1s ease-in-out;
  -o-transition: max-height 1s ease-in-out;
  -webkit-transition: max-height 1s ease-in-out;
  transition: max-height 1s ease-in-out;
}

.dropdown .hide {
  max-height: 0;
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
  animation: hideAnimation 0.4s ease-out;
  -moz-animation: hideAnimation 0.4s ease-out;
  -webkit-animation: hideAnimation 0.4s ease-out;
  -moz-transition: max-height 0.6s ease-out;
  -o-transition: max-height 0.6s ease-out;
  -webkit-transition: max-height 0.6s ease-out;
  transition: max-height 0.6s ease-out;
}

@keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@-moz-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@-webkit-keyframes showAnimation {
  0% {
    -moz-transform: scaleY(0.1);
    -ms-transform: scaleY(0.1);
    -webkit-transform: scaleY(0.1);
    transform: scaleY(0.1);
  }
  40% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.04);
    -ms-transform: scaleY(1.04);
    -webkit-transform: scaleY(1.04);
    transform: scaleY(1.04);
  }
  100% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
}

@keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

@-moz-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

@-webkit-keyframes hideAnimation {
  0% {
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
  }
  60% {
    -moz-transform: scaleY(0.98);
    -ms-transform: scaleY(0.98);
    -webkit-transform: scaleY(0.98);
    transform: scaleY(0.98);
  }
  80% {
    -moz-transform: scaleY(1.02);
    -ms-transform: scaleY(1.02);
    -webkit-transform: scaleY(1.02);
    transform: scaleY(1.02);
  }
  100% {
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
  }
}

.whole-body {
    position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.full-body {
    position: relative;
  max-width: 1200px;
  margin: 5% auto;
}



.row {
  width: 100%;
  margin-left: 5%;
}

.col-sm-6 {
  width: 30%;
  float: left;
  margin: 5% 0% 0 0;
}

.box-hover{
  display: none;
  width: 75%;
  background-color: rgb(208, 36, 34);
  border: 1px solid #fff;
  height: 200px;
  margin: 15% 0 0 15%;
  padding: 5%;

}





@media  screen and (max-width: 600px) {

  .col-sm-6{width:80%;}

  .container{width:80%;}

I'm also running a bootstrap script if that's any importance. Been stuck for hours, any help would be appreciated.

0

Add the CSS to your child themes style.css file or load it using wp_enqueue_scripts

add_action( 'wp_enqueue_scripts', 'wpsites_load_custom_styles' );
function wpsites_load_custom_styles() {

    wp_register_style( 'custom-css', get_stylesheet_directory_uri() . '/your-style.css', false, '1.0.0' );
    wp_enqueue_style( 'custom-css' );

}

Source

-1

You could add to your functions.php (in child theme) a reference to just that one page (is_page('law-practices')) and enqueue just for that one page:

add_action( 'wp_enqueue_scripts', 'law_practice_enqueue_style' );
function law_practice_enqueue_style(){
   if (is_page('law-practices')){
     wp_register_style( 'law-styles', get_template_directory_uri() . 'law-style.css', false );
     wp_enqueue_style('law-style');
     }

}
-2

Please try this instead. Replace your css by : <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/stylesheets/styles.css" /> in the head section

  • Will this solve the issue? – Nilambar Jul 9 '15 at 10:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.