Sunday Dec 28, 2008

Optimising a Roller theme for printing

Inspired by Phil Harman's Trials with his roller theme I have wanted to create a better hard copy experience for you. I implemented this earlier this morning on my blog's roller files. It has been tested using Opera's print preview on the main weblog page and the comments view of an article and so should work on a view based on a tag, category, or date.

I have implemented a 2nd CSS file. Because my theme's base is so old, it is not conformant to the stylesheet/theme file structures of today's roller so I implemented it as just any old template file. The form lets you know/set the URL. It contains the following rules.

.noPrint
    { display: none; }
.noshow
    { visibility: hidden;}

It is introduced to the weblog using the following code in the weblog template file, in the HEAD section. The assignment in a LINK or STYLE tag with the MEDIA="print" attribute is what applies this rule only when printing.

<LINK HREF="http://blogs.sun.com/DaveLevy/page/print.css"
    TYPE="text/css" REL="stylesheet" MEDIA="print">

I used the 'new file' form to set the url of the new file as above, but named it _printcss; it needs a preceding _ to become invisible to some of the roller macros such as #showBasicNavBar, and the form won't permit a .css suffix. It might be cleverer to call the file _cssprint, so that the css files are all adjacent to each other in an alphabetic sort, which you get on the 'edit templates' form.

I have applied the 'noPrint' rule to the Banner, the webCategoryChooser and Sidebar. I have not used the 'noShow' rule, which I developed to apply to objects that occupy vertical space in a table. The rules are applied to a DIV for the banner, P for the web catgory chooser and TABLE for the sidebar. Another pointer to the fact I must find time to remove the tables from this theme. I am working on it I promise.

tags:

Friday Sep 26, 2008

About CSS, two column page

I noticed that my home page web site suffered from the same problem that the public blog used to, it didn't have a width constraint and as the browser grew to full screen size the content pane gets wider and wider making paragraphs harder to read. Like this, if you look hard.

my old site

In the article Fixing my blog theme..., on this blog I described how I implemented automatic margins using a fixed width and <CENTER> tag. davelevy.info does not use tables for formating its page and for some reason, the technique didn't work, although this may have been due to a fault in my code. Anyway, I now have a better answer.

Bluerobot, suggests using

margin: auto;

as the technique for centering the document object. From my previous work, I know I want to specify a fixed width and reckon that 1000px is a good fixed width for the document. I havn't explored if amending the <BODY> rule has the effect I want, since while I did apply the rules to the BODY tag, I need a whole page encapsulating DIVision for other reasons and my current solution is to apply the CSS sub-rules to that DIVISION's rule. The old page had three divisions, a banner/header, main content and the menu. Apart from the exterior automatic margins the second part of the problem is to ensure that the positional rules for the three divisions work correctly, most importantly that the positional rules inherit the page constraints we are defining.

This tutorial at http://www.barelyfitz.com, explains how to use relative and absolute position attributes to do what's required. I tested it with the following code,

.outer {
    position: relative;
    width: 500px;
    margin: auto;
}
.inner {
    position: absolute;
     top: 10px;
    right: 20px;
    width: 250px;
}

The BODY section contains,

<DIV STYLE="background-color: gray" CLASS="outer">
<P>Outer</P>
<BR><BR>
<DIV CLASS="inner" STYLE="background-color: #0080C0">
<P>Inner</P>
</DIV>
</DIV>

and this looks like this,

screenshot

the key thing I had to learn was that the encapsulating division needs to be defined as relative, and the interior object is then defined as absolute and the locational parameters in the .inner i.e. top & right are then absolute within the .outer division. Does this make sense? I have underlined the position attribute values above. The other key lesson is to learn that CLASS and ID attributes are different. On my home site, I use IDs throughout; I was advised to use them originally.

So I need a new DIVision, this is called #Page and associated with the division via the ID attribute

#Page {
    margin: 0px auto;
    width: 1000px;
    position: relative; }

I have moved the location breadcrumb into the Header/Banner division, but otherwise left the #Header division alone, it inherits the width from #Page; it is encapsulated bt tghe #Page DIVision. The #Content DIVision I have left alone, and is placed in the default location, which is within #Page.

The #Menu division rule has had the following lines added

position: absolute;
top: 75px;
right: 20px;

The page structure is as follows

<DIV ID="#Page">
    <DIV ID="#Header"></DIV>
    <DIV ID="#Content"></DIV>
    <DIV ID="#Menu"></DIV>
</DIV>

which is what's wanted, a nice list of html content, with all the look and feel held elsewhere, just paragraphs, links, and division statements. Actually the banner is a table still, but now I have a fixed width, I can work on making an image file. The outstanding job is to work out how to create and name a rule for the paragraph containing the breadcrumb trail.

davelevy.info

and this is what the index/home page looks like. You can see the two whaite space margins either side of the page. I have briefly tested it with Opewra, Firefox and Explorer.

tags:

Saturday Sep 20, 2008

Braindead Browsing

I wonder what it would take to embed browser awareness in this blog theme. I have been experimenting with creating pages for my phone's browser without much success but it might be a good idea to try and simplify the theme for braindead browsers.

