This isn't really a coding question and, since my forum is 2.0.11, default, I thought this might be the place to ask:
Will it wreak havoc with the Database for any reason, if, instead of having text in the title of my first board, I simply have an image, instead? (Of course, it doesn't center on the message index page, but I'm okay with that, I guess.)
I just wondered if the database requires text in the board name and if I will cause problems by using an image?
(attached shots)
you should not do that. now try to move a topic to that board and it will not show you the name of the board. you really should not be putting anything but text into the name of the board. if you have to dig into the database to do what you want, you really should not do it.
Quote from: Illori on July 08, 2016, 11:03:26 AM
you should not do that. now try to move a topic to that board and it will not show you the name of the board. you really should not be putting anything but text into the name of the board. if you have to dig into the database to do what you want, you really should not do it.
Alright, thanks for letting me know, Illori. It's on a test board, so no harm done, but that's the purpose for testing. :)
It's gone, then.
One last question, if you don't mind...
What if I do have text in the board title, along with the image? Still a no-no? (I opted for no description and just added text in the board name field along with the image link.) Will that also screw things up?
(attached)
you should NOT use any HTML in the board title.
there are 2 or 3 mods which allow you to add images or icons for boards... do not put any html into the board title, and limited if any HTML (like bold) in the board description
Quote from: Kindred on July 08, 2016, 11:40:27 AM
there are 2 or 3 mods which allow you to add images or icons for boards... do not put any html into the board title, and limited if any HTML (like bold) in the board description
I'll go mod shopping, then. Thanks! :)
I should demonstrate how to do this purely with CSS sometime, though it's awful hacky to do it that way. And it's going to be specific to one theme, and require jumping through hoops to get right.
You could just have an image in the board description though, far less messy, far more usable.
Quote from: Arantor on July 08, 2016, 02:00:55 PM
I should demonstrate how to do this purely with CSS sometime, though it's awful hacky to do it that way. And it's going to be specific to one theme, and require jumping through hoops to get right.
You could just have an image in the board description though, far less messy, far more usable.
I long for that "Someday"! :D
Well, I play around with themes, but my production forum will always be default. I thought about CSS but my issue is that I only wanted the first board to be different. It's the "Come Here All You New People And Learn How To Work This Thing" board and I wanted to tart it up a bit so that the newbies would be drawn to it. But I couldn't wrap my head around making CSS affect only that one board. It would seem I would still need to put some sort of HTML into the title to at least assign it to a class, so I hit a snag, there. I didn't like the image in the description but, hey, if that's what I have to do, I'll concede. :)
#board_23 .info { background-image: url("yourimage.gif"); }
Quote from: Arantor on July 08, 2016, 02:00:55 PM
I should demonstrate how to do this purely with CSS sometime, though it's awful hacky to do it that way. And it's going to be specific to one theme, and require jumping through hoops to get right.
You could just have an image in the board description though, far less messy, far more usable.
http://www.simplemachines.org/community/index.php?topic=539000.0 somewhat has been done already, although here it is the description not the title.
Quote from: Kindred on July 08, 2016, 02:16:21 PM
.board_23 #info { background-image: url("yourimage.gif"); }
Wow, thanks for that, Kindred! :D
Quote from: Illori on July 08, 2016, 02:16:50 PM
http://www.simplemachines.org/community/index.php?topic=539000.0 somewhat has been done already, although here it is the description not the title.
Thanks, I'll give that a read. :)
Quote from: Kindred on July 08, 2016, 02:16:21 PM
#board_23 .info { background-image: url("yourimage.gif"); }
I assumed the OP wanted to replace the board name out, not leave the text in, which requires manipulating the link specifically, which is all kinds of evil.
Quote from: Arantor on July 08, 2016, 02:20:33 PM
I assumed the OP wanted to replace the board name out, not leave the text in, which requires manipulating the link specifically, which is all kinds of evil.
Well, that would be ideal... I just didn't know how the database would react if I didn't have some sort of text in the title field.
Quote from: Grammy on July 08, 2016, 03:06:24 PM
Well, that would be ideal... I just didn't know how the database would react if I didn't have some sort of text in the title field.
it would make it hard to move topics to a board without a title/name. using CSS to change it would not change the fact that you need a name in that field.
Quote from: Illori on July 08, 2016, 03:11:56 PM
it would make it hard to move topics to a board without a title/name. using CSS to change it would not change the fact that you need a name in that field.
That's true. Plus, I assumed I'd need to be able to assign some sort of class to that board in order for the CSS to take affect, so HTML seems unavoidable. If not, that'd be great and keeping text in the field would be fine. I just want to keep the database happy. :)
#board_23 .info a {
background-image: url("yourimage.gif") no-repeat;
width: 0;
height:##px; //where ## is the image height
padding-left: ##px; // where ## is the exact image width
color: transparent;
display: inline-block;
overflow: hidden;
}
not fully tested, but seems to work
this would also work given the browser is css3 compatible
a[href*="http://www.simplemachines.org/community/index.php?board=147.0"]{content: url("http://avatars.simplemachinesweb.com/smf/avatar_1261_1459591346.png");}
first URL is the url to the board, second is the URL to the image to replace the name with.
with my custom css for this site, this what the change looks like (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fi.imgur.com%2F2ZrElX5.png&hash=94948c6729a47cb7a859b1c1e328ce9d647590ac)
replacing the board name for SMF 2.0.x Support with kindred's avatar.
that will also replace it in the linktree etc where that URL is found. does not effect where the name of the board is seen in other places like when moving topics.
Quote from: Kindred on July 08, 2016, 03:38:06 PM
#board_23 .info a {
background-image: url("yourimage.gif") no-repeat;
width: 0;
height:##px; //where ## is the image height
padding-left: ##px; // where ## is the exact image width
color: transparent;
display: inline-block;
overflow: hidden;
}
not fully tested, but seems to work
Aha! Here is it with pure CSS and leaving text in the title field to play nice with the database! I changed the image to be a blank sign, so that the text would ride on top of it.
(I omitted a description. Is that necessary?)
Quote from: Illori on July 08, 2016, 03:59:42 PM
this would also work given the browser is css3 compatible
a[href*="http://www.simplemachines.org/community/index.php?board=147.0"]{content: url("http://avatars.simplemachinesweb.com/smf/avatar_1261_1459591346.png");}
CSS is fascinating stuff! :D
You should be able to do it by using a :before pseudo as well. If you want more options.
Quote from: Antechinus on July 08, 2016, 07:07:03 PM
You should be able to do it by using a :before pseudo as well. If you want more options.
I've never used that before, but I'm reading up on it now. I so want to learn this; I think CSS is amazing. :)
And yes.... Description can be blank without causing issues
Quote from: Kindred on July 08, 2016, 09:39:17 PM
And yes.... Description can be blank without causing issues
Here it is with better squirrels, ha! The green text is what's in the board title and what's below it is what's in the description field and it's fine, except that the only thing clickable is the title and, with an image this size, you'd want a larger click field. So I do have <a> tags in the description for now, which I won't keep. I'm trying to discover if it's possible to have the image clickable without referencing it anywhere other than in CSS. ???
I was wondering about image mapping... I may sleep on it. :)
The entire image should be clckable, with that CSS...
Quote from: Kindred on July 08, 2016, 10:33:26 PM
The entire image should be clckable, with that CSS...
Well, I thought so... I'll inspect it and make sure I didn't do a bad copy/paste.
Darn it! I guess I was uploading the old index.css that had my original CSS in it. :(
So, the image appeared but it wasn't clickable. Now I have this and the entire field is clickable, but neither the image nor the board title are appearing.
#board_2 .info a {
background-image: url("../images/FQ.jpg") no-repeat;
width: 0;
height:150px;
padding-left: 469px;
color: transparent;
display: inline-block;
overflow: hidden;
}
My image is in default/images.
Image will not display if width: 0;
Get rid of the no repeat
And sir osis... The width 0 gets rid of he text, the padding left makes the image able to appear
Quote from: Sir Osis of Liver on July 08, 2016, 10:51:53 PM
Image will not display if width: 0;
I'm stumped on what to set it at... if I set it for the width of the image, the page gets crazy. :D
Quote from: Kindred on July 08, 2016, 10:54:01 PM
Get rid of the no repeat
It's back, thanks! Still no forum title, though. (Screenshot)
Oh... You want the words too? Get rid of the padding statement and change the width from 0 to the image width
Quote from: Kindred on July 08, 2016, 11:01:46 PM
Oh... You want the words too? Get rid of the padding statement and change the width from 0 to the image width
This still gives me the last screenshot.
/* For links to change the code stuff... */
#board_2 .info a {
background-image: url("../images/FQ.jpg");
width: 469px;
height:150px;
color: transparent;
display: inline-block;
overflow: hidden;
}
But.... since I do have text in the Board's title field and don't need the description, I should be able to leave it like this and just photoshop whatever I want on the image, right? I mean, the title is there, it's just not showing up. So that should get rid of any database issues?
Is there another edit elsewhere for this? If I have the no-repeat, image is not displayed. If I remove it, image is displayed twice, over and under description, and board title is gone.
Quote from: Sir Osis of Liver on July 08, 2016, 11:26:51 PM
Is there another edit elsewhere for this? If I have the no-repeat, image is not displayed. If I remove it, image is displayed twice, over and under description, and board title is gone.
I manhandled it. :D
I ended up editing the image and increasing its width to fit, then Photoshopped what I wanted to say onto the image. I have the board title in the board settings, but with the image sitting as it does, it's clickable and it doesn't matter (to me) that the forum title doesn't show. So it's the biggest hack job on the planet!
(screenshot)
This is my CSS:
#board_2 .info a {
background-image: url("../images/FQ.jpg");
width: 0;
height:150px;
padding-left: 650px;
color: transparent;
display: inline-block;
overflow: hidden;
}
Long as it works. See what happens if you assign a moderator to that board.
Quote from: Sir Osis of Liver on July 08, 2016, 11:38:43 PM
Long as it works. See what happens if you assign a moderator to that board.
Phooey.... it doubles the image. But you knew that, didn't you? :D
In my case, I'd never have a moderator on that particular board because it's only Forum tips, but it sure would screw things up if I suddenly wanted to tart up the rest of the joint. ;)
I'm gonna sleep on it and come back and joust this windmill in the morning.
Thanks, you guys; you rock. :)
Quote from: Sir Osis of Liver on July 08, 2016, 11:26:51 PM
Is there another edit elsewhere for this? If I have the no-repeat, image is not displayed. If I remove it, image is displayed twice, over and under description, and board title is gone.
That's because you can't have the background repeat as part of the background-image declaration. It's invalid, so the whole declaration gets dropped. The way to do it, is to just use background instead of background-image. That way you can have all background properties in the one declaration.
Also, you shouldn't need color: transparent; as the text won't be visible no matter what color it is. So this should work:
#board_2 .info a {
background: url("../images/FQ.jpg") no-repeat;
width: 0;
height:150px;
padding-left: 650px;
display: inline-block;
overflow: hidden;
}Or you could use this, which would do the same thing:
#board_2 .info a {
background: url("../images/FQ.jpg") no-repeat;
width: 650;
height: 150px;
text-indent: 100%;
white-space: nowrap;
display: inline-block;
overflow: hidden;
}Quote from: Grammy on July 08, 2016, 11:43:49 PM
Quote from: Sir Osis of Liver on July 08, 2016, 11:38:43 PM
Long as it works. See what happens if you assign a moderator to that board.
Phooey.... it doubles the image. But you knew that, didn't you? :D
That's because your moderator link is another anchor (a tag) inside #board_2 .info, so the way to sort that out is to use the existing .subject class to only put the relevant CSS on the first anchor.
#board_2 .info .subject {
background: url("../images/FQ.jpg") no-repeat;
width: 0;
height:150px;
padding-left: 650px;
display: inline-block;
overflow: hidden;
}
You can remove the moderator text in BoardIndex.template.php -
// Show the "Moderators: ". Each has name, href, link, and id. (but we're gonna use link_moderators.)
if (!empty($board['moderators']))
echo '
<p class="moderators">', count($board['moderators']) == 1 ? $txt['moderator'] : $txt['moderators'], ': ', implode(', ', $board['link_moderators']), '</p>';
Not really necessary, and will save you some work.
Or, you can do it properly -
Quote from: Antechinus on July 08, 2016, 11:56:33 PM
#board_2 .info .subject {
background: url("../images/FQ.jpg") no-repeat;
width: 0;
height:150px;
padding-left: 650px;
display: inline-block;
overflow: hidden;
}
Very nice. (https://www.simplemachines.org/community/proxy.php?request=http%3A%2F%2Fwww.thekrashsite.com%2Fpics%2Fthu.gif&hash=f4392e100b91a27ad55c137fafc83bec6aefd9cf)
This is brilliant!
#board_2 .info .subject {
background: url("../images/FQ.jpg") no-repeat;
width: 0;
height:150px;
padding-left: 650px;
display: inline-block;
overflow: hidden;
}
I seem to be able to add moderators 'til the cows come home! (Or squirrels.....) :D
Thanks so much!
Package up this solution and post it as a tip/trick in the "Tips & Tricks" board ;)
Quote from: Shambles on July 09, 2016, 08:28:19 AM
Package up this solution and post it as a tip/trick in the "Tips & Tricks" board ;)
I'd only be posting the work that the other guys did! :D
I had the image appearing where I wanted it but I still had the issue of the forum title and the ability to add moderators and they sorted that for me.
But if no one minds, I'd like to see it there, as well, with all the credit going to their work? (And since I'm not sure how to present a topic for Tips and Tricks, maybe someone else will do the honors?) :)
EDIT: Actually, I did post in the Coding forum. I hope that was okay. :)