Blog visual help

*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.

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;

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;
}



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;
}