Page 1 of 1

Reversi Tutorial Css Issue

Posted: 03 September 2023, 20:50
by UweTulpenhügel
Hi all,

I am trying to follow the beginner tutorial for Reversi https://en.doc.boardgamearena.com/Tutorial_reversi

I added the board.jpg file to the img/ directory. I double-checked, it is called board.jpg, not Board.jpg and I am trying to reference it in the css file like this, as described in the tutorial:

Code: Select all

#board {
   width: 536px;
   height: 528px;
   background-image: url('img/board.jpg');
}
First issue I noticed is that the css information does not seem to apply when I inspect the element. I can see the board-<div> I inserted into the .tpl-file as described in the tutorial but none of the style information is set. To work around this for the moment, I tried to include a <style>-block in the .tpl-file. After refreshing, I see the style-block and see its effects on the <div> but the background still does not appear.

Indeed when I check the Inspector I see a 404 for the GET to https://studio.boardgamearena.com/1/img/board.jpg but when I check my game folder on the SFTP the file is most definitely there (See Files below).

Inspector
inspect.png
inspect.png (126.26 KiB) Viewed 506 times
SFTP
sftp.png
sftp.png (27.11 KiB) Viewed 506 times
Has anyone else experienced something similar and/or can point me towards the solution?

Any help would be greatly appreciated

Re: Reversi Tutorial Css Issue

Posted: 03 September 2023, 20:55
by RicardoRix
Any changes to css, it's worth doing a full browser refresh (Ctrl-F5) to see your changes.

As a side-note, you can also try and insert some of those styles directly using the browser dev tool.

Re: Reversi Tutorial Css Issue

Posted: 03 September 2023, 21:00
by UweTulpenhügel
Thank you so much! Doing that and removing my workaround <style>-tag fixed it for me. I had only tried normal F5 so far

Re: Reversi Tutorial Css Issue

Posted: 13 October 2023, 11:54
by linhtran190897
UweRosenberg wrote: 03 September 2023, 20:50
Indeed when I check the Inspector I see a 404 for the GET to https://studio.boardgamearena.com/1/img/board.jpg but when I check my game folder on the SFTP the file is most definitely there (See Files below).

Inspector
inspect.png

SFTP
sftp.png

Has anyone else experienced something similar and/or can point me towards the solution?

Any help would be greatly appreciated
Hey noob question, how do you check game folder on the SFTP? How and where do you access it?

Re: Reversi Tutorial Css Issue

Posted: 15 October 2023, 12:50
by MathCT
linhtran190897 wrote: 13 October 2023, 11:54
UweRosenberg wrote: 03 September 2023, 20:50
Indeed when I check the Inspector I see a 404 for the GET to https://studio.boardgamearena.com/1/img/board.jpg but when I check my game folder on the SFTP the file is most definitely there (See Files below).

Inspector
inspect.png

SFTP
sftp.png

Has anyone else experienced something similar and/or can point me towards the solution?

Any help would be greatly appreciated
Hey noob question, how do you check game folder on the SFTP? How and where do you access it?
I advise you to read or reread: https://studio.boardgamearena.com/doc/F ... BGA_Studio ;)

Re: Reversi Tutorial Css Issue

Posted: 02 November 2023, 10:32
by linhtran190897
I have read it carefully. If you want to advise something, state it clearly.
My problem is the image in img folder does not show on screen, although it has been uploaded by SFTP.
Error message: Failed to load resource: the server responded with a status of 404 ()
Any idea how to fix this?