Advertisement:

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

Offline bharat

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

  • Customizer
  • Sophist Member
  • *
  • Posts: 1,049
  • 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.

Offline bharat

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

  • Customizer
  • Sophist Member
  • *
  • Posts: 1,049
  • 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

Offline bharat

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

  • Customizer
  • Sophist Member
  • *
  • Posts: 1,049
  • Gender: Female
    • Gwenwyfar on GitHub
Re: Add pictures next to the board
« Reply #27 on: February 07, 2018, 04:13:33 AM »
Exactly...

Offline bharat

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

  • Customizer
  • Sophist Member
  • *
  • Posts: 1,049
  • 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.

Offline bharat

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

  • Customizer
  • Sophist Member
  • *
  • Posts: 1,049
  • 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.

Offline bharat

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

  • Customizer
  • Sophist Member
  • *
  • Posts: 1,049
  • 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.

Offline bharat

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