[i3 Theme] The problem of overlapping titles

[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:

[Timbalu]

You forgot the question
index.tpl - your header part

Code: Select all

<h1><a href=***>{$head_title|@default:$blogTitle|truncate:80:" ..."}</a></h1>

[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?

[Timbalu]

|truncate:80:" ..."

[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

[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

[Timbalu]

But you did try to use different integers? Like
|truncate:60:" ..."
or more less?

[Sasni]

I changed the CSS, truncate does not work. Thanks for your help