treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] compass sprite with wordpress wrong path

  • I am using compass and sass for my wordpress project where the css file style.css is sibling to images folder. But the relative path isn't seem to be working here. I am missing all the images that has been created with sprite. I am trying since a 2 days and still no solution. Any help will be greatly appreciated.

  • We'd need to see a link to the site.

  • you can see that the paths are in the format of "../images/spr-s33303ddf86.png"

    but i want in "images/spr-s33303ddf86.png"

  • This might be a silly question, but have you checked that relative_assets = true in your config.rb? (That has bitten me before, and I think that had a similar issue)

  • relative_assets are in true, so the format is in the form of "../images/" but my images folder and css file style.css is sibling to each other so i need a path format like "images/" without ../ you see? ..

  • What is the images_dir set to?

    (Yes, I see, I recognize the problem)

  • its set to images_dir = "images" please help me. its a common wordpress format and it shouldn't so hard...

  • Could you post it somewhere so we can take a peek at the complete config.rb, as well as the relevant bits of your .scss file (IE the ones where you call the spiriting)?

  • actually am working in localhost. How can i show you my config.rb codes can give me any idea.

  • There's some various places to do it. Codepen is very popular in these parts, though I think that Snipt might be easier for this.

    Create two snipts, one of your config.rb, and one of the section where you create your sprites.

  • Well, the obvious thing I'm spotting is that your css directory is set to 'css', so even if your style.css is supposed to be the sibling of your images-directory, the config.rb thinks that it's supposed to be in the subdirectory css, which is the sibling of images.

    Fix that and see if that solves the issue?

    What your config.rb tells me about your structure is the following (assuming that your config.rb is in the root of your theme folder):

      config.rb  
      --images  
          --spr
              (.png files)
      --css
          style.css
      --sass
          style.sass
    

    Looking closer at your config.rb, that seems to be deliberate by whomever set it up for you, as there is functionality to move the stylesheet up one level when you save. Where did you get the setup for this, out of curiosity?

  • Your are awsome. Thanks :) a very very very thanks. The below code was moving the style.css from its css directory to one step back. I removed the code and change the css_dir to '.' ITS FIXED . Thank you again.. :) I set it up by myself. i found a post on css-tricks.

    require 'fileutils'
    on_stylesheet_saved do |file|
      if File.exists?(file) && File.basename(file) == "style.css"
        puts "Moving: #{file}"
        FileUtils.mv(file, File.dirname(file) + "/../" + File.basename(file))
      end
    end
    

    But Would you mind telling me how to mark it as solved. :(

  • You're very welcome, and good luck. If I can help with other things I'd be glad to. Unfortunately I have no clue on how to mark it as solved.