Css not being read WP

Question

I know this is probably really easy, but I am just about ready to throw my laptop out the window with this...

I have been trying to make a bit of javascript work within my one of my web pages, but failing this I made a back up of my previous code and tried to restore what it was before... but it has completely messed up my gallery page (I haven't touched this page) and it isn't linking up with my CSS - I really don't understand it.

The images in the gallery are supposed to be horizontal not vertical.

Please help, I am very new to Wordpress and understand my coding may be amateur

Link: Gallery

/*

Theme Name: tigertone Theme URI: http://tigertonestudio.com Description: Version: 1.0 */

#clear {
clear: both;
}

body {
margin:0;
padding:0;
height: 100%;
background: url('images/bg.png') repeat;
text-align:left;
font-family: "Verdana", Arial, Helvetica, sans-serif;
font-size:.8em;
}

#brushblack {
background: url('images/brushblack.png') repeat;
height: 100%;
}

#header{
width:1000px;
height:118px;
margin: 0 auto;
padding:50px 0 25px 0;
clear: both;
}

#content {
font-family:'aller', Arial, Helvetica, sans-serif;  
margin:0 auto;
width:100%;
padding:0;
text-align:left;
vertical-align: middle; 
}

.blackcontent {
background: url('images/bgdark.png') repeat;
width:100%;
padding:40px 0;
height:100%;
overflow:hidden;
margin:0 auto;
vertical-align: middle;
}

.content{
margin:0 auto; 
width:1000px;
}

.entry {
color:#000000;
}




.ngg-albumoverview .ngg-album-compact { float: left; margin-right: 20px;}


.ngg-gallery{
width:100%;
float: left;
}

.ngg-gallery-thumbnail-box {
width: 25% !important;
float: left;
margin-bottom:10px;
border:5px
border-color:white;
}


===================
Classes Page
===================

.classes {
margin-bottom: 75px;
}

.classes {
width: 450px;
float: left;
margin: 10px 8px 0 0;
}

.classes:nth-child(4n+4) {
margin-right: 0;
}

.classes a {
text-decoration: none;
}

.classes h2,
.classes .classes-bio h2 {
font-weight: 700;
font-size: 1.5em;
text-transform: none;
margin: 15px 0 5px 12px;
}

.classes .classes-bio p {
color: #666;
line-height: 21px;
margin: 0 70px 18px 70px;
}

.classes .classes-bio p strong {
font-weight: 700;
}


.classes a.read-more {
color: #D1883E;
display: block;
margin: 12px 0 0 0px;
}

.classes a.read-more:hover {
text-decoration: underline;
}

.classes .classes-bio {
position: fixed;
width: 600px;
height: 90%;
display: none;
z-index: 9998;
padding-bottom: 10px;
background-color: #eaeaea;
}

.classes .classes-bio .close-button {
position: absolute;
top: -17px;
right: -17px;
z-index: 9999;
cursor: pointer;
}

.classes .classes-bio img.profile {
width: 442px;
margin: 25px 181px 8px;
}

.classes .classes-bio h2 {
text-align: center;
margin-bottom: 6px;
}

.classes .classes-bio {
font-size: 1.1em;
margin-bottom: 28px;
}

.classes .classes-bio p {
font-size: 0.9em;
color: #000;
text-align: center;
}


.mask {
position: absolute;
left: 0;
top: 0;
display: none;
z-index: 9997;
background-color: #000;
}

HTML:

<h1>Gallery</h1>
<div class="ngg-gallery">
<div class="ngg-galleryoverview">
<div class="ngg-gallery-thumbnail-box">
[nggallery id=1]
</div>
</div>
</p>
</div>

I'm getting a 403 Forbidden error in the console for [your](http://www.scpolechamps.co.uk/wp-content/uploads/useanyfont/uaf.css?ver=3.8.1) stylesheet. Are you sure permissions are configured correctly? — Adrift, Feb 14 '14 at 22:56
I have been trying to create a pop up "lightbox" effect with both text and image - so that when you click on the image or read more, a pop-up with more info will come up - but I cant get it to work :( — Sarah Bond, Feb 14 '14 at 23:01
@SarahBond - Whenever you get back to your JS here is a link about WP and jQuery for reference: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers — Drewness, Feb 14 '14 at 23:02

score 3 · Answer 1 · answered Feb 14 '14 at 22:55

3

Line 396 of style.css has a missing }, could be causing your issues.

There are some un-commented comments in there too...

===================
Classes Page
===================

(and the other ones like it) Should be like this

/*
===================
Classes Page
===================*/

answered Feb 14 '14 at 22:55

Klors

2,665
2
25
42

YES! Thank you Knew it would be easy! Just need to style it now. – Sarah Bond Feb 14 '14 at 22:59
@Klors - Maybe you can get a free lesson. ;) – Drewness Feb 14 '14 at 23:01
1

I think I'd break the pole. :) – Klors Feb 14 '14 at 23:02

score 0 · Answer 2 · answered Feb 14 '14 at 22:57

0

There is a part in your styles.css file that is listed like this:

a:link{
    font-color:#000;
a:hover{
    color:#D1883E}

It looks like you are missing a closing bracket after the first a:link style block.

answered Feb 14 '14 at 22:57

Matthew Darnell

4,538
2
19
29

score 0 · Answer 3 · edited May 23 '17 at 11:49

Looks likes there's a problem with your global.js file. The jQuery library which comes with Wordpress is in no-conflict mode, which means you can't use the $ sign. Solution is to surround the code with jQuery(document).ready(function ($) {

So, in your case, change the global.js file to:

jQuery(document).ready(function ($) {    
     $('.classes a').click(function(e) {    
         e.preventDefault();

    // Get the dimensions of the user's screen
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    // Set the mask overlay to fill the entire screen
    $('.mask').css({'width':maskWidth,'height':maskHeight});

    // Fade in the mask overlay
    $('.mask').fadeTo(600, 0.7);

    // Get the dimensions of the user's browser
    var winHeight = $(window).height();
    var winWidth = $(window).width();

    // Set the bio pop-up to be in the middle of the screen
    $('.classes-bio').css('top', winHeight/2-$('.classes-bio').height()/2);
    $('.classes-bio').css('left', winWidth/2-$('.classes-bio').width()/2);

    // Fade in the bio pop-up
    $(this).parent('.classes').find('.classes-bio').delay(610).fadeIn(600);
});

// Click the mask or close button to fade out the pop-up and the mask
$('.mask, img.close-button').click(function(e) {

    $('.classes-bio').fadeOut(600);

    $('.mask').delay(610).fadeOut(600);
});

});

See more here

I don't know if it will solve your problem, but you could give it a try!

I Replaced it with your code, its hidden the pop-up information, but something is stopping it from working :( I've had some developer friends try to figure it out but we dunno whats stopping it from working :( — Sarah Bond, Feb 14 '14 at 23:32
I'm sorry, I had a syntax error on the last line. I suggest to replace the code with the one above. — Jens Cocquyt, Feb 14 '14 at 23:37
It just don't wanna work :( just baffled by it, the js seems to be perfect but it seems something is blocking it — Sarah Bond, Feb 15 '14 at 10:24

Css not being read WP

3 Answers3