News:

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

Main Menu

Basic Configuration

Started by chris319, September 29, 2022, 04:38:50 PM

Previous topic - Next topic

chris319

I have just set up a new discussion board using SMF.

How do I get rid of the "Simple Machines Forum" text and logo at the very top of the page?

How do I change the "My Community" text to something else.

Also I need to change the favicon.

I can't put my board on line until these issues are resolved.

I have spent a couple of hours going over all the menus and can't find where to change these things.

Version 2.1.2.

Thank you.

Julius_2000

Hi,

for "My community" I believe you need to go to "Admin > Maintenance > Server settings" and change your Forum's name.

In "Admin > Confiugration > Current theme" you can type backspaces into the "Site slogan" field to make the logo disappear, I think.

Favicons are another animal... There's a mod called Optimus that has an option to setup Favicons without meddling with the source files.

There are several ways to implement Favicons (it's quite annoying to be honest).
https://mobiforge.com/design-development/adding-favicons-in-a-multi-browser-multi-platform-world

The easiest but more old-fashioned way would be to create an icon in a reasonable size (larger than 32x32px), then create a favicon.ico file and place it in the root directory of your forum.
Here's a .ico generator that does it for you:
https://favicomatic.com/


Sir Osis of Liver

Quote from: chris319 on September 29, 2022, 04:38:50 PMHow do I get rid of the "Simple Machines Forum" text and logo at the very top of the page?

index.css


/* Tweak the SMF logo */
img#smflogo {
margin: 16px 0 0 0;
display: none;
}

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

chris319

Quote from: Sir Osis of Liver on September 29, 2022, 05:35:02 PM
Quote from: chris319 on September 29, 2022, 04:38:50 PMHow do I get rid of the "Simple Machines Forum" text and logo at the very top of the page?

index.css


/* Tweak the SMF logo */
img#smflogo {
margin: 16px 0 0 0;
display: none;
}



That seems pretty involved.

Suppose I wanted to have a custom banner?

Sir Osis of Liver

If you want to replace the SMF logo with a custom image, and don't want to mess with any coding, you can create a banner in svg format, same size (288 x 37px), name it smflogo.svg, and upload it to /Themes/default/images.  It will replace the logo. 
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

chris319

I have uploaded and installed a theme only to discover that the text is low contrast and way too small, and now I can't change back to the SMF default theme.

chris319

QuoteIf you want to replace the SMF logo with a custom image, and don't want to mess with any coding, you can create a banner in svg format, same size (288 x 37px), name it smflogo.svg, and upload it to /Themes/default/images.  It will replace the logo.

On another board I run we have several custom images in the .png format, quite a different proposition from .svg.

Kindred

Adding ?theme=1 to the url will set you back to the default theme
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

chris319

Is there any way to globally change the font size? The text on my board is tiny.

Must I use an .svg file for my new banner? Will a .png file not work? I have .png files on my old board.

I can't put my board on line if it's branded as "Simple Machines Forum" and the text is nigh illegible.

Julius_2000

Quote from: chris319 on September 30, 2022, 07:49:09 AMIs there any way to globally change the font size? The text on my board is tiny.
Yes. Go to your theme/css folder. Access index.css and search for body {  } or html {  } and insert your desired font size. This will be your base size for fonts:
For instance:
body {
   font-size: 14px;
}
Quote from: chris319 on September 30, 2022, 07:49:09 AMMust I use an .svg file for my new banner? Will a .png
file not work? I have .png files on my old board.
No, of course you can use other formats, too. Files in svg. have the advantage to be scalable to any size because they're vector images. That means they're crisp and sharp at any size. PNG etc. files are static and look pixelated when scaled up. If you want to try some svg, you can use freeware like https://inkscape.org/release/inkscape-1.2.1
Certainly worth a try as it just looks better. But ordinary images will suffice.

Quote from: chris319 on September 30, 2022, 07:49:09 AMI can't put my board on line if it's branded as "Simple Machines Forum" and the text is nigh illegible.
Where exactly is the SMF branding still visible? Have you made changes to the forum name under "Admin/Maintenance/Server Settings" yet?


chris319

#11
QuoteGo to your theme/css folder. Access index.css and search for body {  } or html {  } and insert your desired font size. This will be your base size for fonts:

That's much better, thank you. I set it for 17px.

What is the maximum width my banner can be?

Sir Osis of Liver

You can use any image format but you'll have to edit the file name in index.template.php -


echo '
', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.svg" alt="Simple Machines Forum" title="Simple Machines Forum">' : '<div id="siteslogan">' . $settings['site_slogan'] . '</div>', '';
echo '


There are better ways to add a banner.  If you just want to remove the smf logo, make the css edit I posted above.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Julius_2000

