New Features: Advanced CSS and Saved Skins
Greetings. I want to take a moment to introduce two new features available in Quick Shopping Cart® 2.3: Advanced CSS and Saved Skins. The goal of these two features is to allow you greater control and flexibility over the look and feel of your site.
The Advanced cascading style sheets (CSS) feature provides you with a new level of customization for your cart. With it, you can add your own CSS styling throughout your site. This advanced feature goes beyond the level of customization allowed by the “Customize Colors and Fonts” feature. However, to use it, you must be familiar with CSS. You can start learning about CSS at www.w3schools.com/css/default.asp
One great way to get started in the use of advanced CSS is to customize your background with an image. Instead of a simple solid background color, you can have any image accessible via a URL as the background for your site. The basic syntax for this is:
body
{
background-image: url(image location);
}
There are many other options to style the background image, as well. For example, to make the image repeat, add the background-repeat option To lock the background in place relevant to the actual content on your pages, use the background-attachment option. You can also combine styles. For example, to have a site with a background image that repeats and doesn’t scroll, you would add the following lines to your advanced CSS:
body
{
background-image: url(image location);
background-repeat: repeat;
background-attachment: fixed;
}
Be aware that if you have SSL enabled and choose to customize your background in this way, your customers may see a security message stating that the page contains secure and insecure items when they go to check out. This behavior is browser specific and cannot be controlled by Quick Shopping Cart®. One possible solution to this situation is to ensure that the image URL is secure by verifying its URL begins with https instead of http. This is just one example of the many customizations you’ll be able to achieve using the advanced CSS feature.
Another new QSC feature is My Saved Skins, which allows you to save snapshots of your site's graphical layout. When you create a new skin, your site's template, color theme, category page style, product page style, custom fonts and colors, and advanced CSS are backed up. Creating skins gives you the ability to confidently try new look and feel options, since you can always reload a previously saved skin. Moreover, you can save up to 50 skins, so you can build different skins for specific occasions. Using the My Saved Skins manager, you can create new skins, apply a skin, update an existing skin, rename a skin, and delete a skin.
Remember, saving a skin takes a snapshot of your site's current settings. The skin’s settings do not change unless you overwrite it using the My Saved Skins manager. When you overwrite a skin, all settings for that skin are replaced with the site's current settings. So when using this new tool, back up your current settings and explore the many new templates we’ve added.
Thanks for the info on saving skins. I have a further question, though:
If I have multiple shopping carts, can I use the saved skins between them so that I can get a similar look and feel to start off, then make only minor modifications to each shopping cart?
Reply to this
Greetings,
Good idea and one that's likely to be done in the future ,but the longer this sentence is you know I am just delaying the inevitable. I'm afraid that functionality isn't within this latest release. The good news is that the css custom themes can be move easily between stores so there is a path available to do this at least on the look and feel.
Regards
John
QSC Team
Reply to this
How far can I go with the AdvCSS capabilities? A whole new template of my own? I'm still in the infancy of learning CSS but I'm really NEEDING to add a feature to my shopping cart so that customers can see how many of a certain item I have in stock. Is this within the realm of Advanced/Custom CSS or do I need to stop thinking this is something I can add and just hope it will become a regular QSC feature/option?
Reply to this
Greetings Laura,
Sorry for the delay in answering your inquiry . CSS would not be able to accomplish this for you it's basically a way to style the information displayed on the blog but there's nowhere you could currently pull the inventory from within QSC to be able to show that. E.g the xhtml creates the content and the CSS tells it how it should be displayed.
Regards
John
QSC team.
Reply to this
Does this even work? Here I have tried your example using "body", a reserved CSS class for the page body. I even specified an absolute URL to the asset. My cart doesn't show the background image, it just continues to use the cart's background color. Do you have to use a certain template to use Advanced CSS?
Here's a simple CSS class for body - doesn't work using your "advanced editor".
Also, where can a developer find documented classes for the cart? Shouldn't they be given a list of classes that are used? That would be helpful for rewriting those classes.
Just curious...
body
{
background-image: url (http://www.google.com/intl/en_ALL/images/logo.gif);
}
Reply to this
Greetings Andy,
Firstly the classes for the site/cart are not uniformly used within all templates. So it's better to approach them on a per template basis and use a tool such as the firefox extension "firebug" which you can then open up all the associated CSS files on your particular store. I've seen the background work on other stores but I will have to take a look at yours to see if there's any reason preventing it from functioning.
Regards
John
QSC team
Reply to this
I'm trying to do the same thing using the following code:
body
{
background-image: url (http://www.orbitalenterprises.net/images/background.png) repeat-x;
}
I'm getting the same result, the solid body background color and not the background image.
Please advise!
Reply to this
Greetings,
Sorry for the delay in responding but on what may be the issue is the inclusion of a space between the URL and the ( bracket It seems CSS is just that picky and I put it in by mistake when I was writing the entry. If this still doesn't work let me know which template/ browser and we'll take a look further into it Some templates have masks that occlude the background so the image may be there but we can't see it.
Hope this works for you.
Regards
John
QSC team.
Reply to this
Days ago, I had a customer ask if I could customize his QSC header to match his front-door site. I had never had a need to use the panel myself, but when I went in there, saw the 'Advanced CSS' option, I used it. I was really surprised that no other customers were using it(by the looks of their QSCs). I guess I'm riding the cutting edge on this one. My customer is very pleased with the results. I would give the URL, but the customer is still filling in the prods.
QUESTION:
--> Is their a way to link directly to the current sites CSS(even a specific header.css) via a URL instead of needing to C&P parts of it ? this way the latest CSS will always be used for both Site & Store.
Reply to this
Greetings Jim,
You are pretty much on the cutting edge, we only released the feature a week ago but already we have some interesting examples being created by store owners. I've not confirmed this works yet but you should be able to reference an external CSS sheet by using @import at the top of the custom box. E.g
@import url(http://www.locationyouhavefile.com/style.css);
Hope this is of use meanwhile.
Regards
John
QSC team .
Reply to this
Thank you for adding that feature in.
I was seriously starting to hate the shopping cart.
@import works great.
I am not having any problems with it.
Reply to this
Exactly!!! I am sooo aggravated with the fact that the site and QSC are completely different with styling/CSS options. I completely erased some sections out of the current template I have and can not for the life of me figure out how to on my own with no CSS of the template to go from. If that makes any sense?! I just wish on QSC I could see the template in CSS and then show another section where I can change the CSS just like the Websites styling options! I know basic CSS but not to make a tempate on my own with nothing to go from! Esp. when I'm trying to erase existing images! I want my site and QSC to look exactly the same! Can anyone help me or do I have to wait till godaddy makes some changes (hopefully)!? Thanks
Reply to this
Are you able to recommend a CSS WYSIWYG that I could use for customizing my store? I'm familiar with some HTML but the CSS is just a step beyond my ability yet I want to be able to customize some parts of my store. Suggestions?
Reply to this
Greetings Laura,
Off hand I don't have such an item that I'd recommend though I can see the need for a decent tutorial from us on how to get started with this. It's currently not my strong point and I use a rather ad hoc approach. One thing I found useful was a plugin for Firefox browser called Firebug which let's me open up the CSS alongside the page, let's me edit it in realtime and then I copy the CSS back to the program I want it to work in. It's not true wysiwig as I style have to change the values but you do see the effect in realtime. I'm honestly not sure there's a quickfire route to CSS happiness that wouldn't create more questions than it answers.
http://csstypeset.com/ is one of the tools I was using lately but mostly the effects I've been going for are If you have a specific item that you are trying to achieve let's start off with that and I'll take a look around and see if there's a suitable tool.
Regards
John
QSC team
Reply to this
Will we be able to use purchased shop templates in QSC? I have found a few that I really like and would like to incorporate one of them into my cart. What format would it use?
Reply to this
Matt,
Yes and no. Yes as in the underlying template should function. No as in it would take work to change the names of all their classes , e.g over to the names that are used within QSC so unless the template was designed for QSC the chances are a purchased template would not function correctly.
The problem is that the names used by the templates applied to the bought templates will not have the same name E.g we have one a_breadcrumb category which is part of the breadcrumb navigation trail that I'm certain a third party isn't going to have.
Regards
John
QSC
Reply to this
3 questions:
1) I would like to change the font globally on my site. How do I do that in the advanced CSS style sheet?
2) what can I and can't change on the advanced CSS style sheet? Can I completely change a template?
3) On our current template it has a dark blue fill behind each product title. We would like to remove that fill and remove the blue border around the category product detail. Is that possible and how do we do it?
Thanks!
Reply to this
Greetings Jay,
Firstly sorry for the delay as it seems like the template choice has changed since your post and point three is moot. Never mind there are two to go.
1) It's possible but not practical. It would require gathering all the CSS content using your favorite tool and then assigning a new font value to all text that's styled and placing that in the advanced css. There's no global setting ( at least in these templates ) where the underlying font can be switched with one request.
2) Yes you can completely change the look of a template.. I'm afraid I am going to be a little evasive on this reply because "it depends" is a valid answer based on the base template that's being modified. E.g you can't overwrite some of the layouts that are overlays which hide your new changes behind them and not all templates are created with the same tag set so while I'll do my best to address specific issues that come up there are going to be items that just wont work on all templates that we've encountered. It's an ongoing process to have all of these uniformly customizable but for the time being questions like your number 3 , really I had an answer for that, we can be certain on
Regards
John
QSC team
Reply to this
Hi Jay,
I wanted to follow up John's response with a little more detail. How useful these are will depend on your level of comfort with CSS.
1) The main layout file (layout.css or layout_contemp.css) for your template has a "reset" near the top that applies a few styles to most elements you'd encounter on a site. You can use this same set of tag names, or selectors, at the bottom of your advanced CSS to apply your own global styles:
This won't style absolutely everything on the site, but it will cover the majority.
2) Like John said, the technical answer is - you can change anything you want, as long as you know how to write your styles as specificly as possible. If you are an intermediate to advanced user, you can use Firefox's Firebug extension to determine exactly the selectors/rules you need.
3) In case you still want to know, to remove the product heading backgounds you can use this rule:
John is right in that this is very new functionality and we're always pushing to make QSC work better for you. If you have any more questions please don't hesitate to ask!
--Steve (QSC Team)
Reply to this
Hi,
I'm posting this message a second time as I don't see my original post.
I actually have two questions:
1. Like Andy (above), I am trying to publish a background image using the body tag:
body
{
background-image: url (#);
}
tag as outlined in the tutorial. I can't get the background to show up. I'm using an absolute URL to point to the background image (a .png file) but it doesn't seem to work. Any ideas or suggestions?
2. We would like to take advantage of the entire banner space at the top of the shopping cart. Our default banner size on our home page is 900 x 130 pixels. I would like to use this or create another banner similar to this on the shopping cart. Would you post any advice and let me know if this is possible?
Thanks!
Don
Reply to this
Greetings Don,
I apologize for the delay seemingly the earlier reply didn't take. It looks like the presence of a space between the URL and the ( bracket may be the reason it's not showing correctly. I'm sorry the space was in the original article and that I didn't see that sooner. Not all templates will work with the background image so please let me know if you need further assistance if knocking that space out isn't succesful.
Onto number two.
I'm going to investigate if this is practical and get back with you on this.
Regards
John
QBC Team
Reply to this
HI,
I'm still looking for an answer on the following question:
2. We would like to take advantage of the entire banner space at the top of the shopping cart. Our default banner size on our home page is 900 x 130 pixels. I would like to use this or create another banner similar to this on the shopping cart. Would you post any advice and let me know if this is possible?
Thanks!
Don
Reply to this
Don,
We sent an email to you a couple of weeks back with the information specific to your site within it. I don't usually post specific resolutions that aren't broadly applicable to everyone. The mail should have come from my personal account which I have just sent again.
Regards
John
QSC Team
Reply to this
John,
Could you send information to me regarding utilizing the full banner at the top of the page for our logo instead of a generic picture, small logo, and heading that is standard?
Thank you,
Joe
Reply to this
john
We would possible to use the entire banner space at the top of the shopping cart. It seems no matter what size I make it there is space on both sides.
My banner is 900 x 250 pixels
Or, can I change the color in the back ground banner space at the top of the shopping cart.
Thanks.
Reply to this
I'm curious, using this Advanced CSS section, will it allow you to completely change the default template to your own design? I have gone through the CSS files on the default template design with a fine comb, and I have not seen a single specific control, just default attribute settings; none of the tags have class ID's, which from my viewpoint is a problem. Is there a way around this? All I need from the shopping cart is the ability to make purchases and a 24 hour support line for my customer. I have a decent amount of knowledge in PHP, MySQL, and many more languages too numerous to express here. I do not care for GoDaddy's design, and neither does my customer; I have already designed their site using tag ID's and CSS calls. I have spent hours over the phone with managers trying to get a straight answer about the versatility of this feature (whether or not it will allow me to completely alter the design of the site), and no one has explained anything of use. Maybe I am looking in the wrong place. I've been pulling my out hair all week about this, and I'm about ready to trash the QSC and implement a shopping cart I've written myself. Any suggestions? Perhaps there's a public document that lists names for variables and classes?
Reply to this
Greetings,
This is one of those yes, and no, answers. We will practically allow you to hide, mask, re position any of the CSS elements on the template but we don't have any means presently to change the underlying code , just the manner in which it is displayed. So in this case we have no controls available, or indeed variables just the CSS classes per template and they are not universal across the template set presently which is why such a list doesn't exist presently. So if you have amibitions other than reformatting the layout from the existing elements then we are probably not the ideal solution at this time. While that is a very broad answer I hope it covers the general limitations of the feature. If there's one key item that you need send me the details and I can give a fully relevant answer to your specific case. Lastly I apologize for the lateness in response in getting back to you on this comment.
Regards
John
QSC Team
Reply to this
Hi,
I was able to get all the customizations we needed using the Advanced CSS. It worked great and people can review what we did at:
http://www.PassoverMealsToGo.com
Any questions I can be reached at jfeitlinger@cox.net.
The only thing I wished I could do with this cart was access the source code files so I can add Google Analytics. For now we are using the GoDaddy Traffic Facts product and that seems to be good enough for what we need on this site.
Thx, Jay
Reply to this
Greetings Jay,
Thanks for taking the time to show your work and the offer of help for others. We also have a user forum over on Go Daddy Connections which is ideally suited for this purpose and more people can see the results of any assistance rendered. Regarding your wish for Google Analytics this is an item that we are considering for a future version.
Regards
John
QSC
Reply to this
Just add the google analytics code to the botom of the entry page and it works.
Reply to this
Wayne,
That is great! What file did you edit? I see the edit footer but it does not let me get to the source code? How were you able to add the Google Analytics code without it showing on the live site but it did get into the source code? I tried doing that for our http://www.passovermealstogo.com site and it would not work.
Thanks,
Jay
Reply to this
Currently I'm building a hat website and need help with the category page styles/front home page. Is there anyway in Advanced CSS to just show the title of hat along with larger picture and not show short description.
Reply to this
Greetings Chris,
I'm just about to post part 2 of Steve's guide that may have the answer , or at least the road to the answer, you require. I couldn't locate a specific account to reply on the particular case for your template so a generic reply is. Locate the name of the style that's on the category / front page ( they are not the same for all templates) and then reference that style in the CSS and place this
display: none;as a value. I'll have the new post up in a few minutes so if this doesn't make sense It should do so in context. We also suggest a tool on how to get the info for the stylenames.Regards
John
QSC Team
Reply to this
Hi.
The advanced css feature has been sooo helpful. There's one thing I can't figure out. In Firebug, I can see that there are 4 style sheets. Some of the style sheets have the same class/id names. How do I specify which style sheet I want to override in advanced css? Right now if I put body {blah} it will override theme.css but not the body in color_1.css. Any suggestions?
Thanks
Will
Reply to this
I am working with CSS to modify
Quick Shopping Cart.
Specifically, I'm trying to define the margins so that my storefront uses the entire page. What's the best way to achieve this?
Thank you for any suggestions.
Reply to this