tags:

Tuesday Sep 16, 2008

Cool Cool Iris, an image optimised browser

I had a swift meeting with Juan Jose of Telefonica which while we had some important stuff to share, he just had to show me Cool Iris.

Cool Iris screenshot

This is a browser optimised for image and video content. The screen shot above is a view of my flickr photostream. The one below, shows a selection which has been enlarged and has some 'go to' buttons, which takes you to the web page holding the picture, which is more useful if you use their pre-canned queries; we all know what a flickr page looks like, but if using it to browse a news stream, it can act as a very rapid filter.

cooliris screenshot

It has a search engine interface which allows you to fire queries at the usual suspects, the picture below shows the response to a query on flickr for the tags 'beach sunset'

Cool Iris Screenshot

You can also see the screen shot [full size], and hovering over the link shows it via snap preview, which is now so small its a bit poor.

Another clever feature, is that it can be installed using a Firefox browser addon, which then has a button, on the button bar, that tells you if the site you're browsing in firefox is"cool iris ready". I wonder what it would take to get Roller sorted.

For various reasons, I created a tiny.url, which they offer a preview of depending on your settings.>/P>

tags:

Wednesday Aug 27, 2008

Fixing my blog theme for Firefox 3

I adopted Firefox 3 the other week and it became obvious that there were several bugs in my weblog theme. These are now fixed, or I hope so.

So the weblog is now the width of the banner picture, we don't get the horrible repetition effect if the browser window is made too large. The weblog is also centre justified in the panel. In order to get this effect I have placed a <DIV style="width:1024px"> around all the content in the weblog file. 1024 pixels is the width of the picture in my banner. In order to ensure the html version of the weblog is located in the centre of the browser panel, I have surrounded this DIV with a <CENTER> tags. Interesting how easy the changes were, but the testing and clumsiness of roller's interface has meant that its taken me along time to get to this point.

I have discovered some additional problems with the theme, which I have fixed in my development environments, but not here yet. The planned end goal is to remove the tables from the theme and replace them with <DIV>s and CSS rules.

tags:

Monday Aug 11, 2008

simplifying my roller blog

I have removed the 'More tags and links' page from this site. I am looking to improve the theme in several ways and the the "More tags...." page only added only a view of my delicious tag cloud which can be seen at delicious.com, davelevy.info and sometimes at my bliki's tag page. The price of this was several theme files which I will be removing to simplify the task of moving forward. Both features require encapsulating everything in <DIV> tags, so the less to do the better.

tags:

Thursday Aug 07, 2008

Roller theme revision

The last article contained several javascripts and I discovered that the RTF editor on roller strips them out, so I am back to the raw text editor and writing in HTML.

Also it's the first article I have used sub-headings in for several years. I have amended the h1 and h2 css rules. I have assigned the h1 rule to the article title lines in the _day file and used the h2 tags in the article content fields. I am working on a major theme release which I'll contribute when finished.

tags:

Wednesday Apr 16, 2008

The photo in my banner V2

Several months, or maybe longer, I changed the banner picture from a duck in a pond to the picture above which was taken by Simon Phipps. Simon's pictures can be seen at http://www.istockphoto.com/webmink, or at http://flickr.com/photos/webmink/. I didn't accurately amend the copyright statement and flagging in the banner. I have now. To be clear, the picture on this site, is not to be copied or re-used. The original is on Simon's Flickr site, and published under the creative commons, by-nc-nd.

tags:

Wednesday Feb 07, 2007

More about my Look and Feel

I have just changed my banner picture and the anchor tag colours. Hope you like it, but I might have to look for a different banner picture. Any ideas?

tags:      

Wednesday Jan 31, 2007

Changing my version of the Currency theme

I have just made a few changes to my blog roller theme. I have moved the tag cloud into the banner; if like me you often look at the blog on a laptop, there's not much room for what I'm writing after the duck and tag cloud and all the navigation widgets.

This isn't ideal. I have played with the new opacity feature to see if I can get a better answer, but this is about as good as it gets. There is a text background on the the tags, so each one can be read as you move the mouse around the cloud. Ideally, I'd like to have a text background which was an opaque white for the tag cloud, or even declare the table cell in which the tag cloud was displayed as having a background of opaque white so that the text would stand out more. I suppose I could change the hyperlink colours, but I'm not sure what'd go well in front of my duck. Instant Color Schemes at http://www.gpeters.com may help, and I found cssplay.co.uk/opacity/  useful in experimenting with opacity.

tags:

Sunday Dec 10, 2006

Personalising the roller Sotto theme

A principal engineer colleague, John Stanford has just kickstarted his blog and is using the "Sotto" theme. With respect to themes, one of the most requested theme amendments I've seen has been How to amend the pictures in the Sotto theme? I and some colleagues looked at this some time ago and I posted most of this article internally. On review, there is nothing requiring secrecy in it, so I thought I'd re-post it here.

