News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

A Neat Way To Enhance a Board!

Started by Grammy, July 09, 2016, 09:57:27 AM

Previous topic - Next topic

Grammy

It was suggested that this might make a good Tips And Tricks?

This came about from a question I asked HERE.

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

Steve

I'm thinking that maybe this should be moved to Tips/Tricks. :)

Pretty slick.
DO NOT pm me for support!

Grammy

Quote from: Steve on July 09, 2016, 02:58:15 PM
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

Shambles

Quote from: Steve
I'm thinking that maybe this should be moved to Tips/Tricks. :)

Wish I'd suggested that  ::)

Grammy


landyvlad

That's a great idea. Thanks for sharing !
"Put as much effort into your question as you'd expect someone to give in an answer"

Please do not PM, IM or Email me with questions on astrophysics or theology.  You will get better and faster responses by asking homeless people in the street. Thank you.

Be the person your dog thinks you are.

SMiFFER

Quote of the day: A troll is an obstinate bloke who only hungers for your attention. If you feed him, he will puke all over you!

dougiefresh

I hope you don't mind, but I made a mod titled Replace Board Title With Image (it's not approved yet) to make it easier for admin to do this to their forum...

lurkalot

Quote from: dougiefresh on November 18, 2017, 11:52:21 AM
I hope you don't mind, but I made a mod titled Replace Board Title With Image (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)

dougiefresh

I finally got my website somewhat working again!  It's now available here, as well....  Please note that it has not been approved by the Customization Team, but it seems to work just fine....


Masterd

Shouldn't this be moved to the "Now Available" board?

SMiFFER

Quote of the day: A troll is an obstinate bloke who only hungers for your attention. If you feed him, he will puke all over you!


Grammy

Quote from: dougiefresh on November 18, 2017, 11:52:21 AM
I hope you don't mind, but I made a mod titled Replace Board Title With Image (it's not approved yet) to make it easier for admin to do this to their forum...


I think that's awesome.   :)

Calgary Real Estate

Very cool! I just discovered this forum and already learning new tips!!  8)

pushkurch

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!  :)

Grammy

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!

Antechinus

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.

Grammy

Quote from: Antechinus on January 23, 2021, 01:22:22 AM
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.   :)

Advertisement: