MyBB Community Forums - Replacing top left logo with a banner logo type

Hi guy's,

I did a search but i have not found a relevant solution for my issue, i want to replace the mybb logo with a banner type logo.
So i save my etm_logo.png in /images and replace the board logo with my url and it is working but with a few issues.

First i tried to resize my banner smaller but the change are not taken into account when i refresh the forum and second there is white space on the left, top and bottom. I tried searching the location where we can adjust the css for the logo but didn't find it.

The banner look oversized even if i made it smaller in Photoshop.

As a last question can i replace the banner for a .gif with animation in it?

Here a link if you want to see the problem : https://escapingthematrix.online/

EDIT: After trying to add the following code at the end of the global.css the banner vanish and removing the code does not bring the banner back. :

.logo {
 text-align: center;
}

EDIT 2: I can load the same banner if i save it as a gif but the png and the jpeg saved from photoshop do not show, i am baffled by this honestly!

EDIT 3: for the image not loading it was Photoshop causing the problem, you need to export and save for web(legacy) and not save a copy from file menu.

Regards Peter

I'm not sure what you want to do with this really? Are you looking to resize the logo given that it is massive and have it functional on smaller devices?

Example below;
Desktop: https://nbb.rocks/i/lV4Gc.png
Mobile: https://nbb.rocks/i/cDwTj.png

Is this what you want to achieve? If not feel free to pop me a message on Discord and I'll help you; Nasyr#8616

(2022-11-03, 04:59 AM)Nasyr Wrote: [ -> ]I'm not sure what you want to do with this really? Are you looking to resize the logo given that it is massive and have it functional on smaller devices?

Example below;
Desktop: https://nbb.rocks/i/lV4Gc.png
Mobile: https://nbb.rocks/i/cDwTj.png

Is this what you want to achieve? If not feel free to pop me a message on Discord and I'll help you; Nasyr#8616

Hi Nasyr and thank for replying, well my goal was to make the banner fit on top of the complete space on the screen and i would also like to make it look good on both desktop and mobile so maybe i should install a responsive theme first since i don't know how many templates need to be edited to get it responsive.

I don't want to make the whole board responsive just the main sections people would usually navigate on their phone.

Thank for your discord invite but i am an indie game dev and my budget is in the red unfortunately.

Regards Peter

(2022-11-03, 05:35 AM)peter_vps Wrote: [ -> ]
(2022-11-03, 04:59 AM)Nasyr Wrote: [ -> ]I'm not sure what you want to do with this really? Are you looking to resize the logo given that it is massive and have it functional on smaller devices?

Example below;
Desktop: https://nbb.rocks/i/lV4Gc.png
Mobile: https://nbb.rocks/i/cDwTj.png

Is this what you want to achieve? If not feel free to pop me a message on Discord and I'll help you; Nasyr#8616

Hi Nasyr and thank for replying, well my goal was to make the banner fit on top of the complete space on the screen and i would also like to make it look good on both desktop and mobile so maybe i should install a responsive theme first since i don't know how many templates need to be edited to get it responsive.

I don't want to make the whole board responsive just the main sections people would usually navigate on their phone.

Thank for your discord invite but i am an indie game dev and my budget is in the red unfortunately.

Regards Peter

