Hi there,
I'm a noob in terms of SMF and am currently about to set up an SMF forum from scratch (v2.1.4, default theme) for the last two days. This is my first post. I once was a Borland Pascal programmer, but that was ages ago, and I haven't that much a clue about PHP and CSS.
I wanted to get rid of the SMF logo right next to my custom logo, and my first own approach (before I did test the code above (https://www.simplemachines.org/community/index.php?msg=4088616)) was to simply use the Unicode character U+200B (zero width space) as custom slogan. That did indeed work so far, the custom logo is perfectly centered horizontally and vertically and displayed in full width (on the desktop at least). But it felt a bit like a "hack".
Therefore, I tried the code above (https://www.simplemachines.org/community/index.php?msg=4088616) from
@Kindred and first
thought that it would have solved part of one of my very first issues with SMF (that's why I'm responding here rather than starting a new thread). But after a while the forum was inaccessible ("white page of death"), apparently it took a while until the change really took effect.
So I returned to my first attempt. But that doesn't work on the cell phone: The custom logo is neither centered at all, nor displayed in full width. It sits at the upper left corner, with notably blank space at the right side.
But it seems to be possible, see for instance vguitarforums (I can't post the full external link, apparently).
So, what do I have to get this right and "clean", both on the desktop and cell phone...? Any helpful hint(s) appreciated.
(I know that these issues have been discussed here already, but for many different and older versions, and I wasn't able to find the right and working solution. BTW: This captcha verification in the middle of typing text is extremely annoying, sometimes you even have to go through four or five steps.)
Topic split. As your symptoms and questions are not exactly the same as the in the original topic, it's best to start your own.
knowing what theme you are using would be a good start, also what you actually done to input your logo.
Quote from: Deaks on March 20, 2024, 06:55:44 AMknowing what theme you are using would be a good start, also what you actually done to input your logo.
I mentioned that ("(v2.1.4, default theme)"). So Curve2.
I entered the URL to the logo in the "Logo image URL" field.
sorry not had caffeine yet you did I see it now :D
In admin - configuration - current theme
where it says site slogan just put a space in their
Quote from: Steve on March 20, 2024, 05:36:46 AMTopic split. As your symptoms and questions are not exactly the same as the in the original topic, it's best to start your own.
The OP wrote
"I wanted to remove the SMF logo, not replace it with a slogan or anything." That's exactly what I want as well. Furthermore it would be interesting to know why the code from
@Kindred works with 2.1RC3, but breaks 2.1.4.
But anyway, as you did split it already, could you also update the subject (as we talk about 2.1.4)?
I suggest "Remove SMF Logo and center custom logo".
Quote from: Deaks on March 20, 2024, 07:42:33 AMIn admin - configuration - current theme
where it says site slogan just put a space in their
Probably you also missed another detail I mentioned:
Quote from: DEG-1935 on March 19, 2024, 08:33:04 PMI wanted to get rid of the SMF logo right next to my custom logo, and my first own approach (before I did test the code above (https://www.simplemachines.org/community/index.php?msg=4088616)) was to simply use the Unicode character U+200B (zero width space) as custom slogan.
If you enter a space or a zero width space doesn't make a visible difference. A zero width space should even center the custom logo more perfectly (as it takes no space).
Any other clue...?
I don't think that the main Logo is centered by css.... and THAT is what matters to the display, even without the smf logo/tagline
the smf logo isnt aligned to the centre, what it seems he wants to do is change the whole top section so its just the logo. This would need the index.template.php to be edited (please make a backup)
Look for
<div id="header">
<h1 class="forumtitle">
<a id="top" href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name_html_safe'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', '</a>
</h1>';
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 '
</div>
Change to
<div id="header">
<h1 class="forumtitle">
<a id="top" href="', $scripturl, '">', empty($context['header_logo_url_html_safe']) ? $context['forum_name_html_safe'] : '<img src="' . $context['header_logo_url_html_safe'] . '" alt="' . $context['forum_name_html_safe'] . '">', '</a>
</h1>
</div>
in index.css in your css folder find
#headerand replace the whole section with
#header {
padding: 2px 2px 12px 2px;
display: flex;
align-items: flex-end;
margin: 0 auto;
text-align: center;
}
Cross-post with Deaks, & very similar... ::)
To make a centered, full width, banner image, you need to:
- remove the logo from index.template.php
- center the image in index.css
- I found it helpful to tweak the padding & margin in responsive.css for the image for use on phones
Then specify the forum logo image url in Configuration | Theme Settings.
A couple of folks have asked me how I did it on my forum (https://www.vguitarforums.com). I do all tweaks on my forum in the form of minor mods, so I can rebuild & refresh from SMF code at will, almost instantly. I never edit code directly.
So I can share the attached modlet. (I thought I posted it on Tips & Tricks, but can't find it...)
Quote from: shawnb61 on March 20, 2024, 12:09:01 PMA couple of folks have asked me how I did it on my forum (https://www.vguitarforums.com). I do all tweaks on my forum in the form of minor mods, so I can rebuild & refresh from SMF code at will, almost instantly. I never edit code directly.
Ha! That's exactly the forum I mentioned in my initial post. Thanks a lot, I'll try your and
@Deaks' approach (thanks to him as well!) and will report.
But the funny thing still is that my own attempt works on the desktop (Win10, Firefox), but not on the cell phone (Android, Chrome).
That's because mobile devices use a different css set of instructions
Quote from: DEG-1935 on March 20, 2024, 12:36:56 PMQuote from: shawnb61 on March 20, 2024, 12:09:01 PMA couple of folks have asked me how I did it on my forum (https://www.vguitarforums.com). I do all tweaks on my forum in the form of minor mods, so I can rebuild & refresh from SMF code at will, almost instantly. I never edit code directly.
Ha! That's exactly the forum I mentioned in my initial post. Thanks a lot, I'll try your and @Deaks' approach (thanks to him as well!) and will report.
Okay, here we go...
- @shawnb61's mod works just perfectly! 👍 I can't tell how glad I am, thanks a lot again.
- @Deaks' approach works in so far as the SMF logo is indeed removed (even if the field "Site slogan" is left empty), but apart from that there is no difference to my initial approach with the zero width space in the "Site slogan" field: The custom logo is neither displayed in full width nor centered on the cell phone. BUT:
- I encountered that there is a difference if you hold the cell phone in portrait or in landscape mode: In portrait mode I'm seeing the problem we're discussing here. But in landscape mode my own approach (zero width space) as well as @Deaks' solution do both work! Even more: In default configuration (when the SMF logo is shown on the right), the custom logo is displayed with a certain reduced size in landscape mode. And exactly this same reduced size is used in portrait mode, even after applying my own or @Deaks' approach. So apparently SMF and/or the browser "think" that there needs to be displayed something right next to the custom logo and thus reduce the size of the custom logo more than needed (but just in portrait mode and without showing the SMF logo). Strange!
So @shawnb61's solution is indeed the only one that works under all circumstances and on all devices. Even better, as no code needs to be edited.
And in fact I had in mind already to get in touch with the admin of vguitarsforums.com if nobody would come up with a working solution here. I had no clue that this admin is active here as developer. Also, vguitarsforums.com was the forum why I chose SMF as forum software as it was the first forum I found which was using SMF. So I signed up there just for forum testing purposes (I have nothing to do with guitars and will delete this account once I'm finished with my own forum).
There are still more and other issues with SMF, but well... ;)
@shawnb61:
Although I marked this topic as solved, may I ask how you did manage it that when I reduce the zoom in Firefox with Ctrl+-, that your logo and your forum (vguitarforums) keep the same size and just the font size is reduced?
Quote from: DEG-1935 on March 20, 2024, 10:15:08 PM@shawnb61:
Although I marked this topic as solved, may I ask how you did manage it that when I reduce the zoom in Firefox with Ctrl+-, that your logo and your forum (vguitarforums) keep the same size and just the font size is reduced?
The CSS makes the banner to be 100% of the forum width, so that's fixed relative to the forum width.
I use the Forum Width Setting mod to make the forum a constant % width of the viewport. The net effect of those two together is that the banner stays the same size no matter how far you zoom in or out.
Quote from: shawnb61 on March 20, 2024, 11:32:01 PMI use the Forum Width Setting mod to make the forum a constant % width of the viewport.
Thanks for this hint, great mod!