News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

How to Replace Forum Name with Logo Instead

Started by savo, September 28, 2022, 04:54:42 PM

Previous topic - Next topic

savo

I updated to v2.1.2 and had to select a new theme as my previous one wasn't compatible with the latest version of SMF.  I'm presently using Steyle V1.  At the very top left corner (where it says Steyle V1), I would like to replace Steyle V1 to a logo instead. 

Based on the reading I have done, I believe that I have to change this line in index.template.php

<a class="horizontal-logo text-left" href="', $scripturl, '">', !empty($settings['header_fa']) ? '<i class="'.$settings['header_fa'].'"></i>' : '', '<span class="h4 font-weight-bold align-self-center mb-0 ml-auto">', $context['forum_name'].'</span></a>

Can someone tell me what I should change?

Julius_2000

#1
Hi.

Unfortunately, this theme seems to have replaced the logo option with an icon option in "current theme/Theme Options and Preferences"  in Admin.

I've had a look and one way to do it could be this.

Add this class to your index.css (as it is the class used in the link element):
.horizontal-logo {
   content: url(link to your image in your Theme folder); /*<-- usually in /images/... */
   width: ; /* your-width */
   padding: ; /*your padding*/
}

So, put the image you want in your image folder inside your theme and then

For instance:
.horizontal-logo {
   content: url(../images/smflogo.svg) /*took image that's actually in the folder*/
   width: 200px;
   padding: 5px
}


Another way could be to replace everything inside the <a></a> element in index.template.php:
<a class="horizontal-logo text-left" href="', $scripturl, '">
  <img src="your-URL"> 
</a>
But still, you would need to add the .horizontal-logo class in index.css (since it's not yet define there) or add an indiviual class or ID to either your <img> code or to the <a> element to adapt its appearance to your liking.

Steve

DO NOT pm me for support!

CurtisS

I am using this theme and just modified IMG url in the index-template.php directly.

<div class="navbar-header  h-100 h4 mb-0 align-self-center logo-bar text-left">
  <a class="horizontal-logo text-left" href="', $scripturl, '"><img src="your-url-to-image/Logo.png"/>', !empty($settings['header_fa']) ? '<i class="'.$settings['header_fa'].'"></i>' : '', '<span class="h4 font-weight-bold align-self-center mb-0 ml-auto" style="display:none">', $context['forum_name'].'</span></a>
                    </div><!-- .logo end -->

savo

Thanks everybody.  I was able to get it working using CurtisS's suggestion.  :)

Advertisement: