CMS Made Simple Forums

Content management as it is meant to be
https://forum.cmsmadesimple.org/

[solved] Having trouble with images in style sheets

https://forum.cmsmadesimple.org/viewtopic.php?t=72544

Page 1 of 1

[solved] Having trouble with images in style sheets

Posted: Mon Mar 16, 2015 2:55 am
by donohue
Hello!

I've downloaded a template and I am having trouble trying to get the stylesheets to work. I can hard code the link to the CSS in the template and that works fine, but if I create a new stylesheet in CMSMS and paste the same code into it, the images don't seem to be working.

Code: Select all

/*
	Minimaxing by HTML5 UP
	html5up.net | @n33co
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

/*********************************************************************************/
/* Desktop (>= 480px)                                                            */
/*********************************************************************************/

/* Basic */

	body {
		min-width: 1200px;
	}

	section, article {
		margin: 0 0 60px 0;
	}

	section:last-child, article:last-child {
		margin-bottom: 0;
	}

	section.left-content {
		padding-right: 30px;
	}

	section.right-content {
		padding-left: 30px;
	}

	section.middle-content {
		padding: 0 30px 0 30px;
	}

	ul.small-image-list img {
		width: 78px;
	}

	ul.big-image-list img {
		width: 178px;
	}

/* Reusable */

	.blog-post-image {
		width: 100%;
	}

/* Header */

	#header-wrapper {
		background-color: #007294;
		background-image: -moz-linear-gradient(top, #008dab, #007294);
		background-image: -webkit-linear-gradient(top, #008dab, #007294);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab), to(#007294));
		background-image: -ms-linear-gradient(top, #008dab, #007294);
		background-image: -o-linear-gradient(top, #008dab, #007294);
		background-image: linear-gradient(top, #008dab, #007294);
	}

	#header {
		position: relative;
		margin: 2.5% 0 2.5% 0;
		padding: 0 40px 0 40px;
		border-radius: 10px;
		border: solid 1px #006e8b;
		box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px rgba(0,0,0,0.10);
		background-color: #007b9d;
		background-image: -moz-linear-gradient(top, #008ead, #007b9d);
		background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead), to(#007b9d));
		background-image: -ms-linear-gradient(top, #008ead, #007b9d);
		background-image: -o-linear-gradient(top, #008ead, #007b9d);
		background-image: linear-gradient(top, #008ead, #007b9d);
		height: 86px;
		-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-o-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box
	}

		#header h1 {
			position: absolute;
			left: 40px;
			top: 0;
			color: #fff;
			font-size: 2.4em;
			letter-spacing: -2px;
			line-height: 86px;
		}

		#header h1 a {
			color: #fff;
			text-decoration: none;
		}
		
		#header nav {
			position: absolute;
			right: 40px;
			top: 1px;
			line-height: 84px;
			text-transform: lowercase;
			font-size: 1.3em;
			letter-spacing: -1px;
		}
		
			#header nav a {
				display: inline-block;
				text-decoration: none;
				color: #fff;
				padding: 0 25px 0 25px;
				outline: 0;
			}
			
			#header nav a.current-page-item {
				background-color: #007897;
				background-image: -moz-linear-gradient(top, #007b99, #007897);
				background-image: -webkit-linear-gradient(top, #007b99, #007897);
				background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99), to(#007897));
				background-image: -ms-linear-gradient(top, #007b99, #007897);
				background-image: -o-linear-gradient(top, #007b99, #007897);
				background-image: linear-gradient(top, #007b99, #007897);
				box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.1), 0px 0px 5px 1px rgba(255,255,255,0.1);
			}

			#header nav a:hover {
				background-color: #0882a1;
				background-image: -moz-linear-gradient(top, #0782a0, #077d9b);
				background-image: -webkit-linear-gradient(top, #0782a0, #077d9b);
				background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0), to(#077d9b));
				background-image: -ms-linear-gradient(top, #0782a0, #077d9b);
				background-image: -o-linear-gradient(top, #0782a0, #077d9b);
				background-image: linear-gradient(top, #0782a0, #077d9b);
				box-shadow: inset 0px 1px 5px 1px rgba(0,0,0,0.05), 0px 0px 5px 1px rgba(255,255,255,0.05);
			}

/* Banner */

	#banner-wrapper {
		background: #c8d2bc url([[root_url]]/images/minimaxing/bg1.png);
		padding: 2em 0;
	}

	#banner {
		position: relative;
		width: 1160px;
		height: 265px;
		box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.10);
		border-radius: 10px;
		padding: 20px;
		background: #fff url([[root_url]]/images/minimaxing/banner.jpg) no-repeat 20px 20px;
		background-size: 1160px 265px;
		-moz-box-sizing:content-box;-webkit-box-sizing:content-box;-o-box-sizing:content-box;-ms-box-sizing:content-box;box-sizing:content-box
	}

		#banner h2 {
			position: absolute;
			z-index: 1;
			width: 100%;
			top: 100px;
			left: 0;
			font-size: 3.3em;
			color: #fff;
			text-align: center;
			letter-spacing: -2px;
		}
		
		#banner span {
			display: block;
			position: absolute;
			z-index: 1;
			width: 100%;
			bottom: 105px;
			left: 0;
			font-size: 1.6em;
			color: #fff;
			text-align: center;
			letter-spacing: -1px;
			text-transform: lowercase;
			opacity: 0.8;
		}

/* Main */

	#main {
		background: #fff;
		padding: 4em 0;
	}

/* Footer */

	#footer-wrapper {
		padding: 4em 0;
	}

/* Copyright */

	#copyright {
		text-align: center;
		color: #A6A88F;
		border-top: solid 1px #ced0b7;
		padding: 3em 0 0 0;
		margin: 1% 0 0 0;
	}

		#copyright a {
			color: #A6A88F;
		}


I've tried using each of the following and none of them work (the images don't appear on my web page when viewed in the browser):

