Blog visual help Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

    Blog visual help

    phantomkhaos
    phantomkhaos
    Forumember


    Male Posts : 38
    Reputation : 0
    Language : English
    Location : Orlando, Florida

    Blog visual help Empty Blog visual help

    Post by phantomkhaos February 23rd 2009, 5:36 am

    *Mods, dunno if this goes in here. Couldn't find a support forum for blogs. Please, move if need be.*


    I'm trying to change the color of the line that runs down the side of my posts on my blog.

    Journey to the Corps

    As you can see its a solid thin white line that I'd like to change to something darker. Any help or suggestions are much appreciated.
    Jalokim
    Jalokim
    Energetic


    Male Posts : 6113
    Reputation : 223
    Language : English,Polish,CSS,HTML
    Location : Poland

    Blog visual help Empty Re: Blog visual help

    Post by Jalokim February 23rd 2009, 12:03 pm

    Yes... I'll finally show the world that I also know how to deal with the sosblog.

    This is simple.
    log in to your blog...
    admin->multi blog -> personal skin -> expert version

    this will open your CSS.
    locate this part:
    Code:
    .post div.post_main {
    margin: 0 0 0 3.5em;
       padding:  0 0 1em 1.2em;
       border-left: 1px solid #CCCCCC;

    and as you can see there is that awful left border.
    just change the hex code to #222222.
    This will darken your line.

    So this is what it should look like afterwards:
    Code:
    .post div.post_main {
    margin: 0 0 0 3.5em;
       padding:  0 0 1em 1.2em;
       border-left: 1px solid #222222;
    phantomkhaos
    phantomkhaos
    Forumember


    Male Posts : 38
    Reputation : 0
    Language : English
    Location : Orlando, Florida

    Blog visual help Empty Re: Blog visual help

    Post by phantomkhaos February 23rd 2009, 6:15 pm

    Jalokim wrote:Yes... I'll finally show the world that I also know how to deal with the sosblog.

    This is simple.
    log in to your blog...
    admin->multi blog -> personal skin -> expert version

    this will open your CSS.
    locate this part:
    Code:
    .post div.post_main {
    margin: 0 0 0 3.5em;
       padding:  0 0 1em 1.2em;
       border-left: 1px solid #CCCCCC;

    and as you can see there is that awful left border.
    just change the hex code to #222222.
    This will darken your line.

    So this is what it should look like afterwards:
    Code:
    .post div.post_main {
    margin: 0 0 0 3.5em;
       padding:  0 0 1em 1.2em;
       border-left: 1px solid #222222;

    Hmm, well I looked and re-looked and still couldn't find it. Maybe I' just having a blind moment and just don't see it. Then again, I'm no coder so that may be my problem. Here is what it shows me below,

    Code:
    body {
    border-color: #000000;
    border-style: solid;
    background-color: #000000;
    background-image: none;}

    #content {
    background-color:#373B35;}

    #header {
    border-color: #000000;
    background-color: #000000;
    background-image: none;
    color: #2F312D;}

    #header_title a {
    border-color: #2F312D;
    background-color: #2F312D;
    color: #2F312D;}

    #header_explanation {
    border-color: #000000;
    background-color: #000000;
    background-image: none;
    color: #2F312D;}

    .post {
    background-color:#2F312D;
    color:#686a65;}

    .post a {
    color:#858585;}

    .post a:hover {
    color:#61584c;}

    .post .title, .post .title a {
    color:#000000;}

    #modules_list {
    background-color:#2F312D;
    border-color:#3C4436;}

    .module {
    color:#686a65;}

    .module a {
    color:#858585;}

    .module a:hover {
    color:#61584c;}

    .module h3 {
    background-color: #20211F;
    background-image: none;
    color: #888888;}

    #footer {
    background-color: #2F312D;
    background-image: none;}

    #footer ul li a {
    color:#858585;}

    #footer ul li a:hover {
    color:#61584c;}

    #dock {
    background-image: none;}

    #dock ul, #dock li {
    list-style-type: armenian;
    list-style-position:outside;}

    body ul, body li {
    list-style-position:outside;}

    #header_img ul, #header_img li {
    list-style-position:outside;}

    #header ul, #header li {
    list-style-position:outside;}

    #header_title a ul, #header_title a li {
    list-style-position:outside;}

    #header_title {
    border-color: #2F312D;
    background-color: #2F312D;
    background-image: none;
    color: #2F312D;}

    #header_title ul, #header_title li {
    list-style-position:outside;}

    .post .title {
    background-color: #20211F;
    background-image: none;
    background-position: left 50%;
    color: #888888;}

    .post .title ul, .post .title li {
    list-style-position:outside;}

    #header_img {
    background-image: url('http://i68.servimg.com/u/f68/11/98/15/82/jttc_b15.jpg');}

    #footer ul, #footer li {
    list-style-position:outside;}

    #header_explanation ul, #header_explanation li {
    list-style-position:outside;}

    #blog_link {
    border-color: #000000;
    color: #000000;
    text-align: left;}

    #blog_link ul, #blog_link li {
    list-style-position:outside;}

    .module h3 ul, .module h3 li {
    list-style-position:outside;}

    #main_content {
    border-color: #000000;
    }

    #main_content ul, #main_content li {
    list-style-position:outside;
    }

    Jalokim
    Jalokim
    Energetic


    Male Posts : 6113
    Reputation : 223
    Language : English,Polish,CSS,HTML
    Location : Poland

    Blog visual help Empty Re: Blog visual help

    Post by Jalokim February 23rd 2009, 6:26 pm

    You are using some simplified css version.
    go back to your expert css version and paste this code:
    Code:
    * {margin: 0px; padding: 0px; }
    /**************************************************************
    style from studio7designs.com
     **************************************************************/
    /*********************************************************
      HTML Elements
     *********************************************************/
    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      font: 400 0.7em verdana, arial, sans-serif;
      line-height: 170%;
      background: url('http://www.illiweb.com/bl/skins/nautica_4/images/bg/light_body.gif') repeat-y top center;
      color: #555;
    }


    /* Headers */
    h1, h2, h3, h4, h5, h6 {
      margin: 0 0 10px 0;
      padding: 0;
    }


    h1 {
      padding-bottom: 0.2em;
      color: #536C71;
    }

    h2 {
      font-size: 1.2em;
      color: #586B7A;
    }

    h3 {
      text-transform: uppercase;
      font-size: 0.9em;
      color: #5D6F73;
    }

    h4 {
      font-size: 0.85em;
    }

    h5 {
      font-size: 0.8em;
    }


    /* Links */
    a {
      text-decoration: none;
      color: #3B5D77;
    }

    a:hover {
      color: #668FA3;
    }

    a img {
      border: 0;
    }

    a img.border {
      border: 1px solid #000;
    }

    a:hover img.border {
      /* Fixes IE bug - IE doesn't correctly apply the style on a:hover so need to mask it */
      border: 1px solid #668FA3 !important;
      border: 1px solid #FC3307;
    }

    /* Images */
    img.floatRight {
      margin: 5px 0 10px 10px;
    }

    img.floatLeft {
      margin: 5px 10px 10px 0;
    }

    /* Lists */
    ol {
       padding:2px 15px;
    }
    ul li {
      margin-left: 30px;
      list-style-image: url('http://www.illiweb.com/bl/skins/nautica_4/images/bg/submenu1.gif');
    }
    ol li span {
      font-weight: normal;
      color: #444;
    }

    /* Blockquote */
    blockquote {
      margin: 0;
      padding: 0 20px;
      background: #eee;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }



    /**************************************************************
      Form Elements
     **************************************************************/
    /* If you're finding the input elements get pushed down, increase the width */
    label {

      cursor:pointer;
    }
    label:hover {
       color:#000;
    }
    input,
    textarea,
    select {
      padding: 1px;
      font: 400 1em verdana, sans-serif;
      color: #999;
      background: #EEE;
      border: 1px solid #CCC;
    }

    input:focus,
    input:hover,
    textarea:focus,
    textarea:hover,
    select:focus,
    select:hover {
      color: #000;
      background: #E7F1F3;
      border: 1px solid #888;
    }

    input.noBorder,
    input:focus.noBorder,
    input:hover.noBorder {
      padding: 0;
      border: 0;
    }

    input.button {
      padding: 2px 5px;
      font: 400 0.9em verdana, serif;
      cursor: pointer;
      color: #fff;
      background: #ccc;
      border-width: 1px;
      border-style: solid;
      border-color: #888 #888 #8880 #888;
    }

    input.radio {
      background: none;
      border: 0px;
    }

    /**************************************************************
      Form Elements
     **************************************************************/
    fieldset {
       padding:10px 0;
    }
    legend {
       font-weight: bold;
       color:#888888;
    }
    /* label */
    .label,.label_rtl {
       float: left;
       clear: both;
       padding-left: 30px;
       width: 130px;
    }
    .label_rtl {
       float: right;
       padding-right: 30px;
       text-align:right;
    }
    /* input */
    .input, .input_rtl {
       float: left;
       padding-top: 5px;
    }
    .input_rtl {
       float:right;
       text-align:right;
    }
    *+html .input, * html .input  {
       float: none;
       margin-left: 162px;
    }
    *+html.input_rtl, * html .input_rtl {
       margin-right: 162px;
    }
    /* info */
    .info {
       margin-left: 150px;
    }
    .info_rtl {
       text-align:right;
    }
    /* notes */
    .notes, .notes_rtl {
       font-size:0.8em;
       font-style: italic;
       display:block;
       margin-bottom:10px;
    }
    .notes_rtl {
       text-align:right;
    }

    #img_refresh {
       cursor:pointer;
    }
    /**************************************************************
      All page content except for footer
     **************************************************************/
    #content {
      position: relative;
      height: auto !important;
      height: 100%;
      min-height: 100%;
      width: 776px;
      margin:0 auto;
      background-color:#fff;
    }
    /**************************************************************
      Top menu and logo
     **************************************************************/
    #header {
       height: 5em;
       margin: 0 auto;
       padding-top:5px;
       border-bottom: 2px solid #48525B;
       background-color: #000;
       background: url('http://www.illiweb.com/bl/skins/nautica_4/images/bg/header.gif') repeat-x bottom left;
    }
    #header_link {
       font-size:40px;
       color:#586b7a;
    }
    #header_link:hover {
       color:#8b9daa;
    }
    #header_links{
       float:right;
       margin-top:-5px;
       margin-right:5px;
       font-weight:bold;
    }
    #header_explanation {
       text-align:right;
       margin-right:3px;
       margin-top:10px;
    }
    #header img {
      position: absolute;
      top: 5%;
      left: 10px;
    }
    #header ul {
      margin: 3.5em 1em 0 0 !important;
      margin: 3.5em 0.5em 0 0;
      padding: 0;
      float: right;
    }
    #header ul li {
      display: inline;
      list-style: none;
    }
    #header ul li a {
      float: left;
      padding: 0 1em;
      font: 400 1.1em arial, sans-serif;
      letter-spacing: 0.1em;
      line-height: 0.8em !important;
      line-height: 1em;
      color: #cccccc;
      border-right: 1px solid #4D5760;
    }
    #header ul li a.last {
      padding-right: 0;
      border-right: 0;
    }
    #header ul li a:hover {
      color: #F26A92;
    }
    /**************************************************************
      Header Image/Flash Movie
     **************************************************************/
    #header_img {
      margin: 0 auto;
      height: 143px;
      background: url('http://www.illiweb.com/bl/skins/nautica_4/images/bg/header_image.jpg') no-repeat top left;
    }
    /**************************************************************
      Page Content
     **************************************************************/
    #main_content {
       padding:10px 5px;
       margin-right:193px;
    }
    #modules_list {
       float:right;
       width: 190px;
       border:1px solid #dbdbdb;
       border-right:2px solid #dbdbdb;
       border-bottom:1px solid #dbdbdb;
       background-color: #E9EAEB;
    }
    .module {
       padding-left:5px;
       margin-bottom:10px;
    }
    .module p {
       margin-left: 5px;
    }
    .module ul {
       margin-left: 15px;
    }
    *+html .module ul {
       margin-left: 0px;
    }
    * html .module ul {
       margin-left: 0px;
    }
    /**************************************************************
      Footer
     **************************************************************/
    #footer {
      clear: both;
      float: left;
      width: 100%;
      height: 5em;
      background: url('http://www.illiweb.com/bl/skins/nautica_4/images/bg/header.gif') repeat-x bottom left;
    }
    #footer p{
       margin-top:10px;
      text-align:center;
    }
    #footer p a {
      padding: 0 1em;
      font: 400 1em arial, sans-serif;
      letter-spacing: 0.1em;
      color: #ccc;
    }
    #footer p a.last {
      padding-right: 0;
      border-right: 0;
    }
    #footer p a:hover {
      color: #F26A92;
    }
    #footer img {
      position: absolute;
      top: 6%;
      left: 10px;
    }
    /**************************************************************
      Posts
     **************************************************************/
    .post {
      float: left;
      width: 100% !important;
      width: 99%;
      position: relative;
      margin-bottom: 1.5em;
      border-bottom: 1px solid #CCCCCC;
    }
    .post .content {
       overflow:auto;
    }
    .post .date {
      position: absolute;
      top: 0;
      left: 5px;
      width: 2.3em;
      text-align: right;
    }
    .post .date .month {
      text-transform: uppercase;
      font: 700 1.0em arial, sans-serif;
      color: #888;
    }
    .post .date .day {
      display: block;
      margin-top: -5px;
      font: 700 2.1em arial, sans-serif;
      color: #888;
    }
    .post div.post_main {
      margin: 0 0 0 3.5em;
      padding:  0 0 1em 1.2em;
      border-left: 1px solid #222;
    }
    .post div.post_main .title {
      display: block;
      padding: 0 0 5px 0;
      font-size: 1.2em;
      font-weight: bold;
      color: #586B7A;
    }
    .post div.post_main .options {
       clear: both;
    }
    /**************************************************************
      Comment
     **************************************************************/
    .comment {
       margin-left:30px;
       margin-bottom:30px;
       width:500px;
    }
    .comment .title{
       font-style:italic;
    }
    .comment .content{
       background-color:#E9EAEB;
       margin:0 0 10px 0;
       padding:2px 10px;
    }
    /**************************************************************
      CALENDAR
     **************************************************************/
    table.calendar {
       border-collapse: separate;
       font-size: 90%;
       margin-left: 10px;
       border-spacing: 1px;
    }
    table.calendar th.cell {
       font-size: 90%;
       color: #789;
    }
    table.calendar .today {
      text-align: center;
      border: 1px solid #bce;
    }
    table.calendar .cell {
      text-align: center;
    }
    table.calendar .cell a {
      font-weight: bold;
    }

    .searched_term
    {
       background-color:#f35b8c;
       color:#3d2229;
    }
    .alignLeft {
      text-align: left;
    }

    .alignRight {
      text-align: right;
    }

    #blog_link:hover {
       color:#f35b8c;
    }
    /* ICONS */
    .icon_comment,.icon_delete,.icon_edit,.icon_link,.icon_permalink,.icon_refresh,.icon_tag,.icon_url
    {
       background:transparent url(http://www.illiweb.com/bl/new.gif) no-repeat 0% 50%;
       padding:2px 0 0 16px;
       
    }
    .icon_comment{background-image:url(http://www.illiweb.com/bl/comments.gif);}
    .icon_delete{background-image:url(http://www.illiweb.com/bl/delete.gif);color:#bb1111;}
    .icon_edit{background-image:url(http://www.illiweb.com/bl/edit.gif);}
    .icon_link{background-image:url(http://www.illiweb.com/bl/url.gif);}
    .icon_permalink{background-image:url(http://www.illiweb.com/bl/permalink.gif);}
    .icon_refresh{background-image:url(http://www.illiweb.com/bl/reload.png);color:#FF9C40;}
    .icon_tag{background-image:url(http://www.illiweb.com/bl/tag.gif);background-position:0 50%; }
    .icon_url{background-image:url(http://www.illiweb.com/bl/url.gif);}
    /* CAPTCHA */
    #c_container {
       display:inline;
    }
    /* MESSAGES */
    #messages {
       text-align:center;
       margin:5px 10%;
       padding:0 40px;
    }
    p.error,p.success,p.message,p.confirm {
       background-repeat:no-repeat;
       background-position:0 50%;
       margin:0;
       padding:16px 0 16px 40px;
    }
    p.error {
       background-image:url('http://www.illiweb.com/bl/error.gif');
       color:#DC5402;
    }
    p.error a{
       color:#DC5402;
    }
    p.success {
       background-image:url('http://www.illiweb.com/bl/confirm.gif');
       color:#86B14E;
    }
    p.success a {
       color:#86B14E;
    }
    p.message {
       background-image:url('http://www.illiweb.com/bl/warning.gif');
       color:#DCB602;
    }
    * html p.message {
       height: 1%;
    }
    p.message a{
       color:#DCB602;
    }
    p.confirm {
       background-image:url('http://www.illiweb.com/bl/question.gif');
       color:#7EA3F7;
    }
    p.confirm a{
       color:#7EA3F7;
    }
    .center {
       text-align: center;
    }
    .clear {
       clear: both;
       height: 1px;
    }
    .hour {
       color: #888888;
       font-size: 0.7em;
       margin-left: -5px;
       zoom:1;
    }