You are not logged in.

Announcement

Forum database was corrupt and an old backup was restored as temporary replacement. Registrations closed until the database is recovered. Please ask questions using the Contact form

#1 28-03-2013 19:10:56

Infopath
Contributors
Registered: 22-03-2013
Posts: 27
Website

Putting logo next to site title

In the header, I want to put a logo next to the site title and tagline (to the left of it). How to tweak header.php for this?

Offline

#2 29-03-2013 10:20:31

Emil
Moderator
From: in a shipyard
Registered: 15-03-2013
Posts: 106

Re: Putting logo next to site title

Insert an img tag after the opening of div id headerTitles like this:

<div id="headerTitles">
                <img style="width:30px;height:60px;vertical-align:middle">
		<h1><a href="#!"><?php echo $siteName?></a></h1>
   		<h2><?php echo $siteDesc;?></h2>
    </div>

Good advice is often confusing, but example is always clear.

Offline

#3 29-03-2013 12:44:08

Infopath
Contributors
Registered: 22-03-2013
Posts: 27
Website

Re: Putting logo next to site title

It comes above the title and the whole header layout breaks.
This is what I put

<img style = "width:30px;height:60px;vertical-align:middle" src="image_name.png">

I want it to appear to the left of the title and tagline. So, if you imagine the header as a table

first column: image, second column: title and tagline in 2 lines, third column: nav bar

Emil wrote:

Insert an img tag after the opening of div id headerTitles like this:

<div id="headerTitles">
                <img style="width:30px;height:60px;vertical-align:middle">
		<h1><a href="#!"><?php echo $siteName?></a></h1>
   		<h2><?php echo $siteDesc;?></h2>
    </div>

Offline

#4 29-03-2013 13:03:31

Infopath
Contributors
Registered: 22-03-2013
Posts: 27
Website

Re: Putting logo next to site title

Ok this is what worked for me. I made another div and put it before headerTitles. Gave it an id logo with this css

#logo {
	position: relative;
	float: left;
	display: inline-block;
	vertical-align: middle;
	margin-top: 10px;
	padding: 10px 10px 10px 10px
}

And header.php is like this

<div id="header">
	<div id = "logo">
		<img style = "width:60px;height:60px;" src="file_name.png">
	</div>
	<div id="headerTitles">
as usual...

Offline

#5 29-03-2013 14:34:45

Emil
Moderator
From: in a shipyard
Registered: 15-03-2013
Posts: 106

Re: Putting logo next to site title

Great job, thnks for sharing the final result. This should be useful. Like your website so far, good job.


Good advice is often confusing, but example is always clear.

Offline

Board footer

Powered by FluxBB