Page 1 of 1

forum-image on forumlist_body.html

Posted: Sat Jan 19, 2019 3:12 pm
by TheDani
How can I do it if forum-image first is background-size: contain; and the second is background-size: cover; ?

Example:

Code: Select all

<!-- IF not forumrow.S_IS_CAT -->
   ...
   <span class="forum-image 1"> <!-- next time 2, 3 ... until 10.
       Or .column1, .column2 until .column10... -->
   ...
<!-- ENDIF -->



stylesheet.css

.1, .2, .4, .5, .9 {
  background-size: contain;
}

.3, .6, .7, .8 {
  background-size: cover;
}

Re: forum-image on forumlist_body.html

Posted: Sat Jan 19, 2019 6:07 pm
by Mannix_
I would use forum id to target the image for example

Code: Select all

.forum-1  .forum-image {
background-size: contain;
}
forum id is asaigned automatically you can check it with inspect element function of your browser.

Re: forum-image on forumlist_body.html

Posted: Sat Jan 19, 2019 9:48 pm
by TheDani
Can you show me how?

forumlist_body.html

Code: Select all

<!-- IF not forumrow.S_IS_CAT -->
   ...
   <span class="forum-image forum-1"> <!-- next time forum-2, forum-3, forum-4 until forum-10  -->
   ...
<!-- ENDIF -->

stylesheet.css

Code: Select all

.forum-1  .forum-image {
  background-size: contain;
}

.forum-2  .forum-image {
  background-size: cover;
}

.forum-3  .forum-image {
  background-size: contain;
}

...
But still is .forum-1, .forum-1, .forum-1 etc. NOT .forum-1, .forum-2, .forum-3 etc.

Re: forum-image on forumlist_body.html

Posted: Sun Jan 20, 2019 7:21 am
by Mannix_
TheDani wrote:
Sat Jan 19, 2019 9:48 pm
Can you show me how?
You don't need make any changes in the html file. Just look up the forum id with inpect element function of your browser and then use that id with forum-image class to target specific image. Jut like i showed you earlier.

Re: forum-image on forumlist_body.html

Posted: Sun Jan 20, 2019 8:03 pm
by TheDani
1.forum-image-stylesheet.jpg
2.forum-image.jpg
Okay, HTML is untouched, but CSS is touched with

Code: Select all

.forum-1  .forum-image {
background-size: contain;
}

.forum-2  .forum-image {
background-size: cover;
}

Just look up the forum id with inpect element function of your browser and then use that id with forum-image class to target specific image. " I don't know what you mean, I'm a newbie :? See the two pictures.

Probably not, but Server settings -> Script path is "/forum", if that has to do it.

Re: forum-image on forumlist_body.html

Posted: Mon Jan 21, 2019 8:30 am
by Mannix_
OK, my bad I got fooled by the demo page for styles. I used latte style to help you and that style adds id next to row class (lucky for us). So to make it work you gonna have to edit the forumlist_body.html file after all.
Open it find

Code: Select all

<li class="row">
and add after row

Code: Select all

forum-{forumrow.FORUM_ID}
so it looks like this

Code: Select all

<li class="row forum-{forumrow.FORUM_ID}">
and you should get something like this
after.png
then use whatever id is assigned to the forum that has image and use css from earlier to target it. For example in my case it's forum-6 so css is as follows:

Code: Select all

.forum-6 .forum-image {
background-size: contain;
}
if this won't work try

Code: Select all

.forum-6 .forum-image img {
background-size: contain;
}
EDIT
The background-size property won't work you need to use width to change the size of the image.

Re: forum-image on forumlist_body.html

Posted: Mon Jan 21, 2019 4:20 pm
by TheDani
Thanks ;)