Personalsoft

Menu muito legal, com transparência e vários níveis

Tabelas CSS

Leiaute base para o leiaute da Personal Soft

Manipulação do logotipo (Gimp)

  • nova imagem transparente, com 600px de altura
  • colar logo, texto, etc…
  • newsprint
    • layer - select alpha chanel
    • layer - new blank
    • select - grow 5 pixels
    • select - fill in black
    • select - none
    • gaussian blur - 175
    • filter - distort - newsprint - cell size 40
    • layer - transparency - color (blank) to alpha
  • aura
    • selecionar layer com o logo
    • layer - select alpha chanel
    • layer - new transparent
    • select - grow 5 pixels
    • select - fill in black
    • select - none
/* HEADINGS */
/* HEADINGS WHITE COLOR WILL BE DEFINED IN ID CONTAINER-WRAP TO AVOID DISAPPEAR WHEN PRINTING */
 
h1, h2, h3, h4, h5, h6 {
  color: black;
}
 
h1 {
  font-size: 190%;
  font-weight: normal;
}
 
h2 {
  font-size: 160%;
  font-weight: normal;
}
 
h3 {
  font-size: 130%;
  font-weight: bold;
}
 
h4 {
  font-size: 115%;
  font-weight: normal;
}
 
h5 {
  font-size: 100%;
  font-weight: normal;
}
 
h6 {
  font-size: 85%;
  font-weight: normal;
}
 
/* PARAGRAPH */
 
p {
  padding-bottom: 0.5em;
}
 
/* IMAGE */
 
img {
}
 
/* QUOTE */
 
blockquote {
  background-color: white;
  border-width: 1px;
  border-style: dashed;
  border-color: red;
  color: orange;
  margin: 0em 3em;
  padding: 0em 1em;
}
 
/* LINK */
 
a {
  color: #ff3f1f;
  background-color: transparent;
}
 
a:hover {
  background-color: transparent;
  color: orange;
}
 
a.newpage {
  color: maroon;
}
 
/* BOLD */
 
strong {
  font-weight: normal;
  color: orange;
}
 
/* ITALIC */
 
em {
  color: white;
}
 
/* TABLE - UNFORTUNATELLY WIKIDOT TOC TABLE DOES NOT HAVE A CSS ID */
 
table {
  background-color: #181818;
  border-top: 1px dashed white;
  border-bottom: 1px dashed white;
  margin: 0;
  padding: 0;
  width: 100%;
}
 
#toc {
  color: orange;
}
 
#toc, #toc a, #toc-action-bar, #toc-action-bar a, #toc-list, #toc-list a {
  border: 0;
  background-color: inherit;
}
 
/* WIKIDOT TABLE */
 
table.wiki-content-table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: auto;
  text-align: left;
}
 
table.wiki-content-table tbody {
  padding: 0.8em 0.8em;
}
 
/* WIKIDOT TABLE - HEADER */
 
table.wiki-content-table th {
  background-color: orange;
  border-left: 0;
  border-right: 0;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  color: white;
  font-weight: normal;
  padding: inherit;
}
 
/* WIKIDOT TABLE - ROW */
 
table.wiki-content-table tr {
  background-color: #181818;
  padding: inherit;
}
 
/* WIKIDOT TABLE - CELL */
 
table.wiki-content-table td {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 1px solid white;
  padding: inherit;
}
 
/* WIKIDOT TABLE - ROW HOVER */
 
table.wiki-content-table tr:hover {
  background-color: #363636;
  color: white;
}
 
/* WIKIDOT TABLE - CELL HOVER */
 
table.wiki-content-table td:hover {
  background-color: #303030;
  color: orange;
}
 
/* CODE */
 
pre {
  color: black;
}
 
body.wait, body.wait * {
  cursor: wait;
}
 
form {
  margin: 0; padding: 0;
}
 
/* LAYOUT ELEMENTS */
 
body {
  background-color: black;
  background-image: url("/local--files/css:personalsoft/body_background.png");
}
 
#container-wrap-wrap {
  background-color: #262626;
  color: #9b9b9b;
  max-width: 1000px;
  margin: 1em auto;
}
 
#container-wrap {
}
 
#container-wrap h1, #container-wrap h2, #container-wrap h3, #container-wrap h4, #container-wrap h5, #container-wrap h6 {
  color: white;
}
 
#container-wrap h2 {
  color: orange;
}
 
