[coldbox-3.6.0] CSS not showing up in views

[John Helfrich]

Hello,

I'm fairly new to Coldbox, ColdFusion in general. I've been running into some issues with some styles i'm trying to use. I have a sprite declared in my CSS file as so..

.icon-vote {
  background-color: #e6e6e6;
  display: inline-block;
  width: 26px;
  height: 26px;
  text-align: center;
  margin-right: -1px;
  position: relative;
  cursor: pointer;
}
.icon-vote :last-child {
  margin-right: 0;
}
.icon-vote i {
  background-image: url(includes/images/sprite.png);
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  top: 6px;
  left: 9px;
}
.icon-vote.icon-check i {
  width: 10px;
  height: 14px;
  background-position: -216px 2px;
}

And in my Layout.Main file i have

<link rel="stylesheet" href="#event.getModuleRoot()#includes/styles/styles.css" type="text/css" />

The call in my view is as follows

<cfloop array="#rc.campCards#" index="Campaigns">
                <li>
                    <div data-candidate-id="1" class="btn-group-voter inline">
                        <div class="icon-vote icon-check"><i></i></div>
                    </div>
                    <div class="align"><a href="#"><cfoutput>#Campaigns.getCampName()#</cfoutput></a> (R)</div>
                </li>
</cfloop>

The CSS is seen on all pages so i know the style sheet is being used. However, only sprites like this have issues. When i place the code in a style tag on the view itself it works perfect... but i don't what all that style code just sitting in my view if possible. Any suggestions?

[Andrew Scott]

If it is not working then it sounds like the style sheet is not getting loaded, this can be because of cached pages. Try to view the source code and see if the style sheet is in the source of the page, and use your browser to then check if it is failing to load.

I would have thought that this would be the first thing you have checked!

Failing that, try reinit the application to flush the cache.

Regards,

Andrew Scott

WebSite: http://www.andyscott.id.au/

Google+:  http://plus.google.com/113032480415921517411

--
--
You received this message because you are subscribed to the Google Groups "ColdBox Platform" group.
For News, visit http://blog.coldbox.org
For Documentation, visit http://wiki.coldbox.org
For Bug Reports, visit https://ortussolutions.atlassian.net/browse/COLDBOX
---
You received this message because you are subscribed to the Google Groups "ColdBox Platform" group.
To unsubscribe from this group and stop receiving emails from it, send an email to coldbox+u...@googlegroups.com.
To post to this group, send email to col...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Andrew Scott]

And this is also the first time I have heard HTML elements called sprites. Since when did that happen, did I miss something.

Regards,

Andrew Scott

WebSite: http://www.andyscott.id.au/

Google+:  http://plus.google.com/113032480415921517411

[Richard McKenna]

I don't think he is referring to the HTML elements as being sprites. He is using a common technique to display icons using a sprite image that's declared in his CSS.

If your style sheet is being loaded into the page and the rest of the classes are being applied to the HTML elements. My first thought would be to check the URL of sprite.png the URL is interpreted relative to the source of the style sheet, not relative to the document.

So if you have a directory structure of 

-includes
--styles
---styles.css
--images
---sprites.png

You should be using

background-image: url("../images/sprites.png");

Hope that helps.

Richard

[Andrew Scott]

Thanks Richard, but coming from and older generation sprites still is not what I have heard images being applied via CSS. But this could be some new term I am not aware off...

And yeah that was the other thing I forgot to mention, but when you check the browser and use say Firebug or Chrome developer tools it still would be evident if it is being loaded or not.

Regards,

Andrew Scott

WebSite: http://www.andyscott.id.au/

Google+:  http://plus.google.com/113032480415921517411

[Casey Dougall - Uber Website Solutions]

  background-image: url(includes/images/sprite.png);

should be

  background-image: url(/includes/images/sprite.png);

--
Casey Dougall
Über Website Solutions
(518) 633-1621
Saratoga Springs, NY
http://uberwebsitesolutions.com/

[Richard McKenna]

Nothing new, it's exactly the same technique that was used in the old school games where there was one image with all the frames of an animation.

On another related thought, though nothing to do with the issue. You could just apply the sprite to the <i> element rather than wrapping it in a <div>

<i class="icon-vote icon-check"></i>

would make it easier to use with less markup.

Richard

[John Helfrich]

Thanks for all the replies!!

As I said in the question, the style sheet is actually loading only the sprites are not.

Richard, I'm going to try that URL style of "../includes
Once I get my system up from home this morning ill see how it works out.

The sprites URL does work and the sprites load if I have all that code just slapped in a <style> tag on the view itself, but that's a sloppy approach.

