Create A Forum - Support Forums

Support => Style Support => Topic started by: simply sibyl on June 30, 2011, 07:34:29 pm

Title: Post and Poster area Modification 1
Post by: simply sibyl on June 30, 2011, 07:34:29 pm

Thought I would show you how to change the Poster area.  (Both in posts on the forum and in the PM area)   This is one of a couple of ways I'll show you to do this. 
 
(https://support.createaforum.com/proxy.php?request=http%3A%2F%2Fi148.photobucket.com%2Falbums%2Fs20%2Fsmfstyles%2FScreenShot00154.jpg&hash=82c054657b1dfa3010ac476a51cea3e449a56531)
 
Modify your css via Style Manager.
 
Look for this in the css:

Code: [Select]


/* poster and postarea + moderation area underneath
*/
.post_wrapper
{
 float:left;
 width:100%;
}
.poster
{
 float:
left;
 width: 15em;
}
.postarea,
.moderatorbar
{
 margin: 0 0 0 16em;
}
.postarea
div.flow_hidden
{
 width: 100%;
}

 
.moderatorbar
{
 clear: right;
}
/* poster details and list
of items */
.poster h4, .poster ul
{
 padding: 0;
 margin:
0 1em 0 1.5em;
}
.poster h4
{
 margin: 0.2em 0 0.4em
1.1em;
 font-size: 120%;
}
.poster h4, .poster h4
a
{
 color: #c06002;
}
.poster ul ul
{
 margin:
0.3em 1em 0 0;
 padding: 0;
}
.poster ul ul
li
{
 display: inline;
}
.poster li.stars, .poster li.avatar,
.poster li.blurb, li.postcount, li.im_icons ul
{
 margin-top:
0.5em;
}

 
Replace with this:
(be VERY careful that you copy and replace the exact code - no more/no less)

Code: [Select]

/* poster and postarea + moderation area underneath */
.post_wrapper
{
 float:left;
 width:100%;
}
.poster
{
 float: left;
 width: 12em;
 background: #ffffff url(http://i148.photobucket.com/albums/s20/smfstyles/imbg.png)repeat-x left bottom;
 border: 1px solid #D7D7D7;
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
 box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
 margin-left:10px;
 padding: 4px;
 position: relative;
 z-index: 49;
}
.postarea, .moderatorbar
{
 margin: 0 0 0 18em;
}
.postarea div.flow_hidden
{
 width: 100%;
}
.moderatorbar
{
 clear: right;
}
/* poster details and list of items */
.poster h4, .poster ul
{
 padding: 0;
 margin: 0 1em 0 1em;
}
.poster h4
{
 margin: 0.4em 0 0.4em 1.1em;
 font-size: 110%;
 text-align:left
}
.poster h4, .poster h4 a
{
 color: #c06002;
}
.poster ul ul
{
 margin: 1em 1em 0 0;
 padding: 0;
}
.poster ul ul li
{
 display: inline;
}
.poster li.gender, .poster li.stars, .poster li.avatar, .poster li.blurb, li.postcount, li.im_icons ul
{
 margin-top: 1em;
 
}

 
If you are using a custom stylesheet and want to change how it looks look for this in the code:
 

Code: [Select]

.poster
{
 float: left;
 width: 12em;
 background: #ffffff url(http://i148.photobucket.com/albums/s20/smfstyles/imbg.png)repeat-x left bottom;
 border: 1px solid #D7D7D7;
 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
 box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
 margin-left:10px;
 padding: 4px;
 position: relative;
 z-index: 49;
}

To change the small image that is at the bottom replace the url in this with your own image.  The image is 13px x 31px.
:

Code: [Select]

background: #ffffff url(http://i148.photobucket.com/albums/s20/smfstyles/imbg.png)repeat-x
left bottom;

To remove the background image at the bottom of the block completely replace that line of code with:

Code: [Select]

background: #ffffff;

To change the background color of the block replace #ffffff in the above code
To change the border color of the block change the color code in this part of the code:

Code: [Select]

border: 1px solid #D7D7D7;