http://www.woothemes.com/ - ready mate templates
3 themes for USD70
Most themes are geared towards Wordpress, so best way to get the theme out of WordPress is to install WordPress on local box, as Wordpress.com is locked down quite hard especially around javascript.
Wordpress download using Web Platform Installer
MySQL 5.1 didn’t work.. just hung.
Downloaded and installed manually MySQL5.5
Then installed wordpress again from WebPlatformInstaller.
install a theme
Rob is using http://www.woothemes.com/2011/01/biznizz/
Blueprint.css
http://www.blueprintcss.org/ – css framework
copy and pasted html source from http://www.blueprintcss.org/tests/parts/sample.html
downloaded blueprint and put files into stylesheets as show above (all except site.css were from blueprint).
typekit
http://typekit.com/
simple, elegant
He is using Katarine Web .. regular and semi bold.
replacing all headings with a new font Katarine.
Ok, so they are different now.
Right hand side is antialiased IE9 rendering.. left is chrome14
Design – Logo
Most logos are simple elegant fonts
Robs likes Kontrapunkt
http://www.smashingmagazine.com/typography-guidelines-and-references/
Installing free Kontrapunkt font:
http://www.fontsquirrel.com/fonts/Kontrapunkt
Paint.NET
350*60 – Logo
920 * 240 – Splash Image
controlling my logo and splash image with css http://www.iconarchive.com/
<div id='logo'>
<img src="/Public/images/VidPubLogo.png" />
</div>
<div id='splash'>
<img src="/Public/images/splashImage.png" />
</div>
CSS Helper
Made a file in App_Code called HTML.cshtml
@helper CSS(string cssFile){
<link rel="stylesheet" href="/public/stylesheets/@cssFile" type="text/css" />
}
then in _Layout.cshtml
Image Helper
@helper Image(string imageFile) {
<img src = "/public/images/@imageFile" />
}
then
@HTML.Image("VidPubLogo.png")
ImageLink Helper, jQuery Helper
@helper ImageLink(string link, string imageFile) {
<a href="@link">
@HTML.Image(imageFile)
</a>
}
@helper jQuery(bool useGoogle = true){
if (useGoogle) {
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
} else {
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.4.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.16/jquery-ui.js" type="text/javascript"></script>
}
}
<div id='logo'>
@HTML.ImageLink("/", "VidPubLogo.png")
</div>
Functions
For code only.. no markup.
@functions{
public static string SiteRoot(bool includeAppPath = true){
var context = HttpContext.Current;
var Port = context.Request.ServerVariables["SERVER_PORT"];
if (Port == null || Port == "80" || Port == "443")
Port = "";
else
Port = ":" + Port;
var Protocol = context.Request.ServerVariables["SERVER_PORT_SECURE"];
if (Protocol == null || Protocol == "0")
Protocol = "http://";
else
Protocol = "https://";
var appPath = "";
if (includeAppPath) {
appPath = context.Request.ApplicationPath;
if (appPath == "/")
appPath = "";
}
var sOut = Protocol + context.Request.ServerVariables["SERVER_NAME"] + Port + appPath;
return sOut;
}
}
this gives us an absolute URL function we can use.
<div id='logo'>
@HTML.ImageLink(URL.SiteRoot(), "VidPubLogo.png")
</div>
<div id='logo'>
<a href="http://localhost:50363">
<img src = "/public/images/VidPubLogo.png" />
</a>
Dynamic Route – Clean and Expressive Linking
From rails world:
So a path gives:
<h2>Here's What You Can Do...</h2>
<p>
<h1>@router.about_path()</h1>
@Html.ActionLink("click here for more info", "about", "home");
</p>
and url gives:
<h2>Here's What You Can Do...</h2>
<p>
<h1>@router.about_url()</h1>
@Html.ActionLink("click here for more info", "about", "home");
</p>
this is using the TryInvokeMember override of dynamics.. ie if a method can’t be found it runs this override.
public class DynamicRoute : DynamicObject {
UrlHelper _helper;
public DynamicRoute(UrlHelper helper) {
_helper = helper;
}
// C# equivalent of methodmissing
public override bool TryInvokeMember(InvokeMemberBinder binder, object[] args, out object result) {
// read in the requested method
var methodName = binder.Name;
//split it for name of route and path/url
var stems = methodName.Split('_');
//lookup up the route by name
var routeName = stems[0];
var url = _helper.RouteUrl(routeName);
//url or path?
if (stems.Last() == "url") {
url = Root(false) + url;
}
//craft up the URL
result = url;
return true;
}
Pass in parameters:
<h1>@router.about_url(new { id="steve"})</h1>
gives:
and refactored a bit more so no parenthesis needed:
<h1>@router.about_url</h1>
gives:
or
<h1>@router.about_path</h1>
gives
or
<h1>@router.about_path(1)</h1>
Final code:
public override bool TryInvokeMember(InvokeMemberBinder binder, object[] args, out object result) {
var url = GetUrl(binder.Name, args);
//craft up the URL
result = url;
return true;
}
private string GetUrl(string methodName, object[] args) {
//split it for name of route and path/url
var stems = methodName.Split('_');
//lookup up the route by name
var routeName = stems[0];
var url = "";
//if there are any parameters eg /about/2
if (args.Length > 0)
//pass in the first argument
if (args[0].GetType() == typeof(string) || args[0].GetType().IsPrimitive) {
url = _helper.RouteUrl(routeName, new { id = args[0] });
}
else {
url = _helper.RouteUrl(routeName, args[0]);
}
else
url = _helper.RouteUrl(routeName);
//url or path?
if (stems.Last() == "url") {
url = Root(false) + url;
}
return url;
}
public string Root(bool includeAppPath = true) {
var context = HttpContext.Current;
var Port = context.Request.ServerVariables["SERVER_PORT"];
if (Port == null || Port == "80" || Port == "443")
Port = "";
else
Port = ":" + Port;
var Protocol = context.Request.ServerVariables["SERVER_PORT_SECURE"];
if (Protocol == null || Protocol == "0")
Protocol = "http://";
else
Protocol = "https://";
var appPath = "";
if (includeAppPath) {
appPath = context.Request.ApplicationPath;
if (appPath == "/")
appPath = "";
}
var sOut = Protocol + context.Request.ServerVariables["SERVER_NAME"] + Port + appPath;
return sOut;
}
}
Custom View Page
It would be nice to have this on every page without having to put a link in the header
@{
Page.Title = "My Home Page: VidPub";
dynamic router = new VidPub.Web.Infrastructure.DynamicRoute(Url);
}
but if we put a link in the _ViewStart as:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
Page.Title = "Welcome to VidPub";
Page.Router = new VidPub.Web.Infrastructure.DynamicRoute(Url);
}
then would have to call:
<h1>@Page.Router.about_path</h1>
hmmm.. we can, by overriding the pages base class
Web.config in views directory.
<!--<pages pageBaseType="System.Web.Mvc.WebViewPage">-->
<pages pageBaseType="VidPub.Web.Infrastructure.VidPubViewPage">
and here is our overridden base:
public class VidPubViewPage<TModel> : WebViewPage<TModel> {
public dynamic Routes { get; set; }
public override void InitHelpers() {
//keep all the exisitng helpers in MBC
base.InitHelpers();
//add our own helper
Routes = new DynamicRoute(Url);
}
public override void Execute() {
base.ExecutePageHierarchy();
}
}