Hi again guys,
I have tried a quick search or two, but am probably not typing the right words to get an answer lol
I would like to replicate the Full Width Banner graphic that existed on the Old forum ver' 2.0.11, before we upgraded it to 2.1.4, it Obviously uses a different theme now, but I would like to replicate the look again.
Not being an SMF, CSS Or php Guru or genius, I am at a slight loss to know Where exactly, in What file And How I could create the look contained in the attached examples.
Any help and advice will be Fantastic ;) :)
The existing graphic, is 1920 x 106 btw
Your best bet would be to ask in the thread dedicated to supporting that specific theme
OK,.. but it Is the Default SMF 2.1.4 Theme.
At the end of index.css, you could add this:
h1.forumtitle {
background-image: url("https://example.com/image.jpg");
}
Obviously, use the real URL of your image.
That is a start, but the default #top anchor won't fill the banner without an extra tweak. That needs to be set to display: block; too. It would also be a good idea to set a defined height on the anchor. This is best done via padding rather than height (because CSS reasons) and if it is set in % it will keep the correct aspect ratio in any viewport.
Also, you will probably want to set background size on the image so it fits nicely on all screens. And, really, since the default picture tag will be redundant you will probably want to stop that from displaying.
This should do it:
.forumtitle {
background-image: url("https://example.com/image.jpg");
background-size: cover;
}
#top {
display: block;
/* For a banner with a 5:1 width/height ratio */
padding-top: 20%;
}
#top picture {
display: none;
}
Thank you both, I will try that and report back :)