It was suggested that this might make a good Tips And Tricks?
This came about from a question I asked HERE (http://www.simplemachines.org/community/index.php?topic=547224.0).
I wanted to make one board (Forum Hints And Tips) really stand out for newbies, so my desire was to add an image to that board. The issue for me was that the database would not be happy if I removed the board title and replaced it with an image or if I added HTML to the board title field. The SMF staff walked me through it and the final solution is below. I use 2.0.11 default, but this is purely a CSS solution, so it should work on other themes.
Thank you so much to Kindred, Illori and Sir Osis for their great patience and instruction and to Antechinus for the final code:
#board_2 .info .subject {
background: url("../images/FQ.jpg") no-repeat;
width: 0;
height:150px;
padding-left: 650px;
display: inline-block;
overflow: hidden;
}
The width needs to be 0 and the padding-left is the exact width of your image.
That's my particular board number, image and dimensions. Yours will vary. Screenshot attached.
This solution allows me to still have text in the Forum Title field, even though it does not show. I opted not to have anything in the description field and, in my case, simply Photoshopped what I wanted onto my image. But you can certainly add a text description and moderators, as well, without issue. (The second screenshot shows that option.)
Yippee! :D
I'm thinking that maybe this should be moved to Tips/Tricks. :)
Pretty slick.
Zitat von: Steve in Juli 09, 2016, 02:58:15 NACHMITTAGS
I'm thinking that maybe this should be moved to Tips/Tricks. :)
Pretty slick.
Thanks, Steve!! (Though, I may never want to see another squirrel, again.) :D
Zitat von: Steve
I'm thinking that maybe this should be moved to Tips/Tricks. :)
Wish I'd suggested that ::)
Zitat von: Shambles in Juli 09, 2016, 03:53:43 NACHMITTAGS
Wish I'd suggested that ::)
Yeah, what's up with that??? ;D
That's a great idea. Thanks for sharing !
Nice idea!
Thanks very much!
I hope you don't mind, but I made a mod titled Replace Board Title With Image (https://custom.simplemachines.org/mods/index.php?mod=4162) (it's not approved yet) to make it easier for admin to do this to their forum...
Zitat von: dougiefresh in November 18, 2017, 11:52:21 VORMITTAG
I hope you don't mind, but I made a mod titled Replace Board Title With Image (https://custom.simplemachines.org/mods/index.php?mod=4162) (it's not approved yet) to make it easier for admin to do this to their forum...
Nice. Look forward to trying that one. 8)
I finally got my website somewhat working again! It's now available here (http://www.xptsp.com/board/index.php?topic=1615.0), as well.... Please note that it has not been approved by the Customization Team, but it seems to work just fine....
Replace Board Title With Image (http://custom.simplemachines.org/mods/index.php?mod=4162) mod has been approved! Yay!
Shouldn't this be moved to the "Now Available" board?
Zitat von: dougiefresh in Dezember 08, 2017, 08:59:56 NACHMITTAGS
Replace Board Title With Image (http://custom.simplemachines.org/mods/index.php?mod=4162) mod has been approved! Yay!
Congrats DF, well deserved!!
Zitat von: dougiefresh in Dezember 08, 2017, 08:59:56 NACHMITTAGS
Replace Board Title With Image (http://custom.simplemachines.org/mods/index.php?mod=4162) mod has been approved! Yay!
Awesome! Thanks for your mod!
Zitat von: dougiefresh in November 18, 2017, 11:52:21 VORMITTAG
I hope you don't mind, but I made a mod titled Replace Board Title With Image (https://custom.simplemachines.org/mods/index.php?mod=4162) (it's not approved yet) to make it easier for admin to do this to their forum...
I think that's awesome. :)
Very cool! I just discovered this forum and already learning new tips!! 8)
You're not as new as I am, haha! :D
Anyways, I'm always on the lookout for the new Tips And Tricks so this comes in handy.
I'll have to bookmark this whole section, damn! :)
Yoo hoo..... I know you CSS wizards are out here somewhere.
A few years ago when we were all fiddling around with this, I hadn't given any thought to mobile devices. This is the block of code in index.css (for my particular board):
#board_2 .info .subject {
background: url("../images/FQ.jpg") no-repeat;
width: 0;
height:150px;
padding-left: 650px;
display: inline-block;
overflow: hidden;
}
It was explained to me on the support thread that led to this Tips and Tricks topic that I needed to make the width 0 and the padding-left would be the actual width of my image. The thing is, the image width of 650px seems to break the forum's layout on iPhone. I can't seem to find a way to use max-width: 100%; to stop that from happening. If I do, it gets a little squirrely. (I hate to resurrect my own very old thread, but can you guys weigh in on how I'd modify this block of code to make an image this size play well with mobile?
Thanks!
Skip the left padding, and use top padding + text-indent + nowrap instead:
#board_2 .info .subject {
background: url("../images/FQ.jpg") no-repeat;
width: 650px;
max-width: 100%;
padding-top: 23%;
display: inline-block;
overflow: hidden;
line-height: 0;
text-indent: 100%;
white-space: nowrap;
}
That should work. Haven't actually tested it though. If it screws up, let me know and I'll get more thorough. There are several ways you can get much the same result.
Zitat von: Antechinus in Januar 23, 2021, 01:22:22 VORMITTAG
Skip the left padding, and use top padding + text-indent + nowrap instead:
#board_2 .info .subject {
background: url("../images/FQ.jpg") no-repeat;
width: 650px;
max-width: 100%;
padding-top: 23%;
display: inline-block;
overflow: hidden;
line-height: 0;
text-indent: 100%;
white-space: nowrap;
}
That should work. Haven't actually tested it though. If it screws up, let me know and I'll get more thorough. There are several ways you can get much the same result.
It still looks great on a desktop but the mobile is still broken. I've attached a pic of what I mean by "broken". (That image is still 650px, it's just a transparent png, so I could get it to look centered.) It only looks like the attachment on my iPhone. I clear the Safari caches and history each time after making changes.
Thanks so much. :)
Ok. I'm not sure what that screenshot is supposed to be telling me. I appears to be pasted together from two shots, and as far as I can tell it's behaving normally.
Do note that without a viewport meta tag, the SMF 2.0 default theme will never behave properly on mobile anyway.
Zitat von: Antechinus in Januar 23, 2021, 07:44:10 NACHMITTAGS
Do note that without a viewport meta tag, the SMF 2.0 default theme will never behave properly on mobile anyway.
That's it.... sorted. Thanks so much for pointing that out.
Next problem you'll have is that it's not responsive even with a viewport meta tag. :D
Zitat von: Antechinus in Januar 23, 2021, 10:39:14 NACHMITTAGS
Next problem you'll have is that it's not responsive even with a viewport meta tag. :D
Yep! :D
Thought it was sorted but look what I have to think with. Well, I guess I'll use a smaller image and go pick another battle. ;)
I meant the theme as a whole. The image should still be responsive with that code, as long as the theme around it is, but the theme isn't coded to be responsive so...
if it's based off of curve you could try to add the attached mod in this post here: https://www.simplemachines.org/community/index.php?topic=535718.msg4019821#msg4019821
it should at least get you started into a bit more responsive theme
Zitat von: Antechinus in Januar 24, 2021, 07:11:19 VORMITTAG
I meant the theme as a whole. The image should still be responsive with that code, as long as the theme around it is, but the theme isn't coded to be responsive so...
The image in question was fine after adding the viewport meta tag but suddenly the image on the portal front page was "larger than life" and scary, so there was a lot going on, ha! But since that portal image is hard-coded, I'll check to see if I forgot the "max-width: 100%;" . ;)
Zitat von: shadav in Januar 24, 2021, 11:08:15 VORMITTAG
if it's based off of curve you could try to add the attached mod in this post here: https://www.simplemachines.org/community/index.php?topic=535718.msg4019821#msg4019821
it should at least get you started into a bit more responsive theme
I've never tried it but I think I'll give it a go on one of my other test forums and see if I can find a way to blow it up, ha! I'm the designated detonator, around here. :D
but wait.... didn't you say that you were using Ant's Mutant Curve?
Don't install that mod if you are using Ant's Mutant -- ANt's Mutant is mostly responsive as is, AFAIK
Zitat von: Kindred in Januar 24, 2021, 03:52:03 NACHMITTAGS
but wait.... didn't you say that you were using Ant's Mutant Curve?
Don't install that mod if you are using Ant's Mutant -- ANt's Mutant is mostly responsive as is, AFAIK
Who me? :o
Not this girl. I only use SMF Default (since Mods hate me). I admit, I play around with the cosmetics until you can't recognize it, but the bones are still there. :D