Grow your CSS skills. Land your dream job.

compass sprite with wordpress wrong path

  • # February 5, 2013 at 5:25 am

    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.

    # February 5, 2013 at 5:26 am

    We’d need to see a link to the site.

    # February 5, 2013 at 5:33 am

    Here is the url

    http://www.apprs.com/onlinecamp/

    # February 5, 2013 at 5:37 am

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

    but i want in
    “images/spr-s33303ddf86.png”

    # February 5, 2013 at 6:42 am

    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)

    # February 5, 2013 at 6:52 am

    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? ..

    # February 5, 2013 at 7:25 am

    What is the images_dir set to?

    (Yes, I see, I recognize the problem)

    # February 5, 2013 at 7:37 am

    its set to images_dir = “images”
    please help me. its a common wordpress format and it shouldn’t so hard…

    # February 5, 2013 at 7:51 am

    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)?

    # February 5, 2013 at 8:04 am

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

    # February 5, 2013 at 8:10 am

    There’s some various places to do it. [Codepen](http://codepen.io) is very popular in these parts, though I think that [Snipt](http://snipt.org/) might be easier for this.

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

    # February 5, 2013 at 8:34 am

    config.rb : http://snipt.org/zOhj0
    style.sass http://snipt.org/zOib7

    # February 5, 2013 at 8:50 am

    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?

    # February 5, 2013 at 9:05 am

    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. :(

    # February 5, 2013 at 9:33 am

    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.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".