# Change CSS images URLs

**URL:** https://discourse.roots.io/t/change-css-images-urls/4307
**Category:** sage
**Tags:** gulp
**Created:** 2015-07-22T12:30:33Z
**Posts:** 7

## Post 1 by @lancelotkiin — 2015-07-22T12:30:33Z

Hi there!

I am pretty new to the bower/gulp system and there is some mysterious things around this for me, I must admit.

So, I load jQuery UI (js and CSS) through bower.json and move JS/CSS/Images with those lines :

```
"jquery-ui": {
    "main": [
     "./jquery-ui.min.js",
     "./themes/base/jquery-ui.min.css",
     "./themes/base/images/ui-bg_flat_0_aaaaaa_40x100.png",
     "./themes/base/images/ui-bg_flat_75_ffffff_40x100.png",
     "./themes/base/images/ui-bg_glass_55_fbf9ee_1x400.png",
     "./themes/base/images/ui-bg_glass_65_ffffff_1x400.png",
     "./themes/base/images/ui-bg_glass_75_dadada_1x400.png",
     "./themes/base/images/ui-bg_glass_75_e6e6e6_1x400.png",
     "./themes/base/images/ui-bg_glass_95_fef1ec_1x400.png",
     "./themes/base/images/ui-bg_highlight-soft_75_cccccc_1x100.png",
     "./themes/base/images/ui-icons_2e83ff_256x240.png",
     "./themes/base/images/ui-icons_222222_256x240.png",
     "./themes/base/images/ui-icons_444444_256x240.png",
     "./themes/base/images/ui-icons_454545_256x240.png",
     "./themes/base/images/ui-icons_555555_256x240.png",
     "./themes/base/images/ui-icons_777620_256x240.png",
     "./themes/base/images/ui-icons_777777_256x240.png",
     "./themes/base/images/ui-icons_888888_256x240.png",
     "./themes/base/images/ui-icons_cc0000_256x240.png",
     "./themes/base/images/ui-icons_cd0a0a_256x240.png",
     "./themes/base/images/ui-icons_ffffff_256x240.png"
   ]
}
```

The problem I have is that the URLs used in jquery-ui.min.css still point to `dist/styles/images/` in main.css. Is there a way to change this ?

Many thanks!

Oh and by the way, thanks for Sage, it is a great starter theme! :smile:

---

## Post 2 by @tobyl — 2015-07-23T13:29:29Z

I think the idea is that you load just the jquery-ui package through bower, not the individual files. That way bower knows where to find the parts it needs.

Like this:

> [@Adding packages with Bower](https://discourse.roots.io/t/adding-packages-with-bower/3110):
>
> When adding packages with Bower, should I need to manually update the main.less or should it happen automatically? For instance, I ran bower install --save font-awesome But nothing was added to main.less in the automatically injected Bower dependencies section. Once I copied the font files to “fonts” and manually added the following, it worked. @import "../../bower\_components/font-awesome/less/font-awesome.less";

---

## Post 3 by @lancelotkiin — 2015-07-24T05:38:51Z

Hi!

Thanks for the answer!

So, if I understand it correctly, I just have to do this:

```
bower install --save jquery-ui
```

It was what I started to do first, but the problem is that no css were included somehow in main.css and main.scss were unchanged. That’s why I tried with overrides. Now jQuery UI css is available but the images cannot be found. Maybe there is something that I didn’t understand !

---

## Post 4 by @tobyl — 2015-07-24T13:30:06Z

There are packages which don’t always work as expected, and I’ve had to do some fiddling. I think you need to run `gulp` to get the files to process and save - after that you should see the js and css files in the `dist` folder.

---

## Post 5 by @tobyl — 2015-07-24T13:31:58Z

@austin provides some really great troubleshooting steps in this thread, they really helped me when I was struggling with this:

> [@Adding Bower Files to Sage (8.0.0)](https://discourse.roots.io/t/adding-bower-files-to-sage-8-0-0/2825):
>
> I’m pretty new to gulp but I’m giving it a try. How / where would I include other Js files from Bower? With Grunt it was pretty straight forward but now I’m pretty sure these files go into manifest.json but I’m not 100% or know how to add other files there. Any help here would be much appreicated! { "dependencies": { "main.js": { "files": ["scripts/\*\*/\*", "scripts/main.js"], "main": true }, "main.css": { "files": [ "styles/main.s…

---

## Post 6 by @lancelotkiin — 2015-07-27T05:53:27Z

Many thanks for the answer!  
I will take at this thread and see if I can do something ! :smile:

---

## Post 7 by @mvh89 — 2016-10-28T12:11:26Z

can you post the solution to this problem? :smiley:  
I am facing the exact same thing… for the last 2 hours now :frowning: