In sitecore, where can I add my own custom CSS?

Question

Our sitecore developer quit suddenly and I need to make a small change. I'm a front end developer and have no real experience with the sitecore backend. I just need to add some CSS styles to the main style.css file or I need to add my own file. I've got full access to the CMS, but no access to the hosting account. I'm trying to find the main CSS file through the CMS browser, but I'm not having any luck.

Can you help me either: A) Locate the main CSS file so I can add some classes (preferred) B) Add my own link in the tag to my own CSS file hosted on another domain C) Use the home page link to CSS file where I can add some classes

A note about OPTION C... I'm in the CMS and I see there is a system folder and in that a CSS folder where I can add a custom.css file. Then I go to the home page and I can actually call that CSS file from a field in the home page BUT, when the site loads, even though it's calling this file, it comes over as .aspx and it's blank so no styles I set are applied.

Answer 1

you can find the location of file as suggested by Maciej or use firebug or any other developer tools to find the location of main style.css. Once you get the location you can browser the physical file on server by going to Sitecore start menu -> All Application ->File explorer . Download file using File explorer make your changes and upload it back, make sure you check override existing file when you upload. Also make sure you upload file to delivery server once you test your changes, typically you will be accessing Sitecore using Authoring Server so instance you are accessing might not be same as CD server.

Answer 2

You could right-click in your browser to figure out where your css is coming from relative to the server root. Although not completely fool-proof, this method may give you a quick answer.

According to documentation for sitecore 6.2, style sheet location is determined by the developer so it could be anywhere that the developer has chosen.

Take a look at this answer for more details.

Answer 3

You should also be wary of how code gets built and deployed. Most Sitecore developers have very specific methodologies for how they include code (including front end) in their solutions.

Make sure you're aware of any deployment methodologies your developer used, so that your work doesn't get overwritten in a future deployment.

Did they use a source control management solution (like Git or TFS)? Did they use an automated tool to do deployments (like Octopus Deploy)?

Answer 4

If you can find main CSS file in physical location, you can update the file with new CSS styles.

If you want to add your own CSS as an additional CSS style, you might need to create a new template for css link and use that template when you create new page with your own CSS.

Answer 5

Just for future reference, by default the location of the used css files is described in Sitecore.config like this:

    <!--  WEB SITE STYLESHEET
        CSS file for HTML content of Sitecore database.
        The file pointed to by WebStylesheet setting is automatically included in Html and Rich Text fields.
        By using it, you can make the content of HTML fields look the same as the actual Web Site
  -->
<setting name="WebStylesheet" value="/default.css"/>

Paths are relative to the root of your sitecore installation, you can find default.css in the root of the sitecore application on the webserver.

Answer 6

在Chrome浏览器中，检查元素并选择“源”选项卡，然后打开所需的CSS文件并进行更改。