X-Cart forums

[ARW VISIONS]

Seems like my CSS is cached and I don't know how to stop it. I am trying to integrate a design and all the CSS is being rendered from this file.

http://championlighting.com/xc5dev/var/resources/default/http/screen/1f049767ecfff7145ff1826aaa533b09.css?1426971236

I want theme.css in my custom skin to control layout. Any help?

[ARW VISIONS]

http://championlighting.com/xc5dev/images/css-cache.jpg

[ARW VISIONS]

Am I doing something wrong?

[totaltec]

Doesn't look like it. Is your CSS file being loaded? How are you loading it?

I assume you have cleared the aggregation cache. Can you give some more examples as to what you are trying to do, and what exactly is not working?

[ARW VISIONS]

I have created a custom skin. I have placed a folder called css in the ChampionSkin/customer/en

Style Sheet is loaded
skins/ChampionSkin/customer/en/css/theme.css?1426974767
but only some of my code is being executed.

this is being styled from skins/ChampionSkin/customer/en/css/theme.css?1426974767

------------------------------------
#page-wrapper {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
}

------------------------------------

I also have this is theme.css, but it is not recognized.
/* 1200 media queries
----------------------------------------*/
@media (min-width: 1200px)
#page-wrapper {
width: 100%;
}

-----------------------------------------------

This is styled by
xc5dev/var/resources/default/http/screen/efb867827a471ec395c7f7e0bf034d4d.css?1426974767
@media (min-width: 1200px)
#page-wrapper {
width: 1180px;
}

I have cleared bot aggregate cache and widget cache.


I have create a few skins and never had this issue.

[ARW VISIONS]

is this the a link to the cache file?
http://www.championlighting.com/xc5dev/var/resources/default/http/screen/1f049767ecfff7145ff1826aaa533b09.css?1427061410

[ARW VISIONS]

HA! Well I feel like a complete ding dong. I forgot the {} on my media queries.

Ugh

@media (min-width: 1200px)
#page-wrapper {
width: 100%;
}


should be

@media (min-width: 1200px){

#page-wrapper {
width: 100%;
}

}

sheesh total n00b mistake there :/

[totaltec]

An easy mistake to make! Glad you figured it out.

[cflsystems]

I would use something like this as template

 /* iPad mini (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {

}

/* iPad 2 (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

}

/* iPad 2 (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) {

}

/* iPad 2 (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) {

}

/* iPad 3 (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}

/* iPad 3 (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {

}

/* iPhone 4 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {

}

/* iPhone 4 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2) {

}

/* iPhone 5 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {

}

/* iPhone 5 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {

}

/* iPhone 6 (landscape) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {

}

/* iPhone 6 (portrait) ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2) {

}

/* iPhone 6+ (landscape) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {

}

/* iPhone 6+ (portrait) ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {

}

/* Samsung Galaxy S3 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2) {

}

/* Samsung Galaxy S3 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2) {

}

/* Samsung Galaxy S4 (landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {

}

/* Samsung Galaxy S4 (portrait) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {

}

/* Samsung Galaxy S5 (landscape) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 3) {

}

/* Samsung Galaxy S5 (portrait) ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 3) {

}

Then you can go from there and this will assure the start for media queries is set right.

This is a good one for emails - https://github.com/seanpowell/Email-Boilerplate

[ARW VISIONS]

I have prototypes built for xcart 4 and wordpress, but just haven't doe it yet for xcart 5. :/