Code: Select all

url([[root_url]]/images/minimaxing/banner.jpg)

url(/images/minimaxing/banner.jpg)

url(http://www.mywebsite.com/images/minimaxing/banner.jpg)
Is this somehow related to the fact that CMSMS assembles the CSS into a cached CSS doc?

Code: Select all

http://www.mywebsite.com/tmp/cache/stylesheet_combined_b4dc01a45880f0ad0d6d83fe020dbadc.css
Thank you in advance :)

PS: I'm using CMSMS 1.11.13

Re: Having trouble with images in style sheets

Posted: Mon Mar 16, 2015 2:33 pm
by velden
Is this somehow related to the fact that CMSMS assembles the CSS into a cached CSS doc?
Yes and no. There's no real magic going on here. A stylesheet is a stylesheet. The browser reads and interpretes it. You can't however use relative paths because of this caching mechanism.

You need to make sure the paths to the images make sense to the browser.

[[root_url]] will be replaced with the full (absolute) path to your domains root url, e.g.: http://www.example.com

You just need to look into the css file that the browser gets and find out what paths are in there.

Obviously the paths should exist on the web server.

btw:
url(/images/minimaxing/banner.jpg) could be considered an absolute path too. It should work IF the 'images' directory is in the webroot.

To be sure: you don't have the files in the /uploads/images/ directory that comes with CMSMS install?

[solved] Re: Having trouble with images in style sheets

Posted: Tue Mar 17, 2015 2:02 am
by donohue
Thanks for your help :).

I think I figured out what's going on. The images in question are actually part of the menu and the advertising block. It looks like the stylesheets are being referenced by the javascript. Since CMSMS pieces the CSS together into a randomly-named file, I can't just reference it in the js code.

Oh well, no biggie... I can just hard code the references to the CSS files.

Thanks again!
All times are UTC
Page 1 of 1

Powered by phpBB® Forum Software © phpBB Limited