Kohei Nozaki's blog 

Entries tagged [css]

Customizing Roller's Gaurav theme

Posted on Tuesday Feb 03, 2015 at 04:37PM in Technology

I started using Gaurav theme which is HTML5/CSS3 enabled responsive theme, introduced with Apache Roller 5.1. it enables us to use same HTML template for various browsing environment such as smartphones, tables and PC. it changes its layout to suit these different displays automatically. and I added some customization as my prefer.

For smartphones and tablets

I added following definition to the template standard_head to use of appropriate viewport and font size.

<meta name="viewport" content="width=device-width"/>

Also added some to style sheet:

/* to prevent narrower displaying in iPhone */
div.entryContent code {
    white-space: pre-wrap;
    word-wrap: break-word;
}

div.entryContent a {
    word-wrap: break-word;
}

Add tweet button and Twitter widget

Add following snippet to standard_head template.

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Add following snippet to _day template. I put it just after the title of an entry. don’t forget to put your account into data-via attribute.

<a href="https://twitter.com/share" class="twitter-share-button" data-url="$url.entry($entry.anchor)" data-text="$entry.title" data-via="[YOUR TWITTER ACCOUNT HERE]">Tweet</a>

I also added Timeline widget which can be created in Twitter website (user configuration page) to Weblog template.

Add Google Adsense

I added responsive units into standard_header, standard_footer and Weblog templates.

Recent entries

I added recent 20 entries listing to Weblog template as follows:

<div class="well">
	<h3>Recent entries</h3>
	#set($recent = $model.weblog.getRecentWeblogEntries(nil, 20))
	<ul>#foreach($recentEntry in $recent)
		  <li class="entryLink"><a href="$recentEntry.permalink">$recentEntry.title</a></li>
	#end</ul>
</div>

Recent comments

I added recent 10 comments listing to Weblog template as follows:

<div class="well">
	<h3>Recent comments</h3>
	#set($recent = $model.weblog.getRecentComments(10))
	<ul>#foreach($recentComment in $recent)
		  <li class="entryLink">
		  #if($utils.isNotEmpty($recentComment.url))
		  	<a href="$recentComment.url">$recentComment.name</a>
		  #else
		  	$recentComment.name
		  #end
		  on
		  <a href="$recentComment.weblogEntry.permalink">$recentComment.weblogEntry.title</a>
		  </li>
	#end</ul>
</div>

Calendar

Added following snippet in Weblog template to show Calendar:

<div class="well">
<h3>Archives</h3>
#showWeblogEntryCalendar($model.weblog "nil")
</div>

Also tweak its style:

table.hCalendarTable {
	width: 100%;
}

Using Web Font

I like to use Oswald font to headings so I added following to standard_head template.

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Oswald"/>

Also added following to stylesheet:

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: Oswald,Helvetica,Arial,sans-serif !important;
}

Tweak other fonts

Added following to style sheet:

body {
	font-family: Georgia, Palatino, Verdana, Libertine, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
}

div.entryContent pre, div.entryContent code {
	font-family: Menlo,Inconsolata,Consolas,'Ubuntu Mono',monospace;
}

div.entryContent pre {
	font-size: 85%;
}

Minor tweaks

I added following element to inside head element of a template named TagsIndex which is missing custom.css.

<link rel="stylesheet" href='$url.page("custom.css")' />

Removed following element from _day template because I’m the only person who is writing the blog.

<p class="lead">by <span style="text-transform: capitalize;">$entry.creator.screenName</span></p>

About jquery.min.map

In some environments jQuery requests a file named jquery.min.map and Roller returns 404. someone said that it makes debug of jQuery easier. I think there’s no side effect for regular use but following procedure would resolve the issue. note that you have to do this before copying initial template.

  1. Download http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.map

  2. Put jquery.min.map to $ROLLER_HOME/themes/gaurav/js

  3. Put <resource path="js/jquery.min.map"/> to theme.xml

  4. Reload roller

  5. Change the theme of your weblog to custom theme using Gaurav

Other issues

I filed following issues that I found during customization and attached patches to solve.

Comments [1]

Tags: css html roller

Hot tags

Below are the most often used tags in the blog. Hover over a tag to see a count of entries, click a tag to see the most recent posts with the tag.