I've tried every other URL style listed here but was hesitant. I was told to not mess with the CSS unless in emergency situations. Coming from micro controller programming a few months ago to a crash course on web application development, I took this a little too literal.

[richard...@gmail.com]

Don't be afraid of playing around with css, it’s how you learn. If your not already, use firebug or chrome developer tools. You will be able to edit css and see the results immediately and try different things without editing your actual .css files.

 

All the ../ means is go up one directory and then take it from there.

 

Using /includes/images/sprites.png is an absolute url and would still work. But what that’s saying is start in the root directory of the website.

 

Richard

--
--
You received this message because you are subscribed to the Google Groups "ColdBox Platform" group.
For News, visit http://blog.coldbox.org
For Documentation, visit http://wiki.coldbox.org
For Bug Reports, visit https://ortussolutions.atlassian.net/browse/COLDBOX
---

You received this message because you are subscribed to a topic in the Google Groups "ColdBox Platform" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/coldbox/ajHqx0SD_RE/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to coldbox+u...@googlegroups.com.

[Tom Miller]

Use google dev tools (right click inspect element) and click the console tab. Anything not loading properly would show in red. If you’re getting 404s then just adjust the url in the css…

You received this message because you are subscribed to the Google Groups "ColdBox Platform" group.

To unsubscribe from this group and stop receiving emails from it, send an email to coldbox+u...@googlegroups.com.

[Andrew Scott]

John,

When creating things with ColdBox and CSS and loading of images (I hate calling them sprites as the are images) anyway, it is probably wise to package them together for example create an assets folder and then a css and images folder in there.

Then when you reference the images you can then use ../images, which goes back to the assets folder and then changes to the images folder. This will make it easier to know where everything is and easier to trouble shoot if you know the referencing of your paths.

Regards,

Andrew Scott

WebSite: http://www.andyscott.id.au/

Google+:  http://plus.google.com/113032480415921517411

[Matt Quackenbush]

I am not trying to be contentious, but I feel the need to point out that John **is using the correct term** and he should not be reprimanded for doing so. Not only is John using the correct term, but it's a term (and technique) that has been around for _decades_ rather than something new. Please stop demeaning someone for being correct.

https://en.wikipedia.org/wiki/Sprite_(computer_graphics)
http://www.w3schools.com/css/css_image_sprites.asp

[John Helfrich]

I fixed the issue, and i thank you all for your help. Upon inspecting the element with chrome dev tools i found it was trying to load 

'../includes/includes/images/sprite.png'

So in the CSS i just made it 

'../images/sprite.png'

And it works.

[Andrew Scott]

Matt,

You are being Contentious, and I think I should point out to you that I stated that this must be a term that I have not heard before with HTML elements. I did not demand anything, secondly I had began my career programming on machines that used hardware sprites. So I know fully well what they are, I just never heard this term with CSS before and I made that point which you Matt, kindly ignored.

Now I read those two links very carefully, and I still maintain that he is NOT using sprites in his example either. And I would argue that a sprite is many images made into one image, which by definition is termed a sprite, as stated in the links you provided . But a sprite is still an image after all. But if CSS wanted to use the term sprite, then they would have used the term sprite in the CSS specs rather than using the word image.

So don't tell me I am demanding, you have come into the conversation like you usually do and attack people for no reason. I am yet to see a post from you that has not attacked someone. And I challenge you to re-read my original post and others again, before you even think about coming back with another personal attack and understand the full context before you pull your shit with me again.

In John's example he is using an image by the definition of your links, otherwise there would be offsets for the image as defined by your links, Matt.

Regards,

Andrew Scott

WebSite: http://www.andyscott.id.au/

Google+:  http://plus.google.com/113032480415921517411

[Tom Miller]

>> In John's example he is using an image by the definition of your links, otherwise there would be offsets for the image as defined by your links, Matt.

 

 

From his CSS:

 

.icon-vote i {

background-image: url(includes/images/sprite.png);

}

.icon-vote.icon-check i {

      background-position: -216px 2px;

}

 

Looks like he’s using a sprite to me (when the class icon-check is added, he offsets the image to reveal a different icon).

 

That’s the perfect example of a CSS sprite.

 

 

Tom.

From: col...@googlegroups.com [mailto:col...@googlegroups.com] On Behalf Of Andrew Scott

Sent: 28 April 2013 08:43
To: col...@googlegroups.com

[Andrew Scott]

Thanks, Tom I did miss that.

Regards,

Andrew Scott

WebSite: http://www.andyscott.id.au/

Google+:  http://plus.google.com/113032480415921517411