Advertisement:

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

Offline bharat

  • Jr. Member
  • **
  • Posts: 387
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: 387
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.

Online Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • SMF Hero
  • *
  • Posts: 1,628
  • 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.
Let go of all you think others want you to be and just be who you really are.
Don't let anyone get in the way of your dreams and who you want to be. Your life is only yours to live.

Offline bharat

  • Jr. Member
  • **
  • Posts: 387
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: 387
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.

Online Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • SMF Hero
  • *
  • Posts: 1,628
  • 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
Let go of all you think others want you to be and just be who you really are.
Don't let anyone get in the way of your dreams and who you want to be. Your life is only yours to live.

Offline bharat

  • Jr. Member
  • **
  • Posts: 387
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

Online Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • SMF Hero
  • *
  • Posts: 1,628
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #27 on: February 07, 2018, 04:13:33 AM »
Exactly...
Let go of all you think others want you to be and just be who you really are.
Don't let anyone get in the way of your dreams and who you want to be. Your life is only yours to live.

Offline bharat

  • Jr. Member
  • **
  • Posts: 387
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;
}

Online Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • SMF Hero
  • *
  • Posts: 1,628
  • 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.
Let go of all you think others want you to be and just be who you really are.
Don't let anyone get in the way of your dreams and who you want to be. Your life is only yours to live.

Offline bharat

  • Jr. Member
  • **
  • Posts: 387
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?

Online Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • SMF Hero
  • *
  • Posts: 1,628
  • 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.
Let go of all you think others want you to be and just be who you really are.
Don't let anyone get in the way of your dreams and who you want to be. Your life is only yours to live.

Offline bharat

  • Jr. Member
  • **
  • Posts: 387
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: 387
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

Online Gwenwyfar

  • Pirate Valkyrie Neko-chan
  • Lead Customizer
  • SMF Hero
  • *
  • Posts: 1,628
  • 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.
Let go of all you think others want you to be and just be who you really are.
Don't let anyone get in the way of your dreams and who you want to be. Your life is only yours to live.

Offline bharat

  • Jr. Member
  • **
  • Posts: 387
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: 387
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: 387
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: 387
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.