Alright fair enough I would highly recommend having a responsive theme installed and work to alter that to suit your needs. WallBB can also make you an affordable custom theme, message him here (https://wallbb.co.uk/) for pricing, he also has premium and free themes. Of course there is also the Extend section at the top for free themes and addons. If you do need some help add me on Discord, I don’t bill unless I told you otherwise Toungue

(2022-11-03, 10:39 AM)Nasyr Wrote: [ -> ]
(2022-11-03, 05:35 AM)peter_vps Wrote: [ -> ]
(2022-11-03, 04:59 AM)Nasyr Wrote: [ -> ]I'm not sure what you want to do with this really? Are you looking to resize the logo given that it is massive and have it functional on smaller devices?

Example below;
Desktop: https://nbb.rocks/i/lV4Gc.png
Mobile: https://nbb.rocks/i/cDwTj.png

Is this what you want to achieve? If not feel free to pop me a message on Discord and I'll help you; Nasyr#8616

Hi Nasyr and thank for replying, well my goal was to make the banner fit on top of the complete space on the screen and i would also like to make it look good on both desktop and mobile so maybe i should install a responsive theme first since i don't know how many templates need to be edited to get it responsive.

I don't want to make the whole board responsive just the main sections people would usually navigate on their phone.

Thank for your discord invite but i am an indie game dev and my budget is in the red unfortunately.

Regards Peter

Alright fair enough I would highly recommend having a responsive theme installed and work to alter that to suit your needs. WallBB can also make you an affordable custom theme, message him here (https://wallbb.co.uk/) for pricing, he also has premium and free themes. Of course there is also the Extend section at the top for free themes and addons. If you do need some help add me on Discord, I don’t bill unless I told you otherwise

Hi Nasyr, thank for your help and i think i will try the emerald theme and will have to make the banner image responsive and tweak it to fit my theme since making the change to responsive will take me too much time.

Very kind from you offering help but i think it will be more beneficial for me to learn how to do it myself.

Regard Peter

Start by adding viewport to your headerinclude:

<meta name="viewport" content="width=device-width, initial-scale=1">

From there you'll likely have to alter some things to make sure it remains responsive.

Here are some things you might find useful:
https://www.w3schools.com/css/css_rwd_viewport.asp
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://www.w3schools.com/css/css_rwd_images.asp
https://www.w3schools.com/css/css_rwd_grid.asp

And a nice website with loads of resource links for responsive web design: https://bradfrost.github.io/this-is-resp...urces.html

I also ALWAYS implement normalize css by Necolas:

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {line-height: 1.15;-webkit-text-size-adjust: 100%;}body {margin: 0;}main {display: block;}h1 {font-size: 2em;margin: 0.67em 0;}hr {box-sizing: content-box;height: 0;overflow: visible;}pre {font-family: monospace, monospace;font-size: 1em;}a {background-color: transparent;}abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}b, strong {font-weight: bolder;}code, kbd, samp {font-family: monospace, monospace;font-size: 1em;}small {font-size: 80%;}sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sub {bottom: -0.25em;}sup {top: -0.5em;}img {border-style: none;}button, input, optgroup, select, textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}button, input {overflow: visible;}button, select {text-transform: none;}button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}fieldset {padding: 0.35em 0.75em 0.625em;}legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}progress {vertical-align: baseline;}textarea {overflow: auto;}[type="checkbox"], [type="radio"] {box-sizing: border-box;padding: 0;}[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}details {display: block;}summary {display: list-item;}template {display: none;}[hidden] {display: none;}

And then I also add in box-sizing css:

*,*::before,*::after {box-sizing: border-box;}

For MyBB specifically I've found I had to also implement this after doing the above:

.sceditor-button{width: auto !important;height: auto !important;}

(2022-11-04, 03:44 PM)Taylor M Wrote: [ -> ]Start by adding viewport to your headerinclude:

<meta name="viewport" content="width=device-width, initial-scale=1">

I also ALWAYS implement normalize css by Necolas:

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html {line-height: 1.15;-webkit-text-size-adjust: 100%;}body {margin: 0;}main {display: block;}h1 {font-size: 2em;margin: 0.67em 0;}hr {box-sizing: content-box;height: 0;overflow: visible;}pre {font-family: monospace, monospace;font-size: 1em;}a {background-color: transparent;}abbr[title] {border-bottom: none;text-decoration: underline;text-decoration: underline dotted;}b, strong {font-weight: bolder;}code, kbd, samp {font-family: monospace, monospace;font-size: 1em;}small {font-size: 80%;}sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sub {bottom: -0.25em;}sup {top: -0.5em;}img {border-style: none;}button, input, optgroup, select, textarea {font-family: inherit;font-size: 100%;line-height: 1.15;margin: 0;}button, input {overflow: visible;}button, select {text-transform: none;}button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}fieldset {padding: 0.35em 0.75em 0.625em;}legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}progress {vertical-align: baseline;}textarea {overflow: auto;}[type="checkbox"], [type="radio"] {box-sizing: border-box;padding: 0;}[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}details {display: block;}summary {display: list-item;}template {display: none;}[hidden] {display: none;}

And then I also add in box-sizing css:

*,*::before,*::after {box-sizing: border-box;}

For MyBB specifically I've found I had to also implement this after doing the above:

.sceditor-button{width: auto !important;height: auto !important;}

Thank for your help i appreciate greatly but i finally use an already responsive theme that solved all my issues the only problem is that there is a few bugs so i might be obligated to modify the default theme if i want everything to work.

Regards Peter