Eloquence Theme Help

[holly2000]

So I've been struggling to add graphics to the Eloquence theme in the way that I want them. I've seen it done on other sites, but I can't figure it out  

So on Eloquence it only has an option for "default board image", but I would like to have a different image for each board. That problem was sort of solved by doing [ img]image url[/img] on each individual board description. However, I really only wanted an image in the bottom box, so that I could put a description in the top box of the board.

What I have: 



So basically what I want is: 


Does anybody know how to do this? I saw it done on a Star Wars RP site, so I know it's possible:


Thanks in advance!
Savannah

[Retread]

Feb 16, 2020 15:22:50 GMT -8 holly2000 said:

I would like to have a different image for each board.

To accomplish this, you'll need to create a unique class designation for each board. Then in your Style Sheet you'll add a separate line to assign a different image as being the background-image for each board.


From your Admin panel, navigate:
Admin Home> Themes> Layout Templates
and make sure the correct theme (Eloquence) is selected in the dropdown to the right of Current Theme

Next, click on Board, then click on the Board List tab.
On line 53, you should find this:
<div class="picture">
Change that to this:
<div class="picture $[board.name]">
Edit: use this instead.
<div class="picture $[board.name] boardnumber-$[board.id]">

Then click the Save Changes button at the bottom of the page or the Save Theme button near the top.

---

From your Admin panel, navigate:
Admin Home> Themes> Advanced Styles & CSS
then click on the Style Sheet tab.

At the bottom of the Style Sheet add this line as many times as you have boards:
.board-list .picture.BOARDNAME {background-image: url(IMAGEURL);}
Edit: use this instead:
.board-list .picture.boardnumber-NUMBER {background-image: url(IMAGEURL);}
On each of those lines, replace BOARDNAME with the Name of the board
and replace IMAGEURL with the url of the image you wish to use for that particular board.
On each of those lines, replace NUMBER with the ID number of the board
and replace IMAGEURL with the url of the image you wish to use for that particular board.

NOTE:
The Name of the board might not be the same as the Display Name of the board. If there is any doubt, from your admin panel, navigate:
Admin Home> Structure> Categories & Boards
There you will see a list of names of your boards.

Use the same name and whatever capitalization (or lack of it) you see there to replace the BOARDNAME.

Also, if there are any spaces between the words in the board name, replace the space with a period.

For instance, for the board name Moderator Discussion you would use Moderator.Discussion to replace BOARDNAME.

To find the ID number of a board, click on the board, then look at the address bar in your browser.

For instance, if you click on the Themes board in the Support Forum, you'll see this in the address bar:https://support.proboards.com/board/82/themes
In this case, 82 is the ID number of the board.



Please let me know how that works out for you.

[elli]

For this theme, I recall that those images are changed via the Board Description Images plugin.

EDIT: Just checked the thread for this theme on Adoxograhy and can confirm that this is how Punki recommends editing the images. Retread's solution is probably good if you don't want to use the plugin.

[Retread]

Feb 17, 2020 11:59:29 GMT -8 elli said:

For this theme, I recall that those images are changed via the Board Description Images plugin.

EDIT: Just checked the thread for this theme on Adoxograhy and can confirm that this is how Punki recommends editing the images. Retread's solution is probably good if you don't want to use the plugin.

Thanks for weighing in, elli.

I didn't bother looking for a plugin because I wasn't sure it would work with this particular theme. Since you have confirmation that it works, that might be an easier way.

Also I wasn't thrilled with the way $[board.name] could create individual class names, some of which might happen to coincide with other names that could be in use. So I modified the method a bit, using $[board.id] instead.