I think Sotto is a pretty and relaxed theme, but I suspect that most people will want to change the pictures to develop a uniqueness and personality. There are some other problems with Sotto, which I may return to at another time, but for now, here's how I amended Sotto. I originally demonstrated the effect by converting my private blog to Sotto, but I shan't be doing this here, so I have instead posted a picture of John's blog.

 

John's Blog

 

Firstly select the pictures you want and upload them to your ../resource directory by logging into roller and selecting the "File Uploads" sub-tab from the "Create & Edit" tab

In my case the pictures had been chosen and munged to have the same height, which was different from the theme's default pictures. This change of height needs to be managed. (See below).

I'd never selected Sotto as my first theme, but I had an empty _css file in my page templates file list. Select Sotto as your theme and then press the customize button. This copies Sotto into your local file folders. Sotto's global theme styles are held in /roller/themes/sotto/styles/default.css. Sotto declares style alias for the three pictures, which it calls gutter images. These are located within a div tag which also has a style. This style is called #gutter. Using the hyperlink above, (and checking that it remains accurate by reading the page source ), you can obtain the CSS code source for #gutter & #gutterimage[1-3]. Cut and paste these into your local _css file. Now amend the file names!

Each of the css rules has a height attribute, set them as appropriate i.e. the images with their height set to the height of the picture and the gutter set to two greater. The image aliases have a width parameter, set these as appropriate. I set #gutter's height to be two greater than the images as this is how the original author sized it. Obviously the background attribute needs to be set appropriately and we use the url() descriptor to do this. The new pictures are held in /roller/${yourloginname}/resource. The simplest way to get these is to open them in a browser and cut and paste the URL into the _css file. If you want more pictures, then create more #gutterimagen alaises; one for each picture. This is all that is required of the CSS file.

We now need to amend the weblog page template to ensure that our new CSS file is interpretated at the correct time in the cascade. The changes required are as follows:

     <style type="text/css">#includePage("_css" )
    </style>

must be inserted after the

    #showThemeStyle("sotto" "default.css" false)

line. This forces the new _css file to be included and interpreted after the default file. The default file sets the gutter and gutterimages to have a default height and use the default pictures, and our new _css file overwrites these settings. This is enough if you require three pictures. If you require some more pictures then,

    <span id="gutterimagen">&nbsp;</span>

needs to be added as appropriate. Look at Sotto's weblog file, you'll see what I mean.

tags:

Thursday Nov 30, 2006

Tags in Roller & Technorati

Two days ago, I looked at how to display the tags assigned to an article hosted in roller and left the question of generating techorati tags unfinished.

<!-- Now lets technorati tag the tags -->
<P><small>technorati tags:
    #set ($mytags=$entry.tags)
    #foreach ( $tag in $mytags )
        <a rel="tag" href="http://technorati.com/tag/$tag.name">$tag.name</a>
        <!-- NB there is a trailing space on the line above #end -->
    #end
</small></P>

should produce the technorati tag list in a small font paragraph. Now on to Chris's challange.  

I have a challenge about how to migrate forward, since if I put this code in the _day file (inside the entries loop), than I will get the technorati tags twice, for those articles with both roller tags and technorati tags specified. This is caused by my eagerness to load my tags into roller to see my tag cloud; thats why I have articles with both roller and techorati tags. I might be able to create a local velocity macro and use this as content within an article, but I think the _day file is the right place. Have to think about it.

The tags are thus still done by hand.

 

tags:

Monday Nov 27, 2006

Tuning tags for query & propagation

I am still hand coding the the tags in this blog. Roller has a macro to display a hyperlinked tag list but resolves the links inside the roller instance.

<P><small>tags: #showEntryTags($entry)</small></P>

However, I still want to use technorati, so I am copying the tags from the input text box into the content body and using the topic plugin to create my technorati tags. (Actually I don't even necessarily always keep the same tags, but I am pretty consistent.) I wonder how to write velocity code to build the technorati tag list.

tags:

Friday Nov 10, 2006

Tag Clouds & Tagrolls

I have a new feature on the Blog called More Tags & Links, currently labelled as Beta. 

This has my roller tag cloud and also a tag roll from del.icio.us. I hope you find it interesting.

Due to screen real estate problems I have removed the page menu from the main panel on the blog front page. It remains at the top of my front page sidebar.

tags:

More about Tag Clouds on roller

Another e-mail exchange with Dave Johnson, and a quick look at the Velocity manual and I have produced the tag cloud at the top of this page which only includes those tags, with more than two occurences.

I set an interest threshold, and then within the foreach tag loop test the tag count against the interest theshold.

  #set ( $interestthreshold=2 )
  #set($mytags=$model.weblog.getPopularTags(-1, 100))
  #foreach ($tag in $mytags)
      #if ( $tag.count > $interestthreshold )
        <A CLASS="tag s${tag.intensity}" HREF="$url.tag($tag.name)"
           TITLE="$tag.count"> $tag.name</A>
      #end
  #end

The tag is only written if tag count is greater than the threshold.

tags:

About

DaveLevy

Search

Archives
« April 2014
MonTueWedThuFriSatSun
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    
       
Today