Umbraco Styling

Today I dramatically altered the look of my site. I also made a transparent version of the fanoe template.

I started by taking the fanoe.css and saving a copy by pasting it into Notepad++. There may be a better way, but that's how I started. Then I made a copy and deleted all the colors and background colors. I did this because I wanted to start without a color scheme, so I could add my own. But, I liked everything else about the template, like the sizes and positions and z-indexes, etc. If you would like a copy of fanoetransparent.css, just view the source of this web site. You'll see it.

I also made a fanoecolors.css file, which is the opposite. I deleted everything except the colors. I didn't end up using it, but it is handy to have for reference.

After I did that, I started adding in the new styles I wanted. These go in the "style" stylesheet. I added the halftone screen as a background of the html element and the BANG! logo as a background to the body element. You can see everything I did in style.css by viewing source. It didn't take much, because the fanoetransparent.css file does all the heavy lifting.

Since I'm not using a brand logo in the navigation anymore I had to add a "Home" link to the main navigation partial view. To make it highlight like the other links when selected, I used the following razor code:

<li class="has-child @((home.Name == CurrentPage.Name) ? "selected" : null)"><a href="@home.Url">Home</a></li>

Anyway, it was fun. It was easy, though it took a little time. I'm happy with it, though I'm sure I'll continue tweaking.

Bottom line: I'm still loving Umbraco.