forum-image on forumlist_body.html

Need some custom code changes to the phpBB core simple enough that you feel doesn't require an extension? Then post your request here so that community members can provide some assistance.

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

NOTE: NO OFFICIAL SUPPORT IS PROVIDED IN THIS SUB-FORUM
Post Reply
TheDani
Registered User
Posts: 356
Joined: Tue Apr 10, 2012 12:48 pm

forum-image on forumlist_body.html

Post 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;
}
User avatar
Mannix_
Registered User
Posts: 926
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: forum-image on forumlist_body.html

Post 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.
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.3.x etc. contact me here or here.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
TheDani
Registered User
Posts: 356
Joined: Tue Apr 10, 2012 12:48 pm

Re: forum-image on forumlist_body.html

Post 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.
User avatar
Mannix_
Registered User
Posts: 926
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: forum-image on forumlist_body.html

Post 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.
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.3.x etc. contact me here or here.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
TheDani
Registered User
Posts: 356
Joined: Tue Apr 10, 2012 12:48 pm

Re: forum-image on forumlist_body.html

Post 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.
User avatar
Mannix_
Registered User
Posts: 926
Joined: Sun Oct 25, 2015 2:56 pm
Name: Matt
Contact:

Re: forum-image on forumlist_body.html

Post 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.
-=-=-=-=-=-=-=-=-=-=-=-=-My Styles-=-=-=-=-=-=-=-=-=-=-=-=-
HexagonHexagonRebornCleanSilverProject Durango
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

Need help with styling or want me to port a style to 3.3.x etc. contact me here or here.
New version of phpBB has been released? My styles aren't validated for it yet? Check my page for the latest downloads!
TheDani
Registered User
Posts: 356
Joined: Tue Apr 10, 2012 12:48 pm

Re: forum-image on forumlist_body.html

Post by TheDani »

Thanks ;)
Post Reply

Return to “phpBB Custom Coding”