Advertisement:

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

Offline bharat

  • Full Member
  • ***
  • Posts: 407
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

  • Full Member
  • ***
  • Posts: 407
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
  • SMF Hero
  • *
  • Posts: 1,968
  • 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.
If over the rainbow there is meant to be a pot of gold, over a double rainbow is there a huge pot of candy?

Beware: Potato monster ahead. He bites.                                                                                                                                                         
                                                                                                                                 

Offline bharat

  • Full Member
  • ***
  • Posts: 407
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

  • Full Member
  • ***
  • Posts: 407
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
  • SMF Hero
  • *
  • Posts: 1,968
  • 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
If over the rainbow there is meant to be a pot of gold, over a double rainbow is there a huge pot of candy?

Beware: Potato monster ahead. He bites.                                                                                                                                                         
                                                                                                                                 

Offline bharat

  • Full Member
  • ***
  • Posts: 407
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
  • SMF Hero
  • *
  • Posts: 1,968
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #27 on: February 07, 2018, 04:13:33 AM »
Exactly...
If over the rainbow there is meant to be a pot of gold, over a double rainbow is there a huge pot of candy?

Beware: Potato monster ahead. He bites.                                                                                                                                                         
                                                                                                                                 

Offline bharat

  • Full Member
  • ***
  • Posts: 407
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
  • SMF Hero
  • *
  • Posts: 1,968
  • 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.
If over the rainbow there is meant to be a pot of gold, over a double rainbow is there a huge pot of candy?

Beware: Potato monster ahead. He bites.                                                                                                                                                         
                                                                                                                                 

Offline bharat

  • Full Member
  • ***
  • Posts: 407
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
  • SMF Hero
  • *
  • Posts: 1,968
  • 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.
If over the rainbow there is meant to be a pot of gold, over a double rainbow is there a huge pot of candy?

Beware: Potato monster ahead. He bites.                                                                                                                                                         
                                                                                                                                 

Offline bharat

  • Full Member
  • ***
  • Posts: 407
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

  • Full Member
  • ***
  • Posts: 407
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
  • SMF Hero
  • *
  • Posts: 1,968
  • 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.
If over the rainbow there is meant to be a pot of gold, over a double rainbow is there a huge pot of candy?

Beware: Potato monster ahead. He bites.                                                                                                                                                         
                                                                                                                                 

Offline bharat

  • Full Member
  • ***
  • Posts: 407
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

  • Full Member
  • ***
  • Posts: 407
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

  • Full Member
  • ***
  • Posts: 407
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

  • Full Member
  • ***
  • Posts: 407
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.