#container-wrap h3 {
  color: gold;
}
 
#container-wrap h4 {
  color: yellow;
}
 
#container-wrap h5 {
  color: white;
}
 
#container-wrap h6 {
  color: white;
}
 
#container {
}
 
  #header {
    background-image: url("/local--files/css:personalsoft/header_background.png");
    background-repeat: repeat;
    height: 175px;
  }
 
    #header h1 {
      background-image: url("/local--files/logo/logo.png");
      background-repeat: no-repeat;
      background-position: center left;
      color: black;
      height: 175px;
    }
 
    #header h1 a {
      display: none;
    }
 
    #header h2 {
      display: none;
    }
 
    #top-bar {
      background-color: #262626;
      left: 0px;
      right: 0px;
      top: 100%;
      height: 50px;
      font-weight: bold;
    }
 
    #top-bar a {
      background-color: inherit;
      color: white;
      padding: 0px 2em;
    }
 
    /* FIRST LEVEL */
 
    #top-bar ul {
      height: 50px;
      line-height: 50px;
      vertical-align: center;
    }
 
    /* FIRST LEVEL - ITEM */
 
    #top-bar ul li {
      margin: 0px;
      display: inline-block;
    }
 
    /* FIRST LEVEL - ITEM - LINK */
 
    #top-bar ul li a {
    }
 
    /* FIRST LEVEL - ITEM - HOVER - RIGHT IMAGE */
 
    #top-bar ul li a:hover, #top-bar ul .current {
      background-color: black;
    }
 
    /* FIRST LEVEL - ITEM - HOVER - LEFT IMAGE */
 
    #top-bar ul li a:hover span, #top-bar ul .current span {
      background-color: black;
    }
 
    /* SECOND LEVEL */
 
    #top-bar ul ul {
      margin: 0;
      padding: 0;
      width: 15em;
      height: auto;
      line-height: 30px;
    }
 
    #top-bar ul li ul {
      background-color: black;
      border: 2px solid maroon;
      opacity: 0.85;
      margin: 0;
      width: 15em;
    }
 
    /* SECOND LEVEL - ITEM */
 
    #top-bar ul li ul li {
      margin: 0;
      padding: 0em 0.5em;
      width: 13em;
    }
 
    /* SECOND LEVEL - ITEM - LINK */
 
    #top-bar ul li ul li a {
      background-color: inherit;
      margin: inherit;
      padding: inherit;
      width: inherit;
    }
 
    #top-bar ul li ul li a:hover {
      color: red;
      opacity: 1;
      margin: inherit;
      padding: inherit;
      width: inherit;
    }
 
    #login-status {
    }
 
    #search-top-box {
    }
 
    #header-extra-div-1 {
      display: none;
    }
 
    #header-extra-div-2 {
      display: none;
    }
 
    #header-extra-div-3 {
      display: none;
    }
 
  #content-wrap {
    float: left;
    background-image: url("/local--files/css:personalsoft/content_top.png");
    background-repeat: repeat-x;
    margin-top: 50px;
  }
 
    #side-bar {
      float: left;
      width: 23%;
      margin: 0px 0px;
      padding: 2% 2%;
    }
 
    #main-content {
      float: left;
      width: 69%;
      margin: 0px 0px;
      padding: 2% 2%;
    }
 
    #main-content .page-watch-options {
    }
 
      #action-area-top {
      }
 
      #page-title {
        color: orange;
        margin: 0px 0px;
        padding: 0% 0%;
      }
 
      #breadcrumbs {
      }
 
      #page-content {
      }
 
      /* REVISION DATA */
 
      #page-info {
        display: none;
      }
 
      /* EDIT BUTTONS */
 
      #page-options-bottom.page-options-bottom {
      }
 
      /* EDIT BUTTONS +OPTIONS */
 
      #page-options-bottom-2.page-options-bottom {
      }
 
      #action-area {
      }
 
  #footer, #footer a {
  }
 
  #license-area {
    display: none;
  }
 
#extra-div-1 {
  display: none;
}
 
#extra-div-2 {
  display: none;
}
 
#extra-div-3 {
  display: none;
}
 
#extra-div-4 {
  display: none;
}
 
#extra-div-5 {
  display: none;
}
 
#extra-div-6 {
  display: none;
}
 
/* FORUM */
 
.forum-start-box .forum-group .head .title {
  font-size: 150%;
  padding: 0.5em;
}