How can I add an additional picture next to the board, something like the one in the attachment.
Something like this? https://www.simplemachines.org/community/index.php?topic=539000.msg3830565#msg3830565
Is it the only way or maybe there is some mod? As I understood I need to add images first and then add code with URL?
There are mods for this as well, if you would prefer-
https://custom.simplemachines.org/mods/index.php?mod=3604
https://custom.simplemachines.org/mods/index.php?mod=511
I tried these mods but I would like something next to the main picture, the same as I showed earlier.
I think this would still be a good starting point.
Quote from: Steve on January 29, 2018, 06:28:10 AM
Something like this? https://www.simplemachines.org/community/index.php?topic=539000.msg3830565#msg3830565
Other than that, you can try to search the mod site or this could be moved to Coding discussion.
I checked this link and as I understood the image will appear next to the name of the board or next to the description. I want to keep the same images but add an additional ones next to it.
then either use CSS or get someone to custom code it for you.
I need a code of CSS so that the images appear in the right place.
you need to start learning basic html and css.
I just tried to add this code to index.css but no picture appeared on the forum:
#board_82 > .info > a::before {
content: "";
height: 34px;
width: 35px;
position: absolute;
margin-left: 5px;
background: url(http://www.forum.bharatconnect.net/Themes/default/images/li4.png) no-repeat;
}
Are you sure you are using the right board ID? That should work fine.
Better to change it to this though:
#board_{ID} > .info > a::before {
content: "";
height: 34px;
width: 35px;
display: inline-block;
margin-right: 5px;
background: url(http://www.forum.bharatconnect.net/Themes/default/images/li4.png) no-repeat;
}
Yes, I open the board and checked the number. Do I need to add this code to index.css, right? I add it in the end but nothing happened. I have one picture at the moment and wanted to add one small one like on the picture I posted bellow.
This code works on the main boards, it doesn't work on child board descriptions on board index. For example your board "7". Other than that, just make sure you're clearing your cache after you add your changes.
Yes, I was trying on the main boards, not on the child one. Still I didn't see any changes, will try again with this code.
You may have to clear your cache after any css changes.
I cleared the cache but nothing happened.
I have picture like in the attachment now and would like to add a small one next to the main image.
Change #board_{82} to #board_82
The same like on the code I posted earlier?
I can see it like in the attachment now but I would like this small picture appear just next to the main one.
Any suggestions how to make it the way I want them to be shown? Would be really grateful for any help.
Sorry, forgot about this topic.
Just change #board_ID > .info > a::before to #board_ID > .icon:after
You should try using "inspect element" and see some guides on how css selectors work, it would make things much easier for you.
Thanks a lot for your help, will try it out now. I would love to learn more but need to find the right resource for that.
I changed to this code but now I don't see any picture at all.
That's because you changed it to #board_82 > .info > a::after, not #board_82 > .info:after
You wrote earlier that I need to change to #board_ID > .icon:after
Exactly...
I have this code at the moment but I don't see any picture at all
#board_82 > .icon:after
content: "";
height: 34px;
width: 35px;
display: inline-block;
margin-right: 5px;
background: url(http://www.forum.bharatconnect.net/Themes/default/images/li4.png) no-repeat;
}
You broke the brackets, that's invalid css.
That's what you wrote me earlier, do you mean the brackets after icon:after?
I never said to remove the brackets. Every css "block" always has brackets.
You told me to change this one #board_ID > .icon:after
As I assume it should be
#board_ID > .icon:after }
I am sorry if I disturb you with my question but I just started to learn about codes
The other way around :)
#board_ID > .icon:after {
Everything that goes between the { and } is what will "make stuff happen". The part at the beginning is what selects something.
Thanks a lot for your help, I can see picture now but it is under the image, can it be next to it?
Quote from: bharat on February 07, 2018, 04:51:43 AM
Thanks a lot for your help, I can see picture now but it is under the image, can it be next to it?
Do you still have "display: inline-block;" in the css?
Yes I do have it like this:
#board_82 > .icon:after {
content: "";
height: 24px;
width: 25px;
display: inline-block;
margin-right: 5px;
background: url(http://www.forum.bharatconnect.net/Themes/default/images/li4.png) no-repeat;
}
Quote from: pepa on February 07, 2018, 06:52:01 AM
Quote from: bharat on February 07, 2018, 04:51:43 AM
Thanks a lot for your help, I can see picture now but it is under the image, can it be next to it?
Do you still have "display: inline-block;" in the css?
Should it be removed?
I am really conficed as the image doesn't look right now, half of it is not even visible.
No, "display: inline-block;" doesn't need to be removed. It won't show anything if you do.
The size you defined is smaller than the image, so it gets cut. Easiest fix is change it to:
#board_82 > .icon:after {
content: "";
height: 24px;
width: 25px;
display: inline-block;
margin-right: 5px;
background: url(http://www.forum.bharatconnect.net/Themes/default/images/li4.png) no-repeat center center / auto 100%;
}
I tried to make image smaller but then I put the same size but still I see it like this. Also is there a way to make this image next to the main one, not under it.
You need to learn CSS.... that's what it really comes down to... CSS is tweaking little things here and there.
To make it show next to the other image, you need more space in the icon column... to make more space in the icon column, you have to increase that column width, possibly that cell width... and also, possibly, decrease the other columns.
Using one of the developer tools in the browsers, (firefox, chrome and IE all have dev tools now) you can SEE the effecting CSS and even see what happens when you change various CSS settings. But we can't just hand you a code and say "this will do what you ask" without tweaking your site, specifically.... and, unless you want to pay someone to do that, it's unlikely that any of us have the time to sit and do the tiny little tweaks that it will take, a little bit at a time
Thanks for your suggestion, I would like to learn CSS but it can't be done in one day that's why I asked you for help.
The more complicated part of the css has already been given to you (and more that should have been very easy to do with very basic css knowledge).
If you really want to learn then you should start playing with the inspector tool and read on some css basics. Anything you do in the inspector(dev tools) only affects the page for you, so there is no need to worry it will break things for others.
https://www.w3schools.com/css/
Thanks for the link, will check it out!