News:

Create A Forum Installed

Author Topic: Post and Poster area Modification 1  (Read 799 times)

0 Members and 1 Guest are viewing this topic.

Offline simply sibyl

  • Full Member
  • ***
  • Posts: 189
  • Karma: 35
    • View Profile

Badges: (View All)
Level 4 Windows User Topic Starter
Post and Poster area Modification 1
« 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. 
 

 
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;
« Last Edit: June 30, 2011, 07:41:30 pm by simply sibyl »

Share on Facebook Share on Twitter


 

Related Topics

  Subject / Started by Replies Last post
1 Replies
768 Views
Last post June 29, 2011, 01:56:00 am
by CreateAForum
2 Replies
480 Views
Last post November 14, 2012, 09:58:22 pm
by colin
1 Replies
281 Views
Last post February 13, 2018, 02:10:15 am
by CreateAForum
2 Replies
575 Views
Last post April 13, 2018, 06:21:04 pm
by CreateAForum
1 Replies
586 Views
Last post March 07, 2019, 02:23:25 pm
by BlackDiamond