News:

Want to get involved in developing SMF, then why not lend a hand on our github!

Main Menu

How to add an image in the header?

Started by Gylenthal, December 05, 2017, 12:44:00 AM

Previous topic - Next topic

Gylenthal

I would like to add an image in the header as shown in red in the picture.
Can anybody explain how to do this?
TIA

-Rock Lee-

You have to know something basic of HTML and CSS to be able to do it, I recommend you use the browser's element inspector to leave it as you want then when you are happy with the result simply apply the changes to the boardindex.php and index.css but I'm wrong. ..


Regards!
¡Regresando como cual Fenix! ~ Bomber Code
Ayudas - Aportes - Tutoriales - Y mucho mas!!!

Gylenthal

Quote from: Rock Lee on December 05, 2017, 09:38:18 AM
You have to know something basic of HTML and CSS to be able to do it, I recommend you use the browser's element inspector to leave it as you want then when you are happy with the result simply apply the changes to the boardindex.php and index.css but I'm wrong. ..
Regards!

I have setup my own website 10 years ago, FULLY programmed in HTML, and it is still running.
But I did not used CSS.

The easiest way to do this would be to make a Division (Column) in the header section of index.php and put the picture in that column.

Something like:

<div id="mypicture"><img src="http://mysite.com/index.php?action=dlattach;attach=1;type=rilogo [nofollow]" alt="" class="rilogo"></div>

#user_section #mypicture {
    padding: 0.7em;
    border-leftt: 1px solid #adadad;
    margin: 0 0.5em 0 0;
    float: right;
}

But I am not sure if this would work.
So, better to ask than to mess everything up.

Gwenwyfar

Well, the sample you just gave is using both HTML and CSS :P

You can find the place you want to add it in your index.template.php and add


<img src="yourimage" alt="" id="myimage">

(make sure to use a unique ID)

And add somewhere in your index.css file:


#myimage {
/* your styles go here */
}


There is no need for the div if you just want to add an image.
"It is impossible to communicate with one that does not wish to communicate"

Advertisement: