Page 1 of 1
[i3 Theme] The problem of overlapping titles
Posted: Tue Jun 14, 2011 11:31 am
by Sasni
If I have a long title of the post, the title overlaps the blog title
http://www.sasni.eu/archives/315-Konfig ... s_x64.html
it looks like this:
Re: [i3 Theme] The problem of overlapping titles
Posted: Tue Jun 14, 2011 11:39 am
by Timbalu
You forgot the question
index.tpl - your header part
Code: Select all
<h1><a href=***>{$head_title|@default:$blogTitle|truncate:80:" ..."}</a></h1>
Re: [i3 Theme] The problem of overlapping titles
Posted: Tue Jun 14, 2011 12:00 pm
by Sasni
Sorry, I thought it was obvious that I want to fix it.
my header:
Code: Select all
<h1><a href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle}</a></h1>
<div class="description">{$head_subtitle|@default:$blogDescription}</div>
add a tag <br> after </ h1> gives nothing
how can I fix it?
Re: [i3 Theme] The problem of overlapping titles
Posted: Tue Jun 14, 2011 12:11 pm
by Timbalu
|truncate:80:" ..." 
Re: [i3 Theme] The problem of overlapping titles
Posted: Tue Jun 14, 2011 12:58 pm
by Sasni
i tried something like this:
Code: Select all
<h1><a href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle|truncate:80:" ..."}</a></h1>
<div class="description">{$head_subtitle|@default:$blogDescription}</div>
and:
Code: Select all
<h1><a href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle|truncate:80:"$head_subtitle|@default:$blogDescription"}</a></h1>
<div class="description">{$head_subtitle|@default:$blogDescription}</div>
and:
Code: Select all
<h1><a href="{$serendipityBaseURL}">{$head_title|@default:$blogTitle|truncate:80:" blah, blah, bah"}</a></h1>
<div class="description">{$head_subtitle|@default:$blogDescription}</div>
and no effects
Re: [i3 Theme] The problem of overlapping titles
Posted: Tue Jun 14, 2011 1:07 pm
by yellowled
Option A: Limit your titles to a suitable length.
Option B: Reduce the font-size for the title.
In your style.css, find:
Code: Select all
h1 {
color: #FFFFFF;
font: 30px/100% "Trebuchet MS",Arial,sans-serif;
left: 25px;
and change the font-size to i.e. 24px – however, this will only solve the problem to a certain extent.
Option C: Change the positioning of the description.
In your style.css, find and change the .description definition like this:
Code: Select all
.description {
color: #000000;
font: 12px Arial,Helvetica,sans-serif;
left: 25px;
position: absolute;
top: 105px;
}
Option C is probably the best solution – you don't have to truncate anything and it gives you 2 full lines for the header.
Edit: However, I only tested this quickly on the fly in Firefox. You could experience side effects in other browsers.
YL
Re: [i3 Theme] The problem of overlapping titles
Posted: Fri Jun 17, 2011 9:40 am
by Timbalu
But you did try to use different integers? Like
|truncate:60:" ..."
or more less?
Re: [i3 Theme] The problem of overlapping titles
Posted: Sat Jul 02, 2011 11:01 am
by Sasni
I changed the CSS, truncate does not work. Thanks for your help