How to change style of items in Sitecore

I just love the way Sitecore allow me to customize its UI, change look and feel, override pipeline etc.

Sitecore provides a web UI to user which is ultimately HTML for browser. So everything that is applicable on HTML is also true for Sitecore UI.

There are some important items present in content tree which we need to show to content editor in different format. So sometimes we need to change look and feel of these item in content tree.

Content items in tree are actually <span> inside Hyperlink HTML tags.

Before applying any style, my content tree looks like

Before applying style

For applying style to item,

• Select item
• Select Standard fields checkbox in View Tab
• Open "Appearance" section
• Put you CSS style into "Style" field.
• Refresh your content tree.

I am using below style for two items

• color:red;
• font-size: 24px;color:orange;background-color:black

Once you put this style and refresh content tree, now my content tree looks like

After Applying style

Sitecore add this style to <span> tags inside hyperlink at runtime as

<span style="font-size: 18px;color:orange;background-color:black"><img src="/temp/IconCache/Applications/16x16/Document.png" width="16" height="16" class="scContentTreeNodeIcon" alt="" border="0">List 2</span>

Style in span

I hope you like this Sitecore customization lesson. Stay tuned for more Sitecore related articles.

Till that happy sitecoring :)

Please leave your comments or share this article if it’s useful for you.

ROBOCOPY : Auto Push static files to hosting environments

Developers are working on their development machine during website development phase. Once they are done with their file changes, they are going to publish those changes. 

They can do publishing at any time without any efforts. But if solutions have lots of projects then this process take times. 

Can we avoid and minimize this time and automate this process at least for static files like 

images, HTML, views, aspx, css, js etc.?

Answer is YES. We can automate this process to sync development static files folders with Published folders.

Even we can push development change static files to QA and staging environment folders which are across the network.

Sync

How to push the changes?

I am using a batch file with ROBOCOPY command in my development machine for this.

ROBOCOPY stand for robust file copy and this command allows you to copy files, directories, and even drives from one location to another.

Robocopy monitor the source folder and if any change happened in that folder like new file created, file deleted, updated etc. then Robocopy takes all the files and replace those files on destination folder.

Syntax : ROBOCOPY source destination [options]

Create a batch file in solution root folder and put below script 

@ECHO OFF REM this batch file uses robocopy to monitor certain folders in the web projects for changes REM and copies the changes to the web directory to save time when editing non compiled REM files such as javascript CSS and cshtml SET SITEROOT=C:\inetpub\wwwroot\SitecoreLessons\Website SET SLNROOT=%~dp0 SET OPTS=/MIR /MON:1 /MOT:1 /NJS /NDL /NP /NS /NC START ROBOCOPY "%SLNROOT%\SitecoreLessons\Assets" "%SITEROOT%\Assets" %OPTS% REM You can put multiple Robocopy command here like REM START ROBOCOPY "%SLNROOT%\SitecoreLessons\Views" "%SITEROOT%\Views" %OPTS% @EXIT

Here is the description of this batch file for those who don’t have any knowledge of batch files

ECHO -> Used to print on output device

REM -> Used to write comment in batch file

SET -> Used for declaring the variable like SITEROOT variable is used to store my destination folder path.

%~dp0 -> Current directory path from where this batch file is running

I have defined “OPTS” variable which stores ROBOCOPY command options

Options	Description
MIR	MIRror a directory tree
MON:1	MONitor source. Run again when more than n changes seen.
MOT:1	MOnitor source. Run again in m minutes Time, if changed.
NJS	No Job Summary.
NDL	No Directory List - don't log directory names.
NP	No Progress - don't display percentage copied.
NS	No Size - don't log file sizes.
NC	No Class - don't log file classes.

You can get more option from http://www.computerhope.com/robocopy.htm

Double click on this batch file to start monitor our source “Assets” folder as

Batch File

I have added “Assets\Images” folder in my VS projects and paste some image files in this folder. 

Note: - I have not build or publish my VS solution till now. 

But if I wait for 1 min. I got new all image files in my “C:\inetpub\wwwroot\SitecoreLessons\Website\Assets\Images” folder automatically.

Sync Images

Wowww. This is cool. Now I can write more Robocopy command in same batch file for copying Views, ASPX, HTML files etc.

I hope this pointer helps you to improve your productivity in your development environment.

Please leave your comments and share this trick with other developers.