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.
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/
https://wiki.simplemachines.org/smf/Favicon.ico
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;
}
Quote from: Sir Osis of Liver on September 29, 2022, 05:35:02 PMQuote 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?
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.
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.
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.
Adding ?theme=1 to the url will set you back to the default theme
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.
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?
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?
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.
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.
Admin.jpg
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:
logo.jpg
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 AMQuoteGo 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.
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?
That should work if done correctly. You don't have to use svg, any image format supported by browsers is ok.
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.
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.
Link to your forum?
www.videotechnologyforum.org (http://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.
And what do you have for your site url in your smf admin?
I'm betting that you use the non-www url to access your site...
Set up a forced redirect to the www url in your htaccess file
Everything seems to work fine for me. :-\
Quote from: chris319 on October 02, 2022, 07:55:58 PMwww.videotechnologyforum.org (http://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.
Could you try clearing your browser's history/ cache and cookies and see if that works?
So, I have tried across multiple browsers, with the www and without.
it all works fine for me (although it is NOT https, which you really should do)
the non-www correctly redirects to the www URL.
the www URL works correctly.
I have visited the site a number of times now and am unable to cause a blank screen.
I'm working with a graphic artist on a new banner for my board.
He started by making a .png image 150 px high x 600 px wide.
The 4:1 aspect ratio is killing our design.
Can I have him make an image which is less narrow vertically without messing anything up? Say, 400 px high by 600 px wide?
The final design will probably be .svg.
Is that at all related to your original issue?
Don't know where the 4:1 ratio limitation came from. Ours is 1280 to 180, more like 7:1. Only took a couple minor tweaks to make it work:
https://www.vguitarforums.com
Have your artist propose a few things to try, then try 'em... Start with what you want, then make it work. SMF is extremely flexible that way.
Quote from: chris319 on October 14, 2022, 08:17:33 PMI'm working with a graphic artist on a new banner for my board.
He started by making a .png image 150 px high x 600 px wide.
The 4:1 aspect ratio is killing our design.
Can I have him make an image which is less narrow vertically without messing anything up? Say, 400 px high by 600 px wide?
The final design will probably be .svg.
It's really hard to give you any advice since no one knows what your actual design looks like. The banner should follow your imagination and vision for your page. Would you like it to span across the page or be limited to a certain with? What should the height be? The aspect ratio is just a result of your chosen design. It's only important to know its placement.
For example, this is the SMF logo adjusted by me in the in-built Dev Tool of Firefox (see my advice at the end of this earlier reply) (https://www.simplemachines.org/community/index.php?msg=4136032) . I changed the logo's with to 100% and it's height to auto. Now, it takes up all the space it can within that div element while keeping its aspect ratio (the actual logo size is 3174x419 px). And since that div element the logo is in has a max-width set to 1200px, the logo can't get any wider than that. Of course you could set a specific height to it, it would then try to keep the aspect ratio for the given image (this is also true for the opposite, height 100%, fixed width). If you would apply fixed widths/heights that are not reflective of the image's aspect ratio, the image would get squeezed.
Banner example.png
So, why don't you try it out yourself and put a simple placeholder image there, play with the settings until you're satisfied with the result and then let your designer adjust the logo accordingly?
The file format is secondary when it comes to placement and dimensions. The "only" difference in that regard is image quality.
Thanks, Julius.
I have told my artist to go ahead and make the banner whatever aspect ratio works for the design. The design is based on circles but in a squarish container. We'll try it and see!
If you are going to go with a fixed file format like jpg or png instead of an svg, I believe it would be best to design the image in a somewhat larger width and height (higher resolution) than your target display size while keeping the desired aspect ratio. Images are better downscaled than upscaled regarding their quality.
Quote from: Sir Osis of Liver on September 29, 2022, 06:28:08 PMIf 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.
No joy.
I also tried uploading to:
/public_html/videotechforum/Themes/ProCurve/images/custom
replacing smflogo.svg and likewise no joy.
I am using the "ProCurve" theme.
I can't put my board on line branded as "simplemachines forum" as it is now.
Quote from: chris319 on October 15, 2022, 10:00:53 PM/public_html/videotechforum/Themes/ProCurve/images/custom
put it in /public_html/videotechforum/Themes/ProCurve/images/ instead of /public_html/videotechforum/Themes/ProCurve/images/custom
Quote from: Shades. on October 16, 2022, 12:32:27 AMput it in /public_html/videotechforum/Themes/ProCurve/images/ instead of /public_html/videotechforum/Themes/ProCurve/images/custom
Done.
Still no joy.
I have tried using both the svg and png versions. Nothing.
I can see my new banner if I revert to the default theme (Curve2).
You are clearing your browser's cache each time you make one of these changes, right?
And/or confirming by using a different browser?
Quote from: Steve on October 16, 2022, 06:02:58 AMYou are clearing your browser's cache each time you make one of these changes, right?
And/or confirming by using a different browser?
I cleared the cache on Chrome and that did it, thank you.
https://www.videotechnologyforum.org/index.php (https://www.videotechnologyforum.org/index.php)
Now it needs to be horizontally centered on the page and made a little wider, while preserving the aspect ratio so the circles look round. I'm using the svg file.
Which file do I make those adjustments in again? Thanks.
Quote from: chris319 on October 16, 2022, 06:31:16 AMQuote from: Steve on October 16, 2022, 06:02:58 AMYou are clearing your browser's cache each time you make one of these changes, right?
And/or confirming by using a different browser?
I cleared the cache on Chrome and that did it, thank you.
https://www.videotechnologyforum.org/index.php (https://www.videotechnologyforum.org/index.php)
Now it needs to be horizontally centered on the page and made a little wider, while preserving the aspect ratio so the circles look round. I'm using the svg file.
Which file do I make those adjustments in again? Thanks.
Alright, I'm not a pro but this is what you could do, given how it's set up at the moment:
n index.css find
#header and add:
flex-wrap: wrap;h1.forumtitle and add
display: flex;
justify-content: center;
width: 100%;
h1.forumtitle a and add a width that you like. For instance:
h1.forumtitle a {
color: rgb(168, 84, 0);
text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 1px;
width: 50%;
}
To put the search bar to the left, do this:
Find
#search_form and add
margin-left: auto;This is how it would look like.
banner example.png
The image is still a png. If you want to keep it that way, your image should be done in a higher resolution. It looks a bit blurry. Make it bigger and the shrink its size or, as you mentioned, use an svg file instead.
Addendum:If you want your forum to be used on small devices, too, do this:
in responsive.css find this
@media (max-width: 480px)and look for this class:
h1.forumtitle a, h1.forumtitle {
padding: 5px 0px 0px 4px;
margin: 10px 0px;
max-width: 300px;
}You might want to remove the max width or block it (put /* */ around the max-width) and also adjust the margin and padding to your need if you're interested the mobile aspect of your forum for small devices.
Disregard.
Did you forget to close one of the classes/ id's? There should be { } around their css properties. Your site looks like it doesn't load your index.css properly.
QuoteThe image is still a png. If you want to keep it that way, your image should be done in a higher resolution. It looks a bit blurry. Make it bigger and the shrink its size or, as you mentioned, use an svg file instead.
You're right; it was showing a png image. I deleted the png image and now I don't have a banner at all. I have logo.svg and smflogo.svg in the appropriate directories.
I tried reverting to the default Curve2 theme and no success with that, either.
I'm about five seconds from giving up on this project altogether.
Quote from: Julius_2000 on October 16, 2022, 07:35:28 AMDid you forget to close one of the classes/ id's? There should be { } around their css properties. Your site looks like it doesn't load your index.css properly.
That's it. The five seconds are up. I give up. My patience is exhausted. I'm not an expert CSS programmer and I'm just flailing around.
The project is dead and SMF killed it. I've been struggling for hours just to change a bloody banner. Now I'm out the $300 I paid my graphic artist.
Go to Admin/Configuration/Current Theme
and copy this link into the field where it says Logo image url
https://www.videotechnologyforum.org/Themes/ProCurve/images/custom/logo.svg
Edit: See, the link even works because it's already there! Don't give up! Just put that link into the Logo image url in current theme.
You don't need to delete anything, just reference it.
Btw, I've downloaded your svg and can convert it to png if needed.
See, it's still there. I just put in the link above:
still there.png
It works! And it's even centered! Thanks, Julius. Can I buy you a pizza?
Almost ready to go now. My artist is going to change the shade of blue in the border and I need to check the registration settings before I open it up for business.
You made it! Congrats!! Now, just add the recommended things to your index.css and you should be good to go.
But always make a backup of your css files and any other files that you edit!! That way, you can always at least go back to square one.
Witha quick edit in your index.template.php, you could even place the svg code there and then edit its color in index.css. Or, you could install https://inkscape.org/release/inkscape-1.2.1/ and do it yourself!
No need spend any more money!
Now how can I make my banner just a little smaller?
I followed your directions from a previous post and they didn't work.
Try this. But before you do, backup the original css file.
Deleted attachment.
Sorry, I realized that you have made changes to your index.css already. So, go to your specific index.css of your theme and copy and past these to the appropriate places or place them at the bottom of the file (though it would mean redundant lines of code):
#header {
background: rgb(85, 126, 160);
box-shadow: 0 16px 20px rgba(255, 255, 255, 0.25) inset;
padding: 2px 2px 12px 2px;
display: flex;
align-items: flex-end;
width: 100%;
border-radius: 7px;
flex-wrap: wrap;
justify-content: center;
}h1.forumtitle {
font-size: 1.8em;
font-family: Verdana, Helvetica, Arial, sans-serif;
padding: 22px 12px 6px 10px;
font-weight: normal;
width: 100%;
display: flex;
justify-content: center;
}h1.forumtitle a {
color: #a85400;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
width: 450px;
}#search_form {
padding: 3px;
margin-right: 10px;
margin-left: auto;
}
If you want your banner's width changed, go to h1.forumtitle a
Is you code and css calling for the svg?
Quote from: Kindred on October 16, 2022, 04:27:34 PMIs you code and css calling for the svg?
Yes they is.
Julius:
You're giving me values in px. I thought we'd be better off working in %.
My text size is set to 114%.
There's no rule, there are many ways of achieving what you want.
I figured that when I use % it would get too small on small devices in case your members want to access the forum via smartphones. Of course, one could address that with a media query in the responsive.css but I thought this would be good enough for the time I could spend on it. Just play with the value and see what fits best for you.
Edit:
Maybe this could be a bit easier, less code:
in index.css
In #header change display from flex to block
#header {
display: block;
}
In h1.forumtitle add this:
padding: 10px !important;
width: 450px;
max-width: 100% !important;
margin: 0 auto !important;
in In h1.forumtitle a add this:
display: block;
padding: 0 !important;
max-width: 100% !important;
That would make it look like this:
banner new.png
Change width and the padding to your heart's content.
Ah screw that. If you haven't changed anything beyond font-size in your index.css use my modification:
index.css
Backup your original index.css!
I set a different width parameter to 85%. Here's what it looks like now:
https://www.videotechnologyforum.org/index.php (https://www.videotechnologyforum.org/index.php)
Any way to make the test pattern/svg image a little bigger to fill that space on the sides?
Thanks again for your valuable help.
Quote from: chris319 on October 16, 2022, 08:14:47 PMI set a different width parameter to 85%. Here's what it looks like now:
https://www.videotechnologyforum.org/index.php (https://www.videotechnologyforum.org/index.php)
Any way to make the test pattern/svg image a little bigger to fill that space on the sides?
Thanks again for your valuable help.
Glad I could help.
As you can see, using 85% on the header shrinks it. If you don't want that, you would need to adjust the forumtitle's width instead.
As for the image: not without touching it itself. You can open it in an editor like Inkscape and edit it there. One would have to adapt all the elements to keep the design without stretching them. Let me see..
@chris319 I sent you a PM.
I removed the blue frame of your svg and gave the HTML element the image resides in the same gray background as your banner's and added a border to it. Put the files in the respective folders and test it out. Make a backup of your index.css.
Should look like this (minus the blue frame on this current svg)
banner_new.png
Play with the values for width of
.forumtitle img (size of your svg) and border width/color of
h1.forumtitleIf you don't want the gray banner to fill the entire header and want some space around it like that:
banner_new_padding.png
Change the padding for #header. For example
padding: 10px;
Thanks as always, Julius.
Your modification creates two gray "wings" on either side of the test pattern.
I would like to elongate the test pattern itself to close the gap between the bottom of the test pattern and the bottom of the blue space. This will result in the test pattern being elongated horizontally as well and the test pattern will come close to touching the left edge of the "Search" box.
https://www.videotechnologyforum.org/ (https://www.videotechnologyforum.org/)
Like so?
banner_new_fill.png
You need to understand that the header consists of two elements, the banner and the search bar. The blue background gives the illusion of it being one object. So, enlarging the image would result in the header being adjusted accordingly.
I would need to edit the Index.template.php file and add a div element around the banner and give its background the color of the current header. This would make the search seem like it's outside the blue rectangle.
Here we have the search bar off to the side. It is more balanced vertically.
http://www.gameshowforum.org/index.php (http://www.gameshowforum.org/index.php)
You were changing the size of the blue surround.
It's the test pattern image only that needs to be resized.
Chris, like I said, the banner and the search bar are two elements sitting inside the header. It's not like the entire blue rectangle was just a canvas and the only thing you need to do is drag the image until it fills the space. You need to think of the header as of boxes sitting on top of each other.
Do you really need the search bar to be included in the blue background? That would require much more work because, as I said, these are two elements that interact with each other, they are related. Changing the size of the image would also change the header's dimension, and thus, the position of its elements.
That's why this was a workaround to make it seem like only the image is in the header, of course I can make the image bigger and the blue box would adjust accordingly. Or one can change the padding (https://www.w3schools.com/css/css_padding.asp) around the banner.
You also need to understand that users will have different devices and screen sizes, so it's important to have the elements (image and search bar) be responsive. That means e.g., they should not overlap when viewed on a smaller screen.
The website you gave is a good example of a poorly designed layout. The logo is not centered because the search bar (and its dimensions) is part of the parent (header) element occupying a part of the same space (just like in the image in my reply #41 (https://www.simplemachines.org/community/index.php?msg=4137046).
Moreover, when you shrink the screen size, the image eventuall goes outside the box.
QuoteDo you really need the search bar to be included in the blue background?
No, I don't. The search bar can be just about anywhere as long as it is not on top of the svg test pattern.
All I need is for the svg image (the test pattern) to be larger to fill that empty gap below it.
There is empty space between the bottom of the svg and the bottom of the blue field, and between the right edge of the svg and the left edge of the search bar. If the svg were enlarged slightly and shifted down a little that would do the trick. It would not cover or encroach upon the search bar.
https://www.videotechnologyforum.org/ (https://www.videotechnologyforum.org/)
for #search_form add
margin-top: -40px;
and in #header, change
padding: 2px 2px 12px 2px; to padding: 2px 2px 2px 2px;
Quote from: chris319 on October 19, 2022, 08:37:15 AMAll
So, it's essentially my last picture only a bit bigger. Do you want the blue rectangle background to a bit narrower, like the 85% width you had before or can it be as wide as the topic container below, like in my last picture? The space between the svg and the search bar is of course determined by the aspect ratio of the image.
By the way , if you would pLace the svg I gave you without the blue frame in your custom folder, I could set a css border around it and apply any color you want from there.
The ONLY things that need to change are the size and vertical position of the svg test pattern. It may require moving the svg slightly lower.
The search bar stays right where it is.
The blue background stays right where it is.
No change to width.
No additional borders.
Why is it so difficult to change the dimensions of the svg image without changing anything else?
https://www.videotechnologyforum.org/ (https://www.videotechnologyforum.org/)
did you see my post?
Quote from: Kindred on October 19, 2022, 11:10:02 AMfor #search_form add
margin-top: -40px;
and in #header, change
padding: 2px 2px 12px 2px; to padding: 2px 2px 2px 2px;
the Image itself has a set height/width ratio (200x400)
all changes to width will result in a change to height... so, removing the 450 max-width of the header results in a HUGE image that spans 100% of the width, but also takes up the entire screen on my laptop for height.
Quote from: chris319 on October 19, 2022, 01:29:19 PMThe ONLY things that need to change are the size and vertical position of the svg test pattern. It may require moving the svg slightly lower.
The search bar stays right where it is.
The blue background stays right where it is.
No change to width.
No additional borders.
Why is it so difficult to change the dimensions of the svg image without changing anything else?
https://www.videotechnologyforum.org/ (https://www.videotechnologyforum.org/)
I'm sorry to say that but it's because you don't seem to understand the principles of how these things work.
Here's an example of what the reality of your theme is in its current layout. I colorized the elements for you so you understand why it's not just a matter of dragging the image to the bottom.
banner_explanation.png
And this is my solution that's quick and would (in my mind) achieve what you are trying to get to:
banner without background search bar.png
I put the 450px width (increased it to 460px to make up for the "loss" of the searchbar) to
h1.forumtitle a instead of
h1.forumtitle and removed its padding. Then I removed the background color from the header and applied it to the forumtitle.
I don't know how else I can get you there without tinkering too much with more stuff.
Quote from: chris319 on October 19, 2022, 01:29:19 PMNo additional borders.
I believe you misunderstood me here. You said that you wanted your artist to change the color of the blue frame because you weren't yet satisfied with it. And I suggested to you to just take the svg that I sent you where I removed the baked-in frame and to apply a CSS border so that YOU can play with the color you like best WITHOUT paying anything at all.
Quote from: Kindred on October 19, 2022, 11:10:02 AMfor #search_form add
margin-top: -40px;
and in #header, change
padding: 2px 2px 12px 2px; to padding: 2px 2px 2px 2px;
This solution only works on larger screens. When it gets to mobile devices or even laptop screens or whatever the end users is going to access the site with this will result in an unusable searchbar because it gets pushed behind the image.
Ah, I see. banner_explanation.png makes the dilemma clear.
How about if the search bar is moved somewhere else on the page? Then we have the test pattern filling the grayish-blue box from top to bottom and it looks more unified.
Could the search bar be moved below the section that says "Quick Links, Admin, Moderate"? With the same background color and width as "Quick Links, Admin, Moderate"?
Thanks.
Hello Chris319,
Maker of the theme that you are using here.
Would this be what you are wanting to do?
Twitch-s-World-Index(2).png
Twitch-s-World-Index(3).png
I mean, seriously...am I talking to myself here? I have literally told you the two minor changes you need to make twice now.
Quote from: Kindred on October 19, 2022, 04:50:45 PMI mean, seriously...am I talking to myself here? I have literally told you the two minor changes you need to make twice now.
They did and explained the issue that they have with it.
Quote from: Kindred on October 19, 2022, 11:10:02 AMfor #search_form add
margin-top: -40px;
and in #header, change
padding: 2px 2px 12px 2px; to padding: 2px 2px 2px 2px;
QuoteThis solution only works on larger screens. When it gets to mobile devices or even laptop screens or whatever the end users is going to access the site with this will result in an unusable searchbar because it gets pushed behind the image.
Which is true.
So, use css media option to hide the searchbox..
However, the code I gave works perfectly well on my laptop :P
Quote from: TwitchisMental on October 19, 2022, 04:40:12 PMHello Chris319,
Maker of the theme that you are using here.
Would this be what you are wanting to do?
Twitch-s-World-Index(3).png
No, what he wants is something like this:
banner_want.png
Quote from: Kindred on October 19, 2022, 05:22:50 PMSo, use css media option to hide the searchbox..
However, the code I gave works perfectly well on my laptop :P
Test it in the Dev Tools' screen size emulator. My solution would keep the search bar where she is an give the impression that the image/blue background is the actual header.
JACKPOT!
Thanks, Julius, banner_want.png is it! That looks SO MUCH BETTER!
Is there a way to close up that white space where it says "News: SMF Just Installed"?
Thanks for putting up with my micromanaging :)
What kind of pizza do you want? :)
Thanks, Twitch. BTW note that I have modified the text height to 114% on my board.
Will this work OK on an assortment of devices?
Thanks again.
Chris, I always knew that you wanted this but also told you that it is not that easily done. Fact is, I made this pic exactly the way I described to you why this doesn't work like that because these are TWO div elements.
This requires to make changes to the Index.Template.php to place the searchbar somewhere outside and below the header. I can give it a try tomorrow.
Quote from: chris319 on October 19, 2022, 06:52:21 PMIs there a way to close up that white space where it says "News: SMF Just Installed"?
In your index.css
.boardindex_table:not(:last-child) {
margin-bottom: 15px;
margin-top: 15px;
}Remove margin-top or give the a value of 0 or "comment it out" by putting /* */ around it.
Would you be ok with this approach?
banner suggestion.png
Yes!
Just bring the bluish-gray panels all the way out to be flush with the elements below.
Quote from: Julius_2000 on October 19, 2022, 06:31:55 PMQuote from: TwitchisMental on October 19, 2022, 04:40:12 PMHello Chris319,
Maker of the theme that you are using here.
Would this be what you are wanting to do?
Twitch-s-World-Index(3).png
No, what he wants is something like this:
banner_want.png
Then honestly adding position relative to the header, adjusting the padding+width, and then absolute positioning of the search bar would be the easiest way to get the desired results..
For the mobile issue, go into responsive css to hide the search around 780px instead of 720px.
Video-Technology-Forum-Index(1).png
Just make the blue with the word "BOARDS" touch the blue above it with no white space in between, and we are there.
Quote from: TwitchisMental on October 19, 2022, 09:05:03 PMQuote from: Julius_2000 on October 19, 2022, 06:31:55 PMQuote from: TwitchisMental on October 19, 2022, 04:40:12 PMHello Chris319,
Maker of the theme that you are using here.
Would this be what you are wanting to do?
Twitch-s-World-Index(3).png
No, what he wants is something like this:
banner_want.png
Then honestly adding position relative to the header, adjusting the padding+width, and then absolute positioning of the search bar would be the easiest way to get the desired results..
For the mobile issue, go into responsive css to hide the search around 780px instead of 720px.
Video-Technology-Forum-Index(1).png
Easy, yes (as was Kindred's solution). Practical? I don't think so. As it is right now, even the login, register and mobile menu disappear at 720 screen width, preventing mobile users from even logging in. I don't know if this was intentional?
QuoteEasy, yes (as was Kindred's solution). Practical? I don't think so. As it is right now, even the login, register and mobile menu disappear at 720 screen width, preventing mobile users from even logging in. I don't know if this was intentional?
No, not intentional.
Now how to integrate these changes into the actual site?
Quote from: chris319 on October 20, 2022, 10:14:42 AMif this was intentional?
No, not intentional.
I meant Twitch.
Quote from: chris319 on October 20, 2022, 10:14:42 AMNow how to integrate these changes into the actual site?
Download the following files:
Put the svg of your logo without the frame in your Themes/images/custom folder
logo_noFrame.svg
In Admin/Configuration/Current Theme:
In Image Url change the image name at the end to the file's one.
Add these files to your CSS folder (make backup of old ones)
index.css
responsive.css
Put this into your Theme folder where the other php files are
index.template.php
I took the liberty to make some other changes while I was at it (marked as /*changed*/. Among other things, I changed the font size of the top menu because it was super tiny and also adjusted the width for icons as they were too close to the text at your font size of 114%.
This is how it looks now:
Theme adaptation.pngTheme mobile.png
If you want to change the color shade of your logo's border/ frame, go to:
.forumtitle img {
width: 450px;
border: 7px solid rgb(68, 132, 255);
}If you want to see how it looks before you save it, follow the tip to use your Developer Tool of your browser (press f12). You can then visually manipulate the color by clicking on the color icon which opens a color panel.
QuoteThis is how it looks now:
Great!
Can you make the grayish-blue panels on either side of the test pattern come all the way out aligned with the element below?
Thanks.
Quote from: chris319 on October 20, 2022, 11:30:16 AMCan you make the grayish-blue panels on either side of the test pattern come all the way out aligned with the element below?
Well, I left it at 85% because you were pretty clear that you didn't want any other changes ;)
Quote from: chris319 on October 19, 2022, 01:29:19 PMThe search bar stays right where it is.
The blue background stays right where it is.
No change to width.
No additional borders.
So, now you want the blue background stretched out aligned with the content body below?!
If so, you can do that yourself! Go to index.css and remove the 85% width from the #header. It'll go back to the 100% which is still there.
That did it, thanks.
The only thing I forgot to address in my modification is to let the login/ register panel get displayed again on small screens. You want that, too?
Quote from: Julius_2000 on October 20, 2022, 12:35:02 PMThe only thing I forgot to address in my modification is to let the login/ register panel get displayed again on small screens. You want that, too?
Yes, please.
Here are the new css files:
index.css
responsive.css
For legibility reasons I added a little padding to the boards and on smaller screens increased the margin for "last post". I also removed the border radius of the elements below the header to make them flush with the header.
Hey, that looks pretty good. You say this looks good on a small display?
https://www.videotechnologyforum.org/ (https://www.videotechnologyforum.org/)
Well, have you had yet the chance to test it on a smartphone?
Quote from: Julius_2000 on October 22, 2022, 07:17:04 AMWell, have you had yet the chance to test it on a smartphone?
I don't own a smartphone. I'm a luddite :)
I'll have somebody look.
Looks perfect on my phone.
Quote from: Julius_2000 on September 29, 2022, 04:59:33 PMThe 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.
Super simple.. even way too simple :D :D .. I thought we needed some kind of module or plugin.. or need to add some code :) Tx
H
Quote from: Helmuts on January 27, 2023, 06:59:08 PMQuote from: Julius_2000 on September 29, 2022, 04:59:33 PMThe 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.
Super simple.. even way too simple :D :D .. I thought we needed some kind of module or plugin.. or need to add some code :) Tx
H
Glad I could help! If you want to go with the times, you could also consider using the modern SVG file format. SVG has the benefit of always looking sharp and crisp no matter the size. For example, if you want to use your forum shortcut on a mobile device or PC, the icon that would be created uses the favicon. Using .ico or lower res images this icon would look blurry and pixelated. SVG instead would look perfect.
and you can also let it change with dark/light modes of your devices. For instance, in standard mode your icon looks dark and in dark mode it looks lighter, making for good contrast and legibility.
The Optimus mod is perfect for this task since it let's you handle your Favicon files directly within your Admin section without having to meddle with the php files. That way, you could use both the .ico Favicon as a fallback for older browsers and any other formats for your favicon, e.g. svg.
It's relatively simple. If you want to know more, let me know.