Advertisement:

Author Topic: How to add an image in the header?  (Read 725 times)

Offline Gylenthal

  • Semi-Newbie
  • *
  • Posts: 10
How to add an image in the header?
« on: December 05, 2017, 12:44:00 AM »
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

Offline Rock Lee

  • Native Language Support Specialist
  • SMF Hero
  • *
  • Posts: 1,993
  • Gender: Male
  • I also speak english :D
    • BomberCode.Oficial on Facebook
    • RockLee-BC on GitHub
    • @Bomber_Code on Twitter
    • Bomber Code ~ La nueva era del conocimiento
Re: How to add an image in the header?
« Reply #1 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!
¡Regresando como cual Fenix! ~ Bomber Code © 2018
Ayudas - Aportes - Tutoriales - Y mucho mas!!!


Ayudame via PayPal

Offline Gylenthal

  • Semi-Newbie
  • *
  • Posts: 10
Re: How to add an image in the header?
« Reply #2 on: December 05, 2017, 06:22:50 PM »
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.

Online Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • SMF Hero
  • *
  • Posts: 1,624
  • Gender: Female
    • Gwenwyfar on GitHub
Re: How to add an image in the header?
« Reply #3 on: December 05, 2017, 06:36:29 PM »
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

Code: [Select]
<img src="yourimage" alt="" id="myimage">
(make sure to use a unique ID)

And add somewhere in your index.css file:

Code: [Select]
#myimage {
/* your styles go here */
}

There is no need for the div if you just want to add an image.
Let go of all you think others want you to be and just be who you really are.
Don't let anyone get in the way of your dreams and who you want to be. Your life is only yours to live.