SCSS Preprocessor

• 

  clairemaiers · Member · Aug 28, 2013 at 2:49 pm

  • Copy link
  • Add topic to favorites

  Hello–I’ve been making adjustments to the CSS code with the SCSS Preprocessor selected in the CSS tab. However, when I then save the changes and navigate to the blog on the web, it appears that the SCSS is not being applied. The blog appears as it does when I un-select the preprocessor and leave it on “none” on the customization page.
  I am new to CSS, so it is possible that I am missing something. However, it seems to me that the styling displayed in the customization page should match what the blog looks like in the browser.

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Aug 28, 2013 at 3:45 pm

  • Copy link

  I’m not seeing any CSS in the Customizer for http://sociallyblogging.wordpress.com . Can you post the code you are trying to use here so we can take a look at it, and can you verify you are talking about the referenced site?

• 

  clairemaiers · Member · Aug 29, 2013 at 3:35 pm

  • Copy link

  Thanks for looking at this. That is the correct site. I changed the theme back to one with no CSS since my customization was not working–sorry.

  Here is the code. This is messy: just me playing around with some features and trying to learn the ropes. When I enter this is the customization feature with the SCSS preprocessor selected, I see a navigation bar that goes horizontally across the screen (menu-fifth-floor-rooms). Also, the header image fills 100% of the content area. Neither of those things appear applied when I navigate to the blog on the web.

  body.custom-background {
  background-color: #F7F5F5;
  }

  #masthead {
  width: 100%;
  hgroup {width: 100%;}
  }

  img.header-image {
  width: 100%;
  }
  #primary {
  width: 100%;
  }

  #secondary {
  display: none;
  }

  #content {
  background-color: #FAF5F7;
  padding: 10px;
  border-radius: 0px;
  width: 70%;
  }

  hi.widget-title {
  color: #9B9898;
  }

  h2.site-description {
  color: #9B9898;
  }

  nav.site-navigation {
  display: inline;
  float: none;
  width: 100%
  }

  #navigation {
  display: block;
  }

  #menu-fifth-floor-rooms-container {
  float: none;
  display: block;
  }

  #menu-fifth-floor-rooms {
  li {
  float:left;
  }
  a
  {
  display:block;
  width:50px;
  }
  }

  aside.pages-2 {
  width: 0;
  display: none;
  }

  h1.widget-title {
  color: #9B9898;
  }

  #primary {
  img.single-featured{display: none;}
  }

• 

  designsimply · Member · Sep 16, 2013 at 4:27 pm

  • Copy link

  I tested this just now by switching my test blog to the Ascetica theme, applying your sample CSS, and selecting the “SCSS” preprocessor option. I used Chrome 29.0.1547.65 on Mac OS X 10.8.4 for testing. In my tests, I was able to apply the your CSS sample and see the things you identified working when I opened my test blog home page:

  * navigation bar that goes horizontally across the screen
  * header image fills 100% of the content area

  If you’re still having trouble, could you try clearing your browser cache as a first troubleshooting step?
  http://en.support.wordpress.com/browser-issues/#clear-your-cache-and-cookies

  If that doesn’t help, could you reply back here and let me know if you’re still having trouble?

• 

  designsimply · Member · Oct 10, 2013 at 2:25 pm

  • Copy link

  I’m closing this since there have been no new replies. If you need help in the future, please start a new help request.