Can't find CSS images?

CyanPrime

So I'm trying to get some CSS background images to show up, and they aren't. So far I've tried:

background: url("node_modules/nodebb-theme-nodetendo/images/cover-bg.jpg") no-repeat center center;

and

background: url("../images/cover-bg.jpg") no-repeat center center;

and even just: background: url("images/cover-bg.jpg") no-repeat center center;

But none of them are finding the image.

Can someone tell me the proper path to get theme specific images loaded?

a_5mith

@CyanPrime Use the absolute path.

http://url.com/images/cover-bg.jpg

The image would then go (as expected) into your themes images folder.

Alternatively, you would need to calculate the route from the css file you're in, to the images folder. So say you're using theme/css/less/topic.css, to go back to theme/images/image.jpg would be ../../images but also bear in mind that less files are compiled. so you'd have to take that into account too. As the actual style.css just pulls in a number of minified less files,

CyanPrime

Thank you very much for your quick reply, but it didn't seem to work. My image is in "/root/nodebb/node_modules/nodebb-theme-nodetendo/images/" on my server, and I tried using both:
http://198.199.111.179:4567/node_modules/nodebb-theme-nodetendo/images/cover-bg.jpg and http://198.199.111.179:4567/images/cover-bg.jpg in the background image variable, but it didn't work for any of them.

a_5mith

@CyanPrime

http://198.199.111.179:4567/images/cover-bg.jpg

Your theme is defined inside the app, so the url doesn't need it. It's not like php where you need the full route.
Wait, hmm. I see what you mean now. I'll take a look.

Can you try changing your image url for this one temporarily to see if it's the css file or the actual image that's not right?

http://i.imgur.com/rXZzv29.png

It's mine, no stealing.

Also make sure you restart nodebb and refresh your cache after the change.

CyanPrime

Yeah, it showed up. Also it's pretty could you tell me how to do that some day?

http://198.199.111.179:4567/

a_5mith

@CyanPrime

I cheated and used Trianglify, found one I liked, full screened it so it was full width for me, then turned it around in photoshop. The full tool gives you an SVG, but as I'm only developing, it will do for now.

As for your actual issue, I'm not 100% sure, this is one of the caveats of your theme being slightly incorrectly labelled, assuming it's still the same as it is on your github inside duplicated folders. nodebb/node_modules/nodetendo/***node_modules/nodetendo/***images

not needed

CyanPrime

Ohh, thanks for the tips.
But do you know of a way I could keep my images on the same server as the nodeJS instead of having to host them somewhere else? Cause I kinda want my images to come with the theme, you know?

julian

@CyanPrime, you'll have to create a static directory so that NodeBB will route requests to it.

In your theme, edit the file plugin.json, and add a new entry to staticDirs:

"staticDirs": {
	"vendor": "static/vendor"
},

This will map http://198.199.111.19:4567/plugins/nodebb-theme-nodetendo/vendor to node_modules/nodebb-theme-nodetendo/static/vendor. Adjust as necessary.

CyanPrime

@a_5mith I silently fixed that problem, but I'm currently using FTP to upload my themes, and won't be updating the github one until I get more done.

@julian I'm going to try that now. Thanks for letting me know about that.

CyanPrime

Okay, so it's still not working. This is what I got in my css (along with other things which are working, so I know it's seeing the CSS)

html{
	background: url("plugins/node-theme-nodetendo/images/cover-bg.jpg") no-repeat center center;
	background-size: cover;
	background-color: #000000;
}

And this is whats in my plugin.json now (which I copied from vanilla, and added @julian's lines to:

{
    "id": "nodebb-theme-vanilla",
    "library": "./lib/theme.js",
    "hooks": [
		{
			"hook": "filter:widgets.getAreas", "method": "defineWidgetAreas", "callbacked": true
		}
	],
	"staticDirs": {
		"images": "static/images"
	}
}

But I'm still getting a 404 on the image, and it's not loading up.

PS: How are you guys doing the blue thing? I tried a [quote] tag and a [code] tag, and none of those worked.

a_5mith

@CyanPrime

BBcode is very 19th centrury. Use Markdown, start each line with 4 spaces.

On a sidenote @julian, the purpley blue makes red syntaxing a right pain to read.

santoshkumarr

@julian I'm trying in the same way like you mentioned.
created: static/images in node_modules/nodebb-theme-persona
in plugin.json i have added the below line
"acpScripts": [
"lib/admin.js"
],
"staticDirs": {
"images": "./static/images"
}
and in the header file i'm trying to get the image like below
<img src="/plugins/nodebb-theme-persona/images/logoWithText.png" />

but this is not working. Please suggest what am i doing wrong