CSS styling

[AirRandom]

I wrote this up today to help me identify unentered letters and to make click areas easier to hit and read in the word list. Feel free to use it and give me any feedback for tweaking, I've been using it the past few hours and I'm really liking the usability improvements. I use the Stylish plugin for applying the CSS to the site, it's pretty plug-and-play. Enjoy!

#content .wordboxvalue:empty,
#content .boxvalue:empty{
  background-color: rgba(255, 0, 0, .15);
}
#content .wordbox.selected .wordboxvalue:empty,
#content .wordbox.selected_main .wordboxvalue:empty,
#content .box.selected .boxvalue:empty,
#content .box.selected_main .boxvalue:empty {
  background-color: transparent;
}
#content .boxvalue {
  position: relative;
  top: -9px;
  padding-top: 9px;
}
#content .box {
  user-select: none;
}
#content .wordbox {
  height: 30px;
  width: 30px;
  margin-top: 12px;
  border: 1px solid #cbcbcb;
  user-select: none;
}
#content .wordboxvalue {
  height: 100%;
  width: 100%;
  font-size: 24px;
  line-height: 32px;
}
#content .wordboxnumber {
  width: 100%;
  margin-top: -10px;
}

[sewaneesue]

This is Greek to me, AirRandom. I am old in age and old-fashioned. It takes me many many seconds to solve the long Acrostic puzzles. Here is an example:

This Puzzle's Statistics Success Rate: 57.1% Average Time: 4711 seconds Record Time: 2470 seconds (ferndala) Your Time: 1418 seconds Performance: New Record!

I think this puzzle has the longest average time I have ever seen on Puzzle Baron Acrostics. The quote is by Anne Rice, the vampirist.

(I have to use my magnifying glass to see the emoticons!!!)

[AirRandom]

This should give you an idea of what the acrostic looks like with my styles I posted above. It makes it much easier to see what has been filled in and what has not, and increases the size of the letters in the words section.

Screenshot 2021-06-06 at 14-12-32 Acrostic Puzzles Solve Your Puzzle.png

[genevoise]

AirRandom,
I've tried out your new styling. I particularly like that you can easily pick out the sneaky last missing letter in a long quote. So far so good. I'll let you know what I think after a few more days of use.
Thanks.
Genevoise.

[AirRandom]

AirRandom,
I've tried out your new styling. I particularly like that you can easily pick out the sneaky last missing letter in a long quote. So far so good. I'll let you know what I think after a few more days of use.
Thanks.
Genevoise.

Cool, thanks Genevoise! Let me know what you think of the coloring as well, I tried to pick out a shade that was easy to notice but also easy on the eyes. If you find a better one, let me know, I'd love to use it as well.

[genevoise]

Well it's been over a week and still loving this styling. The only one gripe that I would have is that there is a lot more scrolling required as the answers are only 8 rather than 13 letters per line. However, this is more than made up for by the use of the pink shading.

Once again AirRandom, thanks!

I would recommend other players give it a shot.

[AirRandom]

Thanks again! The larger sizing was a conscious decision by me, I wanted better visibility and a larger click area since the PB keyboard navigation still requires a lot of mouse work. Ideally in the end I'll come up with a script that will replicate the NYT style navigation (highlighted square duplicates the corresponding answer to above the grid and author/source row is editable), but this was a much easier start for me. Glad you're enjoying!

[redpicker]

I like the styling, but due to an upgrade, I had to re-install it after a few days without it. In doing that, I was reminded that there is little instruction on how to get it to work. So, I thought I'd post a little write-up on how to get this to work with your machine.

First, you will need to install the "Stylish" plugin (or add-on, extension, or whatever your browser may call it). These are little programs that work with your internet browser and, in this case, allows for the boxes and colored spaces shown in the screen shots above. You will need to Google "Stylish" and your browser name. For example, I am using Firefox, so I Googled Stylish Firefox and one of the first results was Stylish - Add-ons for Firefox (en-US). If you use a different browser, I would expect a different site. I clicked on the link which brought me to a page that had an "ADD TO FIREFOX" button, so I clicked and installed the add-on.

Once installed, I noticed there was a little "S" in a box installed beside the address bar on my browser. I clicked on it and that brought up a window that said Themes, but also told me that I had no Themes installed. At the top right of that window, there were the familiar three dots that indicate menu choices. I clicked the dots and that allowed me to "Create a new style."

When I clicked on "Create A New Style" a new tab was created in my browser that had a section called "Add Style" that contained a box with "Enter a name" in it. I wrote "Acrostics" in that box. There was another section called "Sections" with a box in it called "Code 1" where I pasted the code I copied from the first post in this thread. Below the Code 1 box, there was a line that says "Applies to (?) Everything (Specify)" where the parentheses are indicating buttons. I clicked on the (Specify) button and it changed to a drop-down menu where the first choice was "URL". I selected the URL choice and typed "https://acrostics.puzzlebaron.com/play.php" into the box (that is the URL for the puzzle page). Then I clicked on the save button in the "Add Style" section below the box where I had entered "Acrostics". Now, whenever I play a puzzle, the board is modified as shown in the screenshots, above.

The code is somewhat cryptic, but easy enough to follow. I found the pink color a bit annoying, so I modified the third line of the code

background-color: rgba(255, 0, 0, .15);

I changed this to read

background-color: rgba(155, 50, 50, .15);

Which I figure would pull out 100 "units" of red from the shading and add 50 units each of green and blue. I found this tint easier on my eyes, so I clicked the save button and that is what I am using.

Thanks, AirRandom. Not only did I make a small improvement to my enjoyment of the Acrostics, but I learned a bit, too!

[AirRandom]

Awesome, glad you enjoy! Thanks for the writeup too!