Community

Is there a simple way to override all the default SquareSpace icons/images with an identically named set of image files we provide? (other than to manually edit all the CSS files referenced by our sites - yikes!).

I thought there might have been a specifically named File folder that SquareSpace might reference for media file overrides?

On this same topic, is there a link in the documentation that lists the names and sizes of all the default icons/images that a standard SquareSpace site uses by default? We would like to provide this information to our graphics artist vs. having someone try to reverse engineer this information by hand.

Any suggestions?

Thanks!
Malcolm

Hi Malcolm,

Could you maybe be a little more specific? Which icons and images are you referring to?

Hi Stephen,

> Which icons and images are you referring to?

The SquareSpace stylized gray icons that show up underneath blog postings, comments, tracked changes items, etc.

BTW: These graphics look great, but we have a specific look we're trying to achieve so we would like to use our own graphics.

Thank you,
Malcolm

Great info and really appreciated!

Thank you Michael!

Regards,
Malcolm

I'm trying to do this too, but I know nothing about CSS or anything. Can you please give me detailed instructions? Like where exactly do I insert the code? In style editing mode? In website settings?..and...do I insert the file name after every .png listed in the above code? As you can see, I know nothing about these things :) I can't figure out how to change the cube out to my own icon..

Let me know and thanks!

Joseph

Joseph : To insert the code you must be in Styele Editing mode - then chose Custom CSS. In Custom CSS you paste the code in. As an example; if you just want to change the icon for date then paste in this bit :

.date-icon { background: transparent url(/universal/images/core-resources/icons/dark/date.png) top left no-repeat; }

To use one of your own icons upload it to the File Storage on your account. To do this click on Website Management in the upper left corner, then click on File Storage under the Data & Media field. Once in you click the button Upload File and the choose the file from your PC/Mac (in this case the Date icon)
When it´s uploaded rightclick the file and copy the URL.

Now let´s go back to the Custom CSS in Style Editing mode.
What you have to change is this part : /universalimages/core-resources/icons/dark/date.png. - instead paste the URL to your own icon. Then click Save CSS Changes and you should be ok.

= )

Just tried the code as provided at the start of this thread. Worked a treat but I wonder how I can get the actual menu item to center align vertically in the new menu bar? I'm try to learn CSS slowly. I feel wholly inadequate since starting to play with Sqaurespace having only use CSS before to control the look of my text etc in websites.

I am trying to replace the standard SS icons with my own. Specifically the icon for adding a audio file to a journal entry. I would like to insert a play button instead of the standard file icon. I read the posts above and when viewing my custom css i only see a small portion of my css. When i click the view style sheet i can view all the css but not edit it. Any information on how to access all of the css so it is editable would be greatly appreciated

cornerstoneaustin.org/messages

above is a link to the page I am referring to.

Hi Aaron,

You don't actually need to see all the CSS to accomplish what you want. The CSS you put here will effectively override the CSS elsewhere in the squarespace system. Just paste the entire css code Michael Zampino gave you (or pick and choose the icons you're going to replace) and change the URL cited to point to the custom icon file in your storage area.