The Anime and Manga "Unofficial" Design! [WIP]

Question

In the chat room a while back we discussed possibly of jump starting the whole design thing ourselves by creating a userscript, one which we can then alter to have different themes so that way those of us who wanted a Naruto or Dragoball Z can still get it without people getting upset. well i had some time to fiddle around doing it myself using Stylebot on Chrome basing it on Eric's Designs (this one)

this is very much a work in progress and at this stage i'm just trying to emulate Eric's design into something that's complete that we can mess with later. once that's done we can decided discuss what changes will be made for us to promote this as the site's main theme and make a separate Meta for where we post our template/base CSS and all our different themes.

Since the end result is an Unofficial Theme and not endorsed by Stack Exchange i can not grantee if this will still work/be supported if/when we do get our proper design and remember that the script only changes the site's look on you're own machine, everyone else will either see the current design or whatever design they might be using with their own user script so with that said

TO THE STACK EXCHANGE DESIGN TEAM: we do still want to see an official design

---

Pattern: *anime.stackexchange.com

CSS:

@font-face {
  font-family: AnimeAce;
  src: url(https://allfont.net/allfont.css?fonts=anime-ace-20-bb);
}

.container {
    background: linear-gradient(to bottom, #434a53 0%,#bec4cd 100%);
    box-shadow: none;
}

#header {
    background-image: url(https://i.sstatic.net/gH7dI.jpg);
    height: 120px;
    padding: 0;
    width: 1090px;
}

#hlogo {
    width: 400px;
    height: 90px;
    margin-top: -15px;
    background-image: url(https://i.sstatic.net/Whinc.png);
    background-size: 207px 90px;
    background-repeat: no-repeat;
    background-position: 10px;
}

#hlogo a {
    display: none;
}

#hmenus {
    width: 100%;
    top: 95px;
    right: 0;
}

.askquestion {
    float: right;
    padding-right: 15px;
}

.mainnavs {
    padding-left: 15px;
}

.nav ul li {
    margin-left: 0px;
}

.nav ul li a {
    background-color: #FFFFFF;
    opacity: 1;
    text-transform: uppercase;
    padding: 5px;
    color: #A9B2BD;
}

h1, h2, h3, h4 {
    font-family: 'AnimeAce', arial;
}

h4 {
    font-size: 20pt;
}

.subheader h1 {
    font-size: 25px;
    line-height: 1.5;
    font-style: italic;
}

.answered-accepted {
    background-color: greenyellow;
}

.post-tag {
    border-radius: 0;
    background-color: #E5D0A2;
    border-top: 1px solid#FFEEB8;
    border-left: 2px solid #956E47;
    border-right: 2px solid #956E47;
}

Images:

• Header -
• Logo -
  • black background because of imgur.com link using m for small image. hyperlink to proper image with transparent background

---

Left = My current Window | Right = Full Page Screen capture (links to full size)

---

Todo:

• Meta Site
• artistic brush stroke for accepted answers (probably will be image. currently using another colour as place holder)
• Badges
• Testing on other pages on the site
  • Help Center
  • Question/Answer Posts
  • Ask a Question
  • User Profile Pages
  • Tag Wikis

Bugs/Errors:

• the Anime Ace font isn't provided over https and gets block (see @font-face), possibly need font files hosted where there is https
• Tags don't look exactly like Eric's, think it might because Eric implied using an image, i did pure CSS
• head is smaller than Eric's because I used the original size of the header (1090px x 120px). Eric's seems taller. also don't have the The Eccentric Family image he used so cropped my own 1090px x 120px, will need to make/get bigger image
• gradient stops at footer. not sure of what we want to do with it

---

i will try and keep this Meta question updated and people are more than welcome to work on it themselves and post the changes but remember, this is a work in progress so don't get too hung up on colours/images used since, as i said above, the end result will be a basis that we can make multiple themes for