?

Log in

No account? Create an account
Indy IV A
Posted on Monday 1 January 2001 at 8:54 am

Hogan's Heroes Steel LJ Layout - Instructions


Tags: ,
For details and preview images of this layout, see this post.

  1. Select which of the two layouts you would like to use and save the images for that layout to a photo hosting site. If you don't know how to do this, leave a comment and I'll explain.
    1. Steel Minimal Images: Background, Header, Separator

    2. Steel Wire Images: Background, Header, Wire

  2. Go to the LJ Customization Wizard.
    1. Edit Titles: This can be whatever you want it to be.

    2. Select a New Theme: Search for "Flexible Squares" and click "Apply Theme" on the first result.

    3. Choose a Page Setup: Click "Apply Theme" under "2 Column (Sidebar on Left)." If you have ads, I tested this on Horizontal Placement but it might work with others.

    4. Click "Customize Selected Theme."

  3. You are on the "Display" tab of the "Customize Your Theme" page. You can set whatever values you want for anything on this page. A few things to keep in mind:
    1. Under "Basic Options," "Page Alignment" doesn't matter. We will override whatever you set here with CSS later.

    2. Under "Additional Options," we will override everything set here with CSS with one slight exception: the user pic position for each entry. We will override the actual userpic position; however, the value you set here will determine way comments indent if you use the customized entry page. I strongly recommend you set this to "left."

    3. Be sure to click "Save Changes" before moving to another tab. This also applies to steps four to eight.

  4. On the left side of the "Customize Your Theme" page, skip the "Style," tab and select "Text." You can put whatever text you want on this page. For the preview, I changed "Recent Entries" to "Daily Reports," "Friends" to "Roll Call," "User Information" to "Prisoner's File," "Archive" to "Camp Records," and did not change anything else. Feel free to change whatever you want and be as creative or not as you'd like. You can change any of this as often as you'd like.

  5. On the left side of the "Customize Your Theme" page, select "Sidebar." You can do whatever you want with this page as well. Select the elements and text you'd like in your sidebar and the order of the elements. You can change any of this as often as you'd like. Don't worry about the sidebar width as that will be overridden by the CSS.

  6. On the left side of the "Customize Your Theme" page, select "Links List." Do whatever you want with this one as well. You can change any of this as often as you'd like.

  7. On the left side of the "Customize Your Theme" page, select "Custom CSS."
    1. Set "Use Layout's Stylesheet(s)" to "No." (VERY IMPORTANT!!)

    2. Ignore the next three questions.

    3. Select and copy all the text in the appropriate scroll box below. Paste that text in the large "Custom Stylesheet" text box.

      Minimal CSS:
      /* ----- Hogan's Heroes Steel Minimalist ----- */
      /* --- Flexi Squares Layout by BrattyJedi --- */
      /* ----- http://bratty-jedi.livejournal.com/2001/01/01/ ----- */
      
      
      
      /* ----- Main Layout ----- */
      /* ----- Main Layout ----- */
      /* ----- Main Layout ----- */
      
      
      body {
         margin: 0px;
         padding: 10px auto;
         font-family: Trebuchet MS, Helvetica, sans-serif;
         font-size: 13px;
         text-align: left;
         color: #999999;
         background: url(HTTP://BACKGROUND) repeat center scroll #000000;
         }
      #content-outer {
         width: 800px;
         padding: 10px;
         margin: 0px auto;
         background: #222222;
         }
      #content {
         background: #808080;
         color: #111111;
         margin: 0px;
         min-height: 1500px;
         }
      #header {
         border-top: 1px solid #222222;
         margin: 0px auto 10px auto;
         padding: 0px;
         text-align: center;
         height: 400px;
         width: 800px;
         background: url(HTTP://HEADER) center top no-repeat transparent;
         overflow: hidden;
         }
      #sidebar {
         float: left;
         width: 165px;
         margin-left: 10px;
         background: transparent;
         overflow: hidden;
         text-align: center;
         border: none;
         }
      #maincontent {
         margin-left: 190px;
         margin-right: 5px;
         background: transparent;
         }
      #footer {
         margin: -15px 5px 0px 190px;
         list-style: none;
         text-align: center;
         text-transform: capitalize;
         line-height: 175%;
         font-size: 14px;
         color: #111111;
         }
      
      
      
      /* ----- Fonts ----- */
      /* ----- Fonts ----- */
      /* ----- Fonts ----- */
      
      a, a:link, a:visited, a:active {
         color: #800000;
         text-decoration: none;
         font-weight: bold;
         }
      a:hover {
         color: #800000;
         text-decoration: underline;
         }
      
      .ljuser {
         text-transform: capitalize;
         }
      
      blockquote, q {
         display: block;
         padding: 10px;
         margin: 5px 15px 5px 15px;
         border: double 5px #444444;
         }
      .entry ul, .entry ol {
         border-left: 1px dotted #444444;
         border-bottom: 1px dotted #444444;
         padding: 5px 5px 5px 30px;
         margin: 10px 10px 10px 10px;
         }
      
       dl {
         padding: 5px 5px 5px 10px;
         margin: 10px 10px 10px 10px;
         }
      
      dt {
         margin: 0px 10px 0px 0px;
         padding: 0px;
         line-height: 200%;
         font-size: 15px;
         font-weight: bold;
         }
      
      dd {
         margin-left: 25px;
         line-height: 150%;
         }
      
      code {
         font-family: monospace;
         border: 1px dotted #444444;
         display: block;
         padding: 10px;
         }
      
      kbd, pre, tt {
         font-family: monospace;
         }
      
      textarea, select {
         border: 0px solid #444444;
         background: #c0c0c0;
         color: #111111;
         }
      
      input {
         border: 0px solid #444444;
         background: #c0c0c0;
         color: #111111;
         padding: 3px;
         }
      
      #subject {
         border: 0px solid #444444 !important;
         background: #c0c0c0 !important;
         color: #111111 !important;
         }
      
      #qrform , #qrform table {
         border: 0px solid #444444 !important;
         background: #444444 !important;
         color: #999999 !important;
         width: 100% !important;
         margin: 10px 0px 10px 0px;
         }
      #qrform a, #qrform a:link, #qrform a:visited, #qrform a:active {
         color: #c00000;
         text-decoration: none;
         font-weight: bold;
         }
      #qrform a:hover {
         color: #c00000;
         text-decoration: underline;
         }
      #postform {
         border: 0px solid #444444 !important;
         background: #444444 !important;
         color: #999999 !important;
         width: 100% !important;
         margin: 25px 0px;
         }
      
      #commenttext {
         }
      
      
      
      
      /* ----- Header ----- */
      /* ----- Header ----- */
      /* ----- Header ----- */
      
      .title {
         margin: -388px 0px 10px 200px;
         font-size: 20px;
         font-weight: bold;
         line-height: 102%;
         }
      .subtitle {
         margin-left: 200px;
         font-size: 15px;
         font-weight: bold;
         line-height: 102%;
         }
      ul.navheader {
         list-style-type: none;
         margin-top: 367px;
         }
      ul.navheader li {
         display: inline;
         margin: 0px 25px 0px 25px;
         font-size: 18px;
         font-weight: bold;
         }
      ul.navheader li.view {
         display: inline;
         margin: 0px 25px 0px 25px;
         font-size: 18px;
         font-weight: bold;
         text-decoration: none;
         font-weight: bold;
         padding: 0px 0px 0px 3px;
         line-height: 150%;
         background: #222222;
         color: #999999;
         }
      ul.navheader li a, ul.navheader li a:link, ul.navheader li a:visited, ul.navheader li a:active {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #444444;
         color: #999999;
         }
      ul.navheader li a:hover {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #888888;
         color: #444444;
         }
      
      
      
      /* ----- Sidebar ----- */
      /* ----- Sidebar ----- */
      /* ----- Sidebar ----- */
      
      .sbarlist {
         margin-left: 0px;
         padding-left: 0px;
         }
      
      .sbartitle {
         border: 0px;
         background: #444444;
         color: #999999;
         padding: 3px;
         margin: 0px;
         text-weight: bold;
         font-size: 14px;
         font-weight: bold;
         list-style: none;
         }
      
      li.sbartitle a, li.sbartitle a:link, li.sbartitle a:visited, li.sbartitle a:active {
         color: #999999;
         font-weight: bold !important;
         font-size: 14px;
         }
      
      .sbarcontent li.sbartitle {
         margin: 5px 15px 5px 15px;
         padding: 3px;
         font-size: 13px;
         }
      
      .sbarbody {
         background: #808080;
         margin: 0px 0px 0px 0px;
         padding: 0px;
         border: solid #444444;
         border-width: 0px 2px 2px 2px;
         }
      
      .sbarbody2 {
         background: #808080;
         margin: -10px 0px 0px 0px;
         padding: 0px 3px 7px 3px;
         border: solid #444444;
         border-width: 0px 2px 2px 2px;
         text-align: left;
         }
      
      .defaultuserpic {
         margin: 0px 0px 0px 0px;
         }
      
      .defaultuserpic img {
         padding: 5px;
         background: transparent;
         border: 2px solid #444444;
         }
      
      table.calendar {
         margin-right: auto;
         margin-left: auto;
         }
      
      .sbarcalendar {
         text-align: center;
         }
      
      .sbarcalendarposts {
         text-align: center;
         }
      .sbarcalendarposts a, .sbarcalendarposts a:link, .sbarcalendarposts a:visited, .sbarcalendarposts a:active {
         color: #111111;
         font-weight: normal;
         border: solid 1px #999999;
         padding: 0px 4px;
         }
      .sbarcalendarposts a:hover {
         background: #444444;
         color: #808080;
         border: solid 1px #999999;
         font-weight: normal;
         padding: 0px 4px;
         text-decoration: none;
         }
      li.sbaritem {
         list-style: none;
         text-align: left;
         padding: 2px 5px 2px 25px;
         text-indent: -10px;
         }
      .tagcloud {
         list-style: none;
         text-align: left;
         padding: 2px 5px 2px 25px;
         text-indent: -10px;
         }
      
      
      
      
      /* ----- Entry ----- */
      /* ----- Entry ----- */
      /* ----- Entry ----- */
      
      .subcontent {
         background: #808080;
         margin: 0px;
         padding: 0px;
         border: 0px solid #444444;
         }
      
      .userpic, .userpicfriends {
         float: right;
         border: solid 2px #444444;
         margin: 5px;
         padding: 5px;
         text-align: center;
         line-height: 150%;
         background: #808080 !important;
         color: #111111 !important;
         position: relative;
         }
      .userpicfriends a font {
         color: #111111 !important;
         }
      .userpicfriends a {
         color: #111111 !important;
         }
      .userpic img, .userpicfriends img {
         }
      .datesubject {
         color: #111111;
         margin: 0px 0px 10px 0px;
         padding: 0px;
         }
      .subject {
         padding: 0px;
         font-size: 18px;
         font-weight: bold;
         }
      .subject a, .subject a:link, .subject a:visited, .subject a:active .subject a:hover {
         color: #111111;
         font-weight: bold;
         }
      .date {
         font-size: 12px;
         color: #222222;
         }
      .entry_text {
         padding: 0px;
         min-height: 120px;
         }
      .ljtags {
         font-weight: bold;
         margin: 10px 0px 0px 0px;
         }
      .clear {
         display: none;
         }
      .currents {
         margin-top: 30px;
         padding: 0px 0px 0px 0px;
         }
      .comments {
         color: #111111;
         text-align: right;
         line-height: 150%;
         padding-right: 5px;
         font-size: 13px;
         }
      .comments a, .comments a:link, .comments a:visited, .comments a:active .comments a:hover {
         color: #111111;
         }
      .separator {
         height: 50px;
         background: url(HTTP://SEPARATOR) center center no-repeat;
         }
      
      
      
      /* ----- Comments Page ----- */
      /* ----- Comments Page ----- */
      /* ----- Comments Page ----- */
      
      .skiplinks {
         margin: 0px 0px 15px 0px;
         text-align: center;
         color: #444444;
         }
      .skiplinks a, .skiplinks a:link, .skiplinks a:visited, .skiplinks a:active .skiplinks a:hover{
         padding: 5px;
         }
      .box center b {
         color: #808080;
         }
      .commentbox {
         background: #808080;
         margin: 15px 0px 15px 0px;
         padding: 7px;
         border: 2px solid #444444;
         }
      .userpiccomment {
         float: left;
         margin: 0px 10px 0px 0px;
         background: #808080;
         text-align: center;
         }
      .datesubjectcomment {
         color: #222222;
         margin: 0px 0px 15px 0px;
         padding: 0px;
         }
      .datesubjectcomment strong {
         padding: 0px;
         font-size: 14px;
         font-weight: bold;
         color: #111111;
         }
      .commentreply {
         margin-bottom: 25px;
         }
      .replytosubject {
         color: #111111;
         font-size: 14px;
         font-weight: bold;
         margin: 0px 0px 15px 0px;
         padding: 0px;
         }
      .replytoposter {
         color: #222222;
         margin: 0px;
         padding: 0px;
         }
      .quickreply_holder, .quickreply_box{
         margin: 0px;
         padding: 0px;
         width: 100% !important;
         border: 0px !important;
         }
      form#qrform table {
         margin: 0px;
         padding: 0px;
         border: 0px !important;
         width: 98% !important;
         }
      #commenttext {
         width: 520px;
         }
      
      
      
      /* ----- Tags ----- */
      /* ----- Tags ----- */
      /* ----- Tags ----- */
      
      .ljtaglist {
         list-style-type: none;
         padding: 5px;
         margin: 0px;
         }
      h2 {
         padding: 5px;
         margin: 0px;
         font-weight: bold;
         font-size: 20px;
         }
      
      /* ----- Archives ----- */
      /* ----- Archives ----- */
      /* ----- Archives ----- */
      
      ul.year {
         text-align: center;
         color: #111111;
         line-height: 150%;
         font-size: 15px;
         margin: 10px;
         }
      
      ul.year li {
         margin: 15px;
         padding: 0px;
         display: inline;
         list-style-type: none;
         }
      
      ul.year li.active {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #222222;
         color: #999999;
         }
      
      ul.year a, ul.year a:link, ul.year a:visited, ul.year a:active {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #444444;
         color: #999999;
         }
      ul.year a:hover {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #888888;
         color: #444444;
         }
      table.yeartable {
         width: 75%;
         padding: 5px;
         }
      
      td.yearmonth {
         font-weight: bold;
         line-height: 175%;
         font-size: 16px;
         padding: 0px;
         }
      
      table.yeartable td.yearday {
         color: #999999;
         background: #444444;
         text-align: center;
         line-height: 150%;
         }
      
      table.yeartable td.yeardate {
         border: 1px solid #444444;
         }
      
      
      
      /* ----- Footer ----- */
      /* ----- Footer ----- */
      /* ----- Footer ----- */
      
      .navfooter ul {
         padding: 0px;
         margin: 0px;
         }
      .navfooter li  {
         margin: 15px;
         padding: 0px;
         display: inline;
         list-style-type: none;
         }
      .navfooter li.viewing {
         font-weight: bold;
         }
      .navfooter a, .navfooter a:link, .navfooter a:visited, .navfooter a:active {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #444444;
         color: #999999;
         }
      .navfooter a:hover {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #888888;
         color: #444444;
         }
      .clearfoot {
         height: 5px;
         }
      
      Wire CSS:
      /* ----- Hogan's Heroes Steel Wire ----- */
      /* --- Flexi Squares Layout by BrattyJedi --- */
      /* ----- http://bratty-jedi.livejournal.com/2001/01/01/ ----- */
      
      
      
      /* ----- Main Layout ----- */
      /* ----- Main Layout ----- */
      /* ----- Main Layout ----- */
      
      
      body {
         margin: 0px;
         padding: 10px auto;
         font-family: Trebuchet MS, Helvetica, sans-serif;
         font-size: 13px;
         text-align: left;
         color: #999999;
         background: url(HTTP://BACKGROUND) repeat center scroll #000000;
         }
      #content-outer {
         width: 800px;
         padding: 10px;
         margin: 0px auto;
         background: #222222;
         }
      #content {
         background: url(HTTP://WIRE) center 400px repeat #808080;
         color: #111111;
         margin: 0px;
         min-height: 1500px;
         }
      #header {
         border-top: 1px solid #222222;
         margin: 0px auto 10px auto;
         padding: 0px;
         text-align: center;
         height: 400px;
         width: 800px;
         background: url(HTTP://HEADER) center top no-repeat transparent;
         overflow: hidden;
         }
      #sidebar {
         float: left;
         width: 165px;
         margin-left: 10px;
         background: transparent;
         overflow: hidden;
         text-align: center;
         border: none;
         }
      #maincontent {
         margin-left: 190px;
         margin-right: 10px;
         background: transparent;
         }
      #footer {
         margin: -15px 5px 0px 190px;
         list-style: none;
         text-align: center;
         text-transform: capitalize;
         line-height: 175%;
         font-size: 14px;
         color: #111111;
         }
      
      
      
      /* ----- Fonts ----- */
      /* ----- Fonts ----- */
      /* ----- Fonts ----- */
      
      a, a:link, a:visited, a:active {
         color: #800000;
         text-decoration: none;
         font-weight: bold;
         }
      a:hover {
         color: #800000;
         text-decoration: underline;
         }
      
      .ljuser {
         text-transform: capitalize;
         }
      
      blockquote, q {
         display: block;
         padding: 10px;
         margin: 5px 15px 5px 15px;
         border: double 5px #444444;
         }
      .entry ul, .entry ol {
         border-left: 1px dotted #444444;
         border-bottom: 1px dotted #444444;
         padding: 5px 5px 5px 30px;
         margin: 10px 10px 10px 10px;
         }
      
       dl {
         padding: 5px 5px 5px 10px;
         margin: 10px 10px 10px 10px;
         }
      
      dt {
         margin: 0px 10px 0px 0px;
         padding: 0px;
         line-height: 200%;
         font-size: 15px;
         font-weight: bold;
         }
      
      dd {
         margin-left: 25px;
         line-height: 150%;
         }
      
      code {
         font-family: monospace;
         border: 1px dotted #444444;
         display: block;
         padding: 10px;
         }
      
      kbd, pre, tt {
         font-family: monospace;
         }
      
      textarea, select {
         border: 0px solid #444444;
         background: #c0c0c0;
         color: #111111;
         }
      
      input {
         border: 0px solid #444444;
         background: #c0c0c0;
         color: #111111;
         padding: 3px;
         }
      
      #subject {
         border: 0px solid #444444 !important;
         background: #c0c0c0 !important;
         color: #111111 !important;
         }
      
      #qrform , #qrform table {
         border: 0px solid #444444 !important;
         background: #444444 !important;
         color: #999999 !important;
         width: 100% !important;
         margin: 10px 0px 10px 0px;
         }
      #qrform a, #qrform a:link, #qrform a:visited, #qrform a:active {
         color: #c00000;
         text-decoration: none;
         font-weight: bold;
         }
      #qrform a:hover {
         color: #c00000;
         text-decoration: underline;
         }
      #postform {
         border: 0px solid #444444 !important;
         background: #444444 !important;
         color: #999999 !important;
         width: 100% !important;
         margin: 25px 0px;
         }
      
      
      
      /* ----- Header ----- */
      /* ----- Header ----- */
      /* ----- Header ----- */
      
      .title {
         margin: -388px 0px 10px 200px;
         font-size: 20px;
         font-weight: bold;
         line-height: 102%;
         }
      .subtitle {
         margin-left: 200px;
         font-size: 15px;
         font-weight: bold;
         line-height: 102%;
         }
      ul.navheader {
         list-style-type: none;
         margin-top: 367px;
         }
      ul.navheader li {
         display: inline;
         margin: 0px 25px 0px 25px;
         font-size: 18px;
         font-weight: bold;
         }
      ul.navheader li.view {
         display: inline;
         margin: 0px 25px 0px 25px;
         font-size: 18px;
         font-weight: bold;
         text-decoration: none;
         font-weight: bold;
         padding: 0px 0px 0px 3px;
         line-height: 150%;
         background: #222222;
         color: #999999;
         }
      ul.navheader li a, ul.navheader li a:link, ul.navheader li a:visited, ul.navheader li a:active {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #444444;
         color: #999999;
         }
      ul.navheader li a:hover {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #888888;
         color: #444444;
         }
      
      
      
      /* ----- Sidebar ----- */
      /* ----- Sidebar ----- */
      /* ----- Sidebar ----- */
      
      .sbarlist {
         margin-left: 0px;
         padding-left: 0px;
         }
      
      .sbartitle {
         border: 0px;
         background: #444444;
         color: #999999;
         padding: 3px;
         margin: 0px;
         text-weight: bold;
         font-size: 14px;
         font-weight: bold;
         list-style: none;
         }
      
      li.sbartitle a, li.sbartitle a:link, li.sbartitle a:visited, li.sbartitle a:active {
         color: #999999;
         font-weight: bold !important;
         font-size: 14px;
         }
      
      .sbarcontent li.sbartitle {
         margin: 5px 15px 5px 15px;
         padding: 3px;
         font-size: 13px;
         }
      
      .sbarbody {
         background: #808080;
         margin: 0px 0px 0px 0px;
         padding: 0px;
         border: solid #444444;
         border-width: 0px 2px 2px 2px;
         }
      
      .sbarbody2 {
         background: #808080;
         margin: -10px 0px 0px 0px;
         padding: 0px 3px 7px 3px;
         border: solid #444444;
         border-width: 0px 2px 2px 2px;
         text-align: left;
         }
      
      .defaultuserpic {
         margin: 0px 0px 0px 0px;
         }
      
      .defaultuserpic img {
         padding: 5px;
         background: transparent;
         border: 2px solid #444444;
         }
      
      table.calendar {
         margin-right: auto;
         margin-left: auto;
         }
      
      .sbarcalendar {
         text-align: center;
         }
      
      .sbarcalendarposts {
         text-align: center;
         }
      .sbarcalendarposts a, .sbarcalendarposts a:link, .sbarcalendarposts a:visited, .sbarcalendarposts a:active {
         color: #111111;
         font-weight: normal;
         border: solid 1px #999999;
         padding: 0px 4px;
         }
      .sbarcalendarposts a:hover {
         background: #444444;
         color: #808080;
         border: solid 1px #999999;
         font-weight: normal;
         padding: 0px 4px;
         text-decoration: none;
         }
      li.sbaritem {
         list-style: none;
         text-align: left;
         padding: 2px 5px 2px 25px;
         text-indent: -10px;
         }
      .tagcloud {
         list-style: none;
         text-align: left;
         padding: 2px 5px 2px 25px;
         text-indent: -10px;
         }
      
      
      
      
      /* ----- Entry ----- */
      /* ----- Entry ----- */
      /* ----- Entry ----- */
      
      .subcontent {
         background: #808080;
         margin: 0px;
         padding: 5px;
         border: 2px solid #444444;
         }
      
      .userpic, .userpicfriends {
         float: right;
         border: solid 2px #444444;
         margin: 0px 0px 5px 5px;
         padding: 5px;
         text-align: center;
         line-height: 150%;
         background: #808080 !important;
         color: #111111 !important;
         position: relative;
         }
      .userpicfriends a font {
         color: #111111 !important;
         }
      .userpicfriends a {
         color: #111111 !important;
         }
      .userpic img, .userpicfriends img {
         }
      .datesubject {
         color: #111111;
         margin: 0px 0px 10px 0px;
         padding: 0px;
         }
      .subject {
         padding: 0px;
         font-size: 18px;
         font-weight: bold;
         }
      .subject a, .subject a:link, .subject a:visited, .subject a:active .subject a:hover {
         color: #111111;
         font-weight: bold;
         }
      .date {
         font-size: 12px;
         color: #222222;
         }
      .entry_text {
         padding: 0px;
         min-height: 120px;
         }
      .ljtags {
         font-weight: bold;
         margin: 10px 0px 0px 0px;
         }
      .clear {
         display: none;
         }
      .currents {
         margin-top: 30px;
         padding: 0px 0px 0px 0px;
         }
      .comments {
         color: #111111;
         text-align: right;
         line-height: 150%;
         padding-right: 5px;
         font-size: 13px;
         }
      .comments a, .comments a:link, .comments a:visited, .comments a:active .comments a:hover {
         color: #111111;
         }
      .separator {
         height: 50px;
         background: transparent;
         }
      
      
      
      /* ----- Comments Page ----- */
      /* ----- Comments Page ----- */
      /* ----- Comments Page ----- */
      
      .skiplinks {
         margin: 0px 0px 15px 0px;
         text-align: center;
         color: #444444;
         }
      .skiplinks a, .skiplinks a:link, .skiplinks a:visited, .skiplinks a:active .skiplinks a:hover{
         padding: 5px;
         }
      .box center b {
         color: #808080;
         }
      .commentbox {
         background: #808080;
         margin: 15px 0px 15px 0px;
         padding: 7px;
         border: 2px solid #444444;
         }
      .userpiccomment {
         float: left;
         margin: 0px 10px 0px 0px;
         background: #808080;
         text-align: center;
         }
      .datesubjectcomment {
         color: #222222;
         margin: 0px 0px 15px 0px;
         padding: 0px;
         }
      .datesubjectcomment strong {
         padding: 0px;
         font-size: 14px;
         font-weight: bold;
         color: #111111;
         }
      .commentreply {
         margin-bottom: 25px;
         }
      .replytosubject {
         color: #111111;
         font-size: 14px;
         font-weight: bold;
         margin: 0px 0px 15px 0px;
         padding: 0px;
         }
      .replytoposter {
         color: #222222;
         margin: 0px;
         padding: 0px;
         }
      .quickreply_holder, .quickreply_box{
         margin: 0px;
         padding: 0px;
         width: 100% !important;
         border: 0px !important;
         }
      form#qrform table {
         margin: 0px;
         padding: 0px;
         border: 0px !important;
         width: 98% !important;
         }
      #commenttext {
         width: 500px;
         }
      
      
      
      /* ----- Tags ----- */
      /* ----- Tags ----- */
      /* ----- Tags ----- */
      
      .ljtaglist {
         list-style-type: none;
         background: #808080;
         padding: 10px;
         margin: 0px;
         border: solid #444444;
         border-width: 0px 2px 2px 2px;
         }
      h2 {
         margin: 0px;
         padding: 5px;
         background: #808080;
         border: solid #444444;
         border-width: 2px 2px 0px 2px;
         font-weight: bold;
         font-size: 20px;
         }
      
      
      
      /* ----- Archives ----- */
      /* ----- Archives ----- */
      /* ----- Archives ----- */
      
      ul.year {
         text-align: center;
         color: #111111;
         line-height: 150%;
         font-size: 15px;
         margin: 10px;
         }
      
      ul.year li {
         margin: 15px;
         padding: 0px;
         display: inline;
         list-style-type: none;
         }
      
      ul.year li.active {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #222222;
         color: #999999;
         }
      
      ul.year a, ul.year a:link, ul.year a:visited, ul.year a:active {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #444444;
         color: #999999;
         }
      ul.year a:hover {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #888888;
         color: #444444;
         }
      table.yeartable {
         width: 75%;
         padding: 5px;
         }
      
      td.yearmonth {
         font-weight: bold;
         line-height: 175%;
         font-size: 16px;
         padding: 0px;
         }
      
      table.yeartable td.yearday {
         color: #999999;
         background: #444444;
         text-align: center;
         line-height: 150%;
         }
      
      table.yeartable td.yeardate {
         border: 1px solid #444444;
         background: #808080;
         }
      
      
      
      /* ----- Footer ----- */
      /* ----- Footer ----- */
      /* ----- Footer ----- */
      
      .navfooter ul {
         padding: 0px;
         margin: 0px;
         }
      .navfooter li  {
         margin: 15px;
         padding: 0px;
         display: inline;
         list-style-type: none;
         }
      .navfooter li.viewing {
         font-weight: bold;
         }
      .navfooter a, .navfooter a:link, .navfooter a:visited, .navfooter a:active {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #444444;
         color: #999999;
         }
      .navfooter a:hover {
         text-decoration: none;
         font-weight: bold;
         padding: 0px 3px 0px 3px;
         line-height: 150%;
         background: #888888;
         color: #444444;
         }
      .clearfoot {
         height: 5px;
         }
      


  8. In the CSS you just pasted, you need to find and replace three bits of text. Your browser's find function should make this task easier but you can find the text manually as well. You will always be replacing text inside parentheses. Be sure not to delete the parentheses.
    1. For Steel Minimal:
      1. At the top of the code, under Main Layout find the code for body and replace HTTP://BACKGROUND with the web address for the background image you saved in step 1.

      2. Still under Main Layout, find the code for #header and replace HTTP://HEADER with the web address for the header image you saved in step 1.

      3. About two-thirds of the way through the code, right before Comments Page find the code for separator and replace HTTP://SEPARATOR with the web address for the separator image you saved in step 1.

    2. For Steel Wire:
      1. At the top of the code, under Main Layout find the code for body and replace HTTP://BACKGROUND with the web address for the background image you saved in step 1.

      2. Still under Main Layout, find the code for #content and replace HTTP://WIRE with the web address for the wire image you saved in step 1.

      3. Still under Main Layout, find the code for #header and replace HTTP://HEADER with the web address for the header image you saved in step 1.

  9. Be sure to save the changes and you are done. For known browser variations, optional modifications to the layout to optimize it for your personal preferences, and for possible paid account changes, visit this post.

  10. This step is completely optional, but if you do use this layout, I'd appreciate it if you would post a comment to this entry letting me know and please consider giving credit to myself and others whose work went into this layout. You can do this in one of two ways.
    1. If you include the links list in your sidebar, you can make a LJ entry titled "Hogan's Heroes Steel Layout Credits." Copy the text in the box below and paste it into the LJ entry and save the entry. You are of course welcome to change the text as you see fit. This is just a suggestion on the information you should include. Place a link called "Layout Credits" or something similar linking to the final entry in your sidebar link list.

    2. If you do not use the link list or would prefer not to include a credits link in your link list, you can paste the text below at the end of the "Bio" section on your profile. You can edit your profile here. Again, you are of course welcome to change the text as you see fit. This is just a suggestion on the information you should include.
    Credit Information:
    This LJ layout (Hogan's Heroes Steel) was designed by <lj user="bratty_jedi">. Full information on the layout is <a href="http://bratty-jedi.livejournal.com/2001/01/01/">here</a>.

    The barbed wire imagery used in this layout was designed by FrozenStarRo and is available <a href="http://ro-stock.deviantart.com/art/Barbed-Brushes-52809135">here</a>.

    The concept for this layout and all pictures in the header image came from the TV show <a href="http://www.imdb.com/title/tt0058812/">Hogan's Heroes</a>. No profit is being made from this layout and no copyright infringement is intended. This is simply a tribute to a beloved television comedy.

Comments:

Crystal Rose of Pollux
rose_of_pollux at 1:35 am on 04 November 2010 (UTC) (Link)
As you requested, I'm commenting here to let you know I used the Steel Minimal layout for my collaborative fic journal, lebeau_newkirk, and credited!

Many thanks!
Rachael
bratty_jedi at 2:14 pm on 04 November 2010 (UTC) (Link)
Thanks for letting me know. Hope you enjoy it. :)


   Leave a New Comment
Previous Entry  Next Entry