News:

SMF 2.1.2 has been released! Take it for a spin! Read more.

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.
Please 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 !
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.

The funniest thing about this particular signature is that by the time you realise it doesn't say anything it's too late to stop reading it

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

Antechinus

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.

Grammy

Quote from: Antechinus on January 23, 2021, 07:44:10 PM

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. 

Antechinus

Next problem you'll have is that it's not responsive even with a viewport meta tag. :D

Grammy

Quote from: Antechinus on January 23, 2021, 10:39:14 PM
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.   ;)

Antechinus

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...

shadav

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

Grammy

Quote from: Antechinus on January 24, 2021, 07:11:19 AM
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%;" .   ;)

Grammy

Quote from: shadav on January 24, 2021, 11:08:15 AM
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

Kindred

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
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Grammy

Quote from: Kindred on January 24, 2021, 03:52:03 PM
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

Advertisement: