Archived

This topic is now archived and is closed to further replies.

  • 0

custom css - trying to follow Nick build a site from .../theming video


Question

Posted · Report post

I have followed Nick in the video he did showing how to make a site like Toms shoes... and all is cool until i got to the custom css navigation... I just can't seem to get it to work.. here is what it looks like he has in the video with my site info added.

 

Nick shows the custom code being pasted in at about 9:40 of the video

 

Any idea what where i am goofing up?  

I tried using single quotes in the image url without luck also

 

 

// Add background to navigation 
.navigation_wrap {background:url {"http://travel-through.us/wp-content/uploads/2012/12/graphite-nav.png"} repeat-x;height:35px;}
 
 // change the height of the menu items, make them white and uppercase
.main_nav li a {line-height:1.5em;color:@white;text-transform:uppercase;}
 
// Add a background to the menu items
.main_nav li.current_page_item a, .main_nav li a:hover
{color:white;background:url {"http://travel-through.us/wp-content/uploads/2012/12/gray-nav.png"} repeat-x;}
 
    .page-id-38 {
    
    // remove the padding around the content box
    #contentbox .hentry-pad {padding:0;}
    
    // remove the padding around the features sections
    #quickslider .content-pad {padding-top:0;}
  
    // remove the padding around the content box
    #boxes .boxes-pad {padding-top:0;}
    
  
}

Share this post


Link to post
Share on other sites

1 answer to this question

Posted · Report post

Nick would never, ever post CSS like this:

.page-id-38 {
    
    // remove the padding around the content box
    #contentbox .hentry-pad {padding:0;}
    
    // remove the padding around the features sections
    #quickslider .content-pad {padding-top:0;}
  
    // remove the padding around the content box
    #boxes .boxes-pad {padding-top:0;}
}

Not only is it incorrect, it's dangerous to the stability of your site.

 

Each CSS element MUST have an element.  .page-id-XX is only one, and it's an indicator element.  An element is something like #boxes.

 

You can have .page-id-38 #boxes .boxes-pad {  then apply your operator (in this case, padding-top and the actual instruction, which is 0 pixels, written as 0 and ending with ;}

 

Each thing you want to do on page 38 MUST be accompanied by its own elements and operators.  You cannot merge them for the sake of convenience. 

 

From what you have above, there MUST BE three, distinct CSS entries each beginning with .page-id-38 followed by the elements you've cited. Please reference http://www.w3schools.com/css/

 

And kindly don't use videos as a source of code.  They are likely to be incorrect.  Written, reliable sources, such as that link, are the only ones worth trusting.

Share this post


Link to post
Share on other sites