Jump to content
watchbill

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

Recommended Posts

watchbill    0
watchbill

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
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • paoloimperiale
      By paoloimperiale+
      Hi, 
      I was wondering if there's a way to modify the slider container size? My client would like it skinner- not as tall. How would you suggest doing that?
      Thank you.
      (this is for the paoloimperiale.com slider on the homepage) 
    • flourishdesignstudio
      By flourishdesignstudio
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • jeomiland
      By jeomiland+
      What am I missing?
      at cassclayton.com/dev I have the main  area set as 2 column format in the content-width main area. When I drag a 2-columns section onto the page under the stuff in the main left column area I get that familiar "section added, refresh page to view..." message on the screen, but refreshing the page (cmd-r or browser refresh button) makes the newly added section disappear to I can't get to it to continue.  Have just tried several time today with no success.  Have had this sort of issue before. I don't consider the page layout to be that complex, so why is DMS not remembering the new columns section on refresh?  Is there some strange, exotic setting in my browser I need to tweak? (chrome 46.0.2490.80 Macbook pro)
      Also, I have this Alzheimer issue often when adding custom CSS code - I learned from Pagelines academy to click edit in an existing section, then click in 2 different text option boxes, which eventually causes the refresh icon in the DMS options panel to appear) but even then, sometime my css code is ignored and I have to add it again and eventually it gets updated. I know, I know - blame it on all the script that makes the interface work, but this really slows down my development time. Someone please tell me I'm missing some simple thing that makes all this refresh stuff work like a champ!
      1) what is best way to Refresh after adding something if the Refresh icon does not appear (as it hardly ever does when adding CSS code)?
      2) why does my new section disappear on refresh?
      3) what's the best way to create a 2-column content area within another column area?
      Site: cassclayton.com/dev
      Thanks
×