Advertisement:

Author Topic: Add pictures next to the board  (Read 3197 times)

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Add pictures next to the board
« on: January 29, 2018, 05:43:05 AM »
How can I add an additional picture next to the board, something like the one in the attachment.

Offline Steve

  • Freak
  • Support Specialist
  • SMF Hero
  • *
  • Posts: 4,334
  • Gender: Male
  • I have not yet begun to procrastinate.
Online Manual

Please do not PM me for support.

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #2 on: January 29, 2018, 06:39:22 AM »
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?

Offline br360

  • Support Specialist
  • SMF Hero
  • *
  • Posts: 2,220
    • GenXcommunity
Re: Add pictures next to the board
« Reply #3 on: January 29, 2018, 12:43:02 PM »

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #4 on: January 30, 2018, 02:20:04 AM »
I tried these mods but I would like something next to the main picture, the same as I showed earlier.

Offline Aleksi "Lex" Kilpinen

  • A Peculiar Finn
  • Lead Support Specialist
  • SMF Super Hero
  • *
  • Posts: 17,234
  • Gender: Male
  • Don't worry, I'm n00b friendly
    • Aleksi.Kilpinen on Facebook
    • aleksi-kilpinen on LinkedIn
Re: Add pictures next to the board
« Reply #5 on: January 30, 2018, 09:10:46 AM »
I think this would still be a good starting point.
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.
A Finnish Support Specialist
 Happily running multiple SMF 2.0 installations.

How you can help SMF

"Before you allow people access to your forum, especially in an administrative position, you must be aware that that person can seriously damage your forum.
 Therefore, you should only allow people that you trust, implicitly, to have such access." -Douglas

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #6 on: January 30, 2018, 12:38:07 PM »
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.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 56,714
  • Gender: Male
    • Kindred-999 on GitHub
Re: Add pictures next to the board
« Reply #7 on: January 30, 2018, 02:11:00 PM »
then either use CSS or get someone to custom code it for you.
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #8 on: January 31, 2018, 04:05:04 AM »
I need a code of CSS so that the images appear in the right place.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 56,714
  • Gender: Male
    • Kindred-999 on GitHub
Re: Add pictures next to the board
« Reply #9 on: January 31, 2018, 09:32:34 AM »
you need to start learning basic html and css.
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #10 on: February 02, 2018, 04:06:04 AM »
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;
}
« Last Edit: February 02, 2018, 04:21:36 AM by bharat »

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #11 on: February 03, 2018, 09:54:44 AM »
Are you sure you are using the right board ID? That should work fine.

Better to change it to this though:
Code: [Select]
#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;
}
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #12 on: February 04, 2018, 03:44:56 AM »
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.

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #13 on: February 04, 2018, 04:53:07 AM »
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.
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #14 on: February 04, 2018, 06:38:52 AM »
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.

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #15 on: February 04, 2018, 06:41:20 AM »
You may have to clear your cache after any css changes.
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #16 on: February 04, 2018, 06:47:25 AM »
I cleared the cache but nothing happened.

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #17 on: February 04, 2018, 06:51:18 AM »
I have picture like in the attachment now and would like to add a small one next to the main image.

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #18 on: February 04, 2018, 06:54:31 AM »
Change #board_{82} to #board_82
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #19 on: February 04, 2018, 06:59:30 AM »
The same like on the code I posted earlier?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #20 on: February 04, 2018, 07:06:41 AM »
I can see it like in the attachment now but I would like this small picture appear just next to the main one.

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #21 on: February 06, 2018, 09:33:52 AM »
Any suggestions how to make it the way I want them to be shown? Would be really grateful for any help.

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #22 on: February 06, 2018, 11:28:59 AM »
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.
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #23 on: February 06, 2018, 12:07:19 PM »
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.

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #24 on: February 06, 2018, 12:18:02 PM »
I changed to this code but now I don't see any picture at all.

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #25 on: February 06, 2018, 04:03:08 PM »
That's because you changed it to #board_82 > .info > a::after, not #board_82 > .info:after
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #26 on: February 07, 2018, 01:26:44 AM »
You wrote earlier that I need to change to  #board_ID > .icon:after

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #27 on: February 07, 2018, 04:13:33 AM »
Exactly...
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #28 on: February 07, 2018, 04:16:57 AM »
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;
}

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #29 on: February 07, 2018, 04:23:30 AM »
You broke the brackets, that's invalid css.
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #30 on: February 07, 2018, 04:25:58 AM »
That's what you wrote me earlier, do you mean the brackets after icon:after?

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #31 on: February 07, 2018, 04:27:00 AM »
I never said to remove the brackets. Every css "block" always has brackets.
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #32 on: February 07, 2018, 04:29:21 AM »
You told me to change this one #board_ID > .icon:after

As I assume it should be

#board_ID > .icon:after }


Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #33 on: February 07, 2018, 04:30:03 AM »
I am sorry if I disturb you with my question but I just started to learn about codes

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #34 on: February 07, 2018, 04:40:40 AM »
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.
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #35 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?

Offline pepa

  • Jr. Member
  • **
  • Posts: 192
Re: Add pictures next to the board
« Reply #36 on: February 07, 2018, 06:52:01 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?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #37 on: February 07, 2018, 07:05:05 AM »
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;
}

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #38 on: February 07, 2018, 09:42:12 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?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #39 on: February 07, 2018, 09:53:35 AM »
I am really conficed as the image doesn't look right now, half of it is not even visible.

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #40 on: February 07, 2018, 02:00:56 PM »
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:

Code: [Select]
#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%;
}
Do you live today a life you would like to have for eternity?

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #41 on: February 07, 2018, 02:15:18 PM »
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.

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 56,714
  • Gender: Male
    • Kindred-999 on GitHub
Re: Add pictures next to the board
« Reply #42 on: February 07, 2018, 03:50:54 PM »
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
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #43 on: February 08, 2018, 04:13:46 AM »
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.

Offline Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • Sophist Member
  • *
  • Posts: 1,359
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #44 on: February 08, 2018, 08:36:48 AM »
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.
Do you live today a life you would like to have for eternity?

Offline Kindred

  • The Mean One
  • Support Specialist
  • SMF Legend
  • *
  • Posts: 56,714
  • Gender: Male
    • Kindred-999 on GitHub
Re: Add pictures next to the board
« Reply #45 on: February 08, 2018, 09:26:43 AM »
Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

Offline bharat

  • Jr. Member
  • **
  • Posts: 375
Re: Add pictures next to the board
« Reply #46 on: February 12, 2018, 08:49:24 AM »
Thanks for the link, will check it out!