saeidscorp | SideFX

UI/UX: Share your screenshots & tips & tricks & ideas Dec. 3, 2021, 11:07 a.m.

Improving upon xilofoton's help browser theming, I made this little snippet (according to color theme of AXSC Dark v1.0) that you can put AT THE END of your installation's CSS file to get both the colors and the scrollbars themed appropriately.

/* My Additions */

body {
  line-height: 1.5em;
  margin: 0;
  padding: 0;
  color: #bbb;
  background-color: #1C1C1C;
}

.brand img {
    filter: brightness(0.85);
}

li.here {
  background-color: #172626 !important;
  position: relative;
  margin-right: 12px;
}

li.here::after {
  border: 0 solid #646667 !important;
}

#toc > #toc-body {
    opacity: 0.66;
}

h2.section {
	border-bottom: 1px solid rgba(256,256,256, 0.3);
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #AAA;
}

.search {
    margin: 0.1rem;
    padding: 0.2rem 0.5rem 0.2rem 1.75rem;
    font-size: 1rem;
    background-color: rgba(30,30,30, 0.8);
    border-radius: 1rem;
    border: 1px solid #999;
    outline: none;
    width: 20em;
    color: #AAA;
}

.search:focus {
	background-color: rgba(30,30,30, 0.8);
}

.metatable {
    background-color: #181818;
    border-radius: 8px;
    border-style: none;
    width: 100%;
    margin: 1em 0 1em 0;
}

input.title-filter {
    background-color: #111;
    border: none;
	color: #AAA;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
}

select.tags {
    background: #111;
    border: none;
    color: #AAA;
    padding: 5px;
    margin: 2px;
}

::-webkit-scrollbar {
  width: 12px;
  height: 9px;
}

::-webkit-scrollbar-track-piece {
  background-color: transparent;
}

body::-webkit-scrollbar-track-piece {
  background-color: #1c1c1e;
}

::-webkit-scrollbar-track-piece:no-button {}

::-webkit-scrollbar-thumb {
  background-color: #46464a;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #8a8a91;
}

::-webkit-scrollbar-thumb:active {
  background-color: #46464a;
}

Here's a screenshot:

I should also note that in my case, the hpage.cssfile wasn't doing anything because it somehow was not sourced in the HTML file upon rendering. So, I had to change this file instead:

C:\Program Files\Side Effects Software\Houdini 19.0.383\houdini\python3.7libs\bookish\static\scss\page.css
Therefore, if you also find that hpage.cssisn't affecting anything, you should try the above file (still, you need to put the snippet at the end of that file).

Moreover, even with page.cssI couldn't see any change in the output. Somehow the template rendering engine caches the results. I managed to find the culprit:

C:\Users\saeid\AppData\Local\houdini
Close Houdini, remove that whole directory (which only contains web caches), make your changes to the css file, then restart Houdini.

Hope this helps users of the more recent Houdini versions (and anyone else wanting a slightly more complete dark theme).

Saeid Akbari

About Me

Connect

Houdini Skills

Availability

Recent Forum Posts

UI/UX: Share your screenshots & tips & tricks & ideas Dec. 3, 2021, 11:07 a.m.