Fixing Actors Access’ Incredibly Bad Website

As someone who is both an actor and tech nerd — meaning I know HTML and CSS pretty well — I cannot stand how bad the Actors Access website is. It’s poorly designed, poorly structured, and awful to use. I hate using it. So, I did what I always do in situations like this… I made it better.

As you can see from the image above, it’s significantly better. It’s still not amazing, but it functions much better. There are also some small changes to the breakdown pages. It’s not awesome, but I’ll keep tweaking it as best as I can. Since the website’s HTML structure and CSS markup is really bad and inconsistent, I have not yet been able to differentiate between the page types to give them custom coding. This is a work in progress.

In the meantime, the code I use to alter the layout of Actors Access is posted below.

I use Chrome for my browser and a Chrome Extension called User CSS. The CSS I wrote isn’t pretty but the results are infinitely better.

1. Install the User CSS Chrome Extension

2. Copy all of the code below.

3. Sign in to the Actors Access website,

4. Click the User CSS icon and paste the code.

That’s it.

Enjoy!

---

body, .text {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 1.2em;
}
div, p, 
#hdr-container, 
#breakdown_form
{
  font-size: 1em !important;
}
#breadcrumb
{
  font-size: 0.9em !important;
}
form, div#hdr-container,
div.navbar, div.mainContent
{
  width: 100% !important;
}
div.navbar {
  padding: 1em !important;
}
div.aa-projects-rowcontainer {
  float: none !important;
  margin: 0 auto;
  padding: 1em;
  width: 100% !important;
}
table {
  padding: 1em;
  width: 100% !important;
}
tr, td {
  font-size: 0.9em !important;
}
td.bd_date {
  white-space: nowrap;
}
td.bd_title a {
  font-weight: bold;
}
table.bd_list th,
table.bd_list td {
  padding: 0.6em;
  text-align: left !important;
}
table.bd_list tr:nth-child(even) {
  background-color: #eee;
}
div#hdr-container {
  padding: 1em 0;
}
h1#aa-logo-header, 
ul#greeting {
  padding: 0.5em !important;
}
form {
  font-size: 1em !important;
}
div.navbar {
  padding: 0.5em
}
ul#greeting, ul.top-menu {
  padding-right: 2em !important;
}
div.container {
  width: 100%;
  padding: 0;
  margin: 0;
}
div#mainContent {
  width: auto;
  margin: 0 auto;
}
td.bd_date div br {
  display: inline;
  content: " ";
  padding: 0 0.4em;
}
table.text td, table.text td p, div.role_fit_for_me {
  font-size: 15px !important;
  line-height: 1.5em !important;
}
#mainContent > table:nth-child(6) > tbody > tr:nth-child(1) > td:nth-child(1) > p {
  background-color: #000;
  color: #fff;
  font-weight: bold;
  font-size: 1.4em !important;
  padding: 1em;
}
p.footer_nav {
  padding: 1em !important;
}