Jump to content

Fashion Skin


Recommended Posts

I have been working on a new skin for the past few month and it's finally ready to show off. This one is called Fashion Statement and it is decked out as a clothing/fashion store but you could easily adapt it to just about anything. Try resizing your browser... this one is very responsive!


It's available in the extension store right now if you just have to have it!

Let me know what you all think


Link to comment
Share on other sites

Regarding the Latest Products: After a browser gets wide enough (1180+ pixels, maybe 1185 pixels or 118 EMs), in the fashion.css file, the rule at line 841 takes over with fixed height and width. But not all panels appear the same height. Take note of the "equalizer" found in Foundation.

A browser width just a couple pixels narrower, and the rule at line 280 is used with no fixed height and width. The panels appear to have the same height but vary in width.

Suggest implementing the equalizer and fixing the width of the rule at line 280.

Narrowing the browser window still further, at about 965 pixels, the LP switches to list mode. There is boo-koo wasted space. Suggest and hope you can find something to fill it.

I see that a CSS rule declares Comfortaa as the font to use. I do not see a matching request for that at fonts.googleapis.com. As a fallback, 'cursive' is given. In my browser, that happens to be set to Comic Sans. That just makes this elegant site look stupid. It looks like you are calling for Open Sans, Raleway, and Cabin. Suggest you do not use http: otherwise there will be a mix of secure and non-secure resources on the page.

I see that black.css is called first. Please know that the order of loading CSS rules determines their priority, with later rules overriding earlier ones. So, because 'black' being a substyle, suggest making sure it is loaded last so that anything you want to actually show in the black palette takes priority (if there is a matching rule elsewhere).

On the Product page, the problem with the magnifier is that, when the browser width is adjusted (and who really does that?), as the product image scales and slides, the "sensor" stays fixed until the image is refreshed -- rolling over any image in the gallery. And then previous locations of the sensor remain. This is a fault of the Magnify plugin and probably nothing you can do about it. Just be aware of it.

Personally, I would fix the width of the sidebar. Just a personal preference.

Link to comment
Share on other sites

bsmither, Thanks for the input. I am not using Foundation as the base of the skin so several of its features are not in this skin. I personally do not like the equalizer so that is why I came up with my own skin base that does not use it. There are plenty of skins that do use it so I guess people that want it can use those. If you pics are all about the same size (and most are, aren't they?) then this works great and is a lot more flexible for screen widths

It is strange about the fonts because I was calling the comfortaa font in fashion.css and it worked just fine on all the browsers I checked it on. I moved that call to the main template page so I hope that fixes the issue you were having. Good catch on the subset css coming first. That would explain a few issues I was having..... Can't believe I missed that.

I cannot fix the width of the sidebar and still have it as responsive as it is. I did go back and set min and max width however so hope that is more appealing.

Magnifier has it's drawbacks, that's for sure. Nothing to do about that. Its not worth setting up a page refresh on browser resize or anything. That will just add to the server load. Like you say, it would be pretty rare that anyone will ever need that.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...