Blog with Processwire

[pwired]

Hi,
I am setting up a Blog for somebody and am using Ryan´s blog profile for it.
Have been looking for how to add a logo and 3 language flags in the top.
After checking on the skeleton grid in the forum and playing around,
it´s actually quite straigt forward how to do it:

Upload your logo image and language flag images to: templates/styles/images/
In /site/templates/ open main.inc and
Look for:

<div id="masthead" class="sixteen columns">
            
Insert after:    
        
<div id="site-logo" class="two columns">
<img style="width:95px;height:90px;" src="/site/templates/styles/images/logo.png" alt="" border="0"></img>     
</div>    

Look for:

<?php echo "<a href='{$config->urls->root}'><h1>{$homepage->headline}</h1></a>"; ?>
<?php if($homepage->summary) echo "<h5>{$homepage->summary}</h5>"; ?>
</div>

Insert after:

<div id="flag_images" class="three columns">
<a href="/ge/"><img src="/site/templates/styles/images/flag_ch.png" alt=""  /></a>
<a href="/en/"><img src="/site/templates/styles/images/flag_en.png" alt=""  /></a>
<a href="/es/"><img src="/site/templates/styles/images/flag_es.png" alt=""  /></a>
<h5>Language</h5>
</div>

Then in /site/templates/styles/ open main.css and
Look for:

#masthead h5 {
margin: 0.25em 0 0 0;
}

Insert after:

#flag_images img {
float: left;
margin-right: 2px;
margin-bottom: 10px;
}

Note1:
to avoid doing things like  #flag_images {clear: both;} or using pseudo code at the end
you can float only images found between <div> tags with an ID of "flag_images"

Note2:
Depending on the size of your logo and language flag images
the number of columns may vary in class="x columns"

Ok it all works but still things to do

a) putting the word Language in <h5>Language</h5> in a variable so I can output it
depending on the language: Sprache, Language, Idioma.

b) moving the logo more to the left. There is an off-set somewhere,
maybe in the skeleton css.

c)
Instead of hard coding things like /site/templates/styles/images/flag_ch.png
using variables.