#13
Quote from: Sir Osis of Liver on September 30, 2022, 12:30:21 PMYou can use any image format but you'll have to edit the file name in index.template.php -

    echo '
        ', empty($settings['site_slogan']) ? '<img id="smflogo" src="' . $settings['images_url'] . '/smflogo.svg" alt="Simple Machines Forum" title="Simple Machines Forum">' : '<div id="siteslogan">' . $settings['site_slogan'] . '</div>', '';
        echo '


I don't think messing with the php code is necessary at his level. I would recommend this:
If you simply want to hide the SMF logo, you can just type in backspaces into the "site slogan". It will make the logo go disappear.

You cannot view this attachment.

If you want to replace the logo and are ok with its current position do the following.
Look for img#smflogo in index.css
img#smflogo {
    margin: 16px 0 0 0;
}

and add "content" and give it a width that you're happy with.

For instance:
img#smflogo {
    margin: 16px 0 0 0;
    content: url(../images/boardicons.png);
    width: 100px;
}

Which would look like this:

You cannot view this attachment.

The image link in the content url is just an example. Take an image that you like and put it in images. Or create a new folder and put it in the images folder. If you create an own folder, it would look like this:
img#smflogo {
    margin: 16px 0 0 0;
    content: url(../images/MyFolder/MyPicture.jpg);
    width: 100px;
}

Quote from: chris319 on September 30, 2022, 09:35:44 AM
QuoteGo to your theme/css folder. Access index.css and search for body {  } or html {  } and insert your desired font size. This will be your base size for fonts:

That's much better, thank you. I set it for 17px.

What is the maximum width my banner can be?
Theoretically, your banner can be as wide as your screen is, of course. But if you're going to just replace the SMF logo, its max-width would be the max-width of the current <div id=header> element. The parameters there are currently set to width: 90% and max-width: 1200px if I see that correctly.
If your banner is just a simple image in a static format like jpg or png, you would need to create an image that is at least as wide as your desired final screen resolution (e.g. 1920x1080). Otherwise it'll look pixelated. Also important is the aspect ratio of your banner, meaning, addional to the width, what height your image is going to have.

chris319

#14
To unravel these conflicting and confusing directions:

Load banner file into myboard/images/

Look for img#smflogo in myboard/index.css

img#smflogo {
    margin: 16px 0 0 0;
    content: url(../images/myimage.svg);
    width: 100px;
}

Adjust left margin to suit.

The width of the svg image should be <= 90%.

Is this correct?

Sir Osis of Liver

That should work if done correctly.  You don't have to use svg, any image format supported by browsers is ok.
Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

Julius_2000

#16
Quote from: chris319 on September 30, 2022, 05:58:02 PMTo unravel these conflicting and confusing directions:

Load banner file into myboard/images/

Look for img#smflogo in myboard/index.css

img#smflogo {
    margin: 16px 0 0 0;
    content: url(../images/myimage.svg);
    width: 100px;
}

Adjust left margin to suit.

Is this correct?

Yes.

Quote from: chris319 on September 30, 2022, 05:58:02 PMThe width of the svg image should be <= 90%.

Not exactly. I realize that the dimensions I gave above is the current width of the header element <div id="header"> inlcuding the whole content space (not just the banner).

In img#smflogo, give your image a width of 100% which means the image is at least 100% of it's own size (if there's enough space) and at least 100% of the size of the current parent element it sits in. The header has currently a display=flex (the type of "display" also plays a role how content is shown). If it might be too large, it gets downscaled. I just tried it with a 1920px wide image for a banner and it worked. When I did not specify a width in img#smflogo , it would overflow a bit to the right.

img#smflogo {
    content: url(../images/myimage.svg);
    width: 100%;
}

Here's a tip in general.:
In your browser, hit f12 on your keyboard and it will open an HTML inspector. There, you'll be able to see the HTML code. Look for an Arrow-in-a-box symbol. With it, you can hover over and then click elements on your site you want to know more about. So, in your case, you would hover and click on your banner once you have established the above code in CSS and it will make its current CSS settings visible. Then click on the width's value and manipulate it either by typing in a number in % or px or use your up/down arrows on your keyboard and you will instantly see the result. If you like a certain value for the with, go back to your CSS file and type that value in and save it.

Just remember, the image type you create affects the quality/ resolution of images, esp. if they have to be upscaled.
SVG files instead will look good in any size but you need to use an svg drawing app (changing the image suffix from e.g. jpg to svg will not work).
Also think about the aspect ratio (width and height) of your banner.

chris319

When I access the board using my domain name, it goes to a page with no graphics and various login fields.

How can I make it go to my index/home page without making visitors enter "http://www.myforum.org/index.php?wwwRedirect"?

Thank you.

Sir Osis of Liver

Ashes and diamonds, foe and friend,
 we were all equal in the end.

                                     - R. Waters

chris319

www.videotechnologyforum.org

PLEASE NOTE: The board is not officially open yet.

Funny, when I click on the above link I see our home page. When I type in the URL I see a blank white screen with links on it.

Advertisement: