<meta name="viewport" content="width=device-width"/>
Customizing Roller's Gaurav theme
TweetPosted 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.
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.
-
Download http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.map
-
Put
jquery.min.mapto $ROLLER_HOME/themes/gaurav/js -
Put
<resource path="js/jquery.min.map"/>to theme.xml -
Reload roller
-
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.
