How do I make CSS changes?
Sometimes a few quick CSS changes can make a huge difference in how unique your store will look. Here’s how to edit Ultimento’s CSS:
A single CSS file
All the CSS for Ultimento is located in a single file (all files have been combined into one as part of the techniques that are used to optimize load speed):
skin/frontend/default/ultimento/css/styles.css
Compressed and uncompressed versions
We’ve also compressed the CSS file so that it loads faster. Compression removes all spaces, comments, empty lines, etc. It’s totally possible to edit a compressed CSS file but it’s much easier to edit an uncompressed file since you can see comments and since everything is nicely spaced out. That’s why we’ve also included the uncompressed version of styles.css here:
skin_source/frontend/default/ultimento/css/styles.css
Making CSS edits
To edit Ultimento’s CSS, simply open the file above using your favorite CSS editor and make any change you’d like. Then copy your file here (overwriting the existing file to apply your changes):
skin/frontend/default/ultimento/css/styles.css
If you’d like to compress your new CSS file to conserve every bit of Ultimento speed optimization, you can use this free tool which will do it for you directly online.
It’s equivalent to using Yahoo Compressor which we plan on including in a future release of Ultimento to make your life even easier. Follow us on Twitter to stay tuned.
Where is the CSS code located for the tabber. I can find it in the source files but not in Magento?
Hi Mark – please read the paragraph where it says “A single CSS file”
. All the CSS is located there, including the CSS for the tabs on the product pages. We’ve also put the exact same CSS in the separate file “wt-product-page.css” just for reference but that file is not being used.
Noam,
Each of the templates also includes an uncompressed styles.css file. Is this actually the full uncompressed version of styles.css (compressed)? To test css changes can we simply rename the 2 files to say styles.compressed.css (compressed version) and the uncompressed version to styles.css so that this becomes the active file for test purposes? Then, when finished, use the referenced tool to compressed the file for ongoing use?
Your confirmation would be appreciated.
David
Hi David – the answers to your questions are yes, yes, and yes!
Hi there,
I was wondering how customisable Ultimento’s templates are,
Kind Regards
Richard
Hi Richard – Ultimento is made to be customized! Anything at all can be customized and many of our customers do in-depth customization with basically no programming knowledge whatsoever. Here’s one such store for example
.
Hi,
Thanks for your fantastically quick response,
I had some other questions which I would like ask,
Is it okay to have your email address so I may send them to you,
Kind Regards
Richard
Hi Richard – I’m available on chat right now if you’d like. Just go to ultimento.com (home page) and wait until the chat box pops up in the bottom right corner.
If I’m not online you can reach me privately by opening a new ticket via your account center‘s help desk
.
Hi Noam,
just a quick question, I have been adjusting logo positioning and borders, but to NO affect with the new download, I have tried adjusting styles.css at the following locations using a css editor and saving down, is there something that will stop adjustments flowing through?
Public_html / magento / skin / default /ultimento / CSS / Styles.css
Public_html / skin / default /ultimento / CSS / Styles.css
Thanks for your help.
p.s. is there a way you can ‘search’ the discussion board? It probably would save me going through 30 or so pages to try and locate an answer? there are alot fo helpful tips there as well as the magento site I have been reading.
thanks
James
Hi James – it’s impossible to guess without at the very least being able to see a live URL but make sure you’re editing the
styles.cssfile that’s in your particular theme’s skin folder. So if you’re using Ultimento’s New Theme that’d be under “ultimentonew”; if you’re using Ultimento’s Custom Method that’d be “ultimentocustom”, and so on.And of course remember to flush your Magento cache and your browser cache to make sure you’re viewing the latest version of your site
.
Hope this helps!
P.S.: The ability to search through comments on this Discussion page as well as throughout the wiki is on our roadmap – stay tuned!
Hi Noam,
i’m looking to edit the styles.css. I want to ad another row of 4 “wt-features” blocks.
My guess is that if I would duplicate some of the code other fields are crossed because many have absolute positions.
Is my estimate correct? Do you have tips? Do you have a layout image of the homepage where all the featured fields, buttons, etc are visible (with the used css name and absolute position markings)
(I hope my question makes sense. Its not always easy to translate ideas from native Dutch to English
)
thx
Patrick
Hey Patrick,
You’re absolutely right. The CSS is very tight so its hard to insert certain changes without having a pretty good idea of what the source and parameters are for each item on the site’s page. CSS can be quite tricky in general, but there’s actually a great tool for doing it: Google Chrome!
If you look at any site with Google Chrome and then right click on a portion of that site (the background, an image, a button, etc.) you can select “inspect element” and a console will open up in the lower part of the browser. You’ll see all the source code of the website broken out and as you hover over each line it will highlight the exact element on the page that is controlled by that code. Additionally, if you click on that line of code you’ll see a box to the right that gives you all the associated CSS information that’s relevant to that element. This makes it super easy to see the parameters of each portion of the site and you can even make edits right from within Chrome to see what the changes would look like.
We highly recommend this tool. Try it and see how much easier it makes your site editing.
Thanks,
Support
Could somebody please look at my site http://www.jalsaexpress.com and give me some idea how can I get rid of the review stars in the footer?
Thank you!
Hey Jalsa,
We actually have a page that covers this very problem. Check out How Do I Get Rid Of the Stars at the Bottom of My Page and it should help you straighten everything out.
Thanks,
Support
Thank you for your quick response. I tried to locate the footer.phtml file as you suggested and having hard time to verify the location of the file. My Current Package Name is Default and Theme template is ultimentocustom. I logged into my FTP and used this location /www/app/design/frontend/default/ultimentocustom/template/page/html and find out i only have header.phtml do you think the footer.phtml is somehow deleted or i am using a wrong location to find the footer file? I also looked into this location /public_html/app/design/frontend/default/ultimentocustom/template/page/html which only shows header.phtml as well. I did discover the footer.phtml in these locations /public_html/app/design/frontend/default/ultimento/template/page/html and /www/app/design/frontend/default/ultimento/template/page/html. Should i just try copy the footer.phtml file to /www/app/design/frontend/default/ultimentocustom/template/page/html or /public_html/app/design/frontend/default/ultimentocustom/template/page/html and go from there? your help is very much appreciated. Also do you happen to have a tutorial how to change the text in the footer to make it shorter or change the background of the footer to an HTML color instead of an image?
Thank you,
jalsaexpress
Hi Jalsa,
I think the problem you’re having is that the Ultimentocustom folder is just that, custom. It only contains the files that you yourself have copied over. With the way Magento “inherits” files from template directories you just need to copy whatever file you want to edit from whatever ultimento folder you’re basing your code on and paste it in the equivalent ultimentocustom sub-directory.
About changing the footer text, we have a tutorial on how to change the four columns of text as well as a short article in our FAQ about changing the links in the very bottom of the footer.
Thanks,
Support
Hi, I would like to use an individual background image for each of the ‘”wt-features” blocks, can you please explain the best way of doing this if it is possible.
Cheers
John
Hey John,
All you have to do is edit the file app/design/frontend/default/ultimento(whichever version of the template you’re using)/template/page/cms/home-top.html. You can edit it like any other HTML file and insert whatever you like.
Thanks,
Support
Where is the file that contains the “footer-bottom-bottom” links, such as the sitemap?
Hey Nick,
We have a section in our FAQ about exactly that under the question, “How do I edit the links in the bottom footer?”. That should give you everything that you need.
Thanks,
Support
on the “new” template you are missing a “-” in front of the “moz-border-radius” for the extended footer in styles.css at line 181. The radius won’t work in firefox if it is not added in. A note to the developer or whomever may notice.
Hey Nick,
Great catch! Thanks for the FYI, we’re making the change now and will make sure to include it in the next release.
Thanks again!
Support
The solutions turned out the simple, combine all the different files into a single large file and compress that file using zip. Unfortunately, if you do this manually you are going to run into maintenance problems. That single compressed file is no longer editable. So after editing one of the original source files you will have to re-combine it with the other files and re-compress it.
http://www.handycss.com/tips/make-css-files-load-faster/