Need help to change style of post profile and topic

Hi Forumotion,

My forum in phpBB3
Link: http://cotuong.forumvi.com

I hope that you guy can help me this.

- Firstly I want to change body post profile like below image.



- Second, I want to my forum has some small GAP and a bit round at cerner. It looks like Forumotion forum. Please see below image.



- The last one, background of my forum in white. Can you help to change this color? I think that background likes Forumotion forum will be the best.

Thank you!

add this to your css

Code:


.online .postprofile {
    background-image: url("http://2img.net/i/fa/prosilver/icon_user_online_en.png");
    background-position: right top;
    background-repeat: no-repeat;
}
.row2 .postprofile {
    background-color: #E5F1F9;
}
.postprofile {
    border: medium none !important;
    border-radius: 10px;
    box-shadow: 1px 1px 6px #FFF;
    padding: 5px;
}
.postprofile {
    border-color: #FFF;
    border-right: 1px solid #FFF;
    color: #666;
    display: inline;
    float: left;
    margin: 5px 0px 0px;
    min-height: 80px;
    position: relative;
    width: 22%;
    word-wrap: break-word;
}
div#wrap {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_wrap.png") repeat-x scroll center bottom #FBFBFB;
    border-color: -moz-use-text-color #00A5CD #00A5CD;
    border-top: 0px none;
    box-shadow: 1px 1px 10px;
    padding: 0px;
    width: 90%;
}
#wrap {
    background-color: #F7F7F7;
    border: 1px solid #666;
    margin: 0px auto;
    min-width: 951px;
    padding: 5px;
    width: 90%;
}
body {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_fdf.png") repeat-x scroll 0% 0% #D8E9F6;
    padding: 0px;
}
body {
    background-attachment: fixed;
    background-color: #FFF;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: auto;
    color: #666;
}

#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module {
    background-image: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    border: 1px solid #C3E0F1;
    margin: 3px 1px;
    padding-bottom: 8px;
    padding-top: 4px;
}
#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module, div.post {
    box-shadow: 1px 1px 1px;
}
#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module, div.post {
    border-radius: 4px;
}
.module {
    background-color: #E5F1F9;
    color: #666;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 0px 10px;
}

.corners-bottom,.corners-top{
display: none !important;;
}


Please see my notes on the image below. Your code worked very well. However, It is not what I want.

I still keep your code in my forum. Can you link into my forum to review again.

Here is my forum. http://cotuong.forumvi.com



Thank you!

Anybody help?

need to know the colors you want for the profile also do you want the width of the profile to fit right?

and i need the body background color you want


in the meantime remove this

Code:

#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module {
    background-image: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    border: 1px solid #C3E0F1;
    margin: 3px 1px;
    padding-bottom: 8px;
    padding-top: 4px;
}
#profile-advanced-right
 .module, #right .module, #postingbox.panel, .panel.introduction,
.panel.loginPanel, .portal .module, div.post {
    box-shadow: 1px 1px 1px;
}
#profile-advanced-right
 .module, #right .module, #postingbox.panel, .panel.introduction,
.panel.loginPanel, .portal .module, div.post {
    border-radius: 4px;
}
.module {
    background-color: #E5F1F9;
    color: #666;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 0px 10px;
}

replace

Code:

.corners-bottom,.corners-top{
display: none !important;;
}

with

Code:

.post{border-radius: 5px !important;}
.corners-bottom,.corners-top{
display: none !important;
}
#wrap {
    padding: 1px;
}
#content-container div#content {
    margin-right: 232px;
}
div#right div[style="height: 4px;"]{height:1px!important; }

Dear Mr. Twisted_Mods,

Code:

.online .postprofile {
    background-image: url("http://2img.net/i/fa/prosilver/icon_user_online_en.png");
    background-position: right top;
    background-repeat: no-repeat;
}
.row2 .postprofile {
    background-color: #E5F1F9;
}
.postprofile {
    border: medium none !important;
    border-radius: 10px;
    box-shadow: 1px 1px 6px #FFF;
    padding: 5px;
}
.postprofile {
    border-color: #FFF;
    border-right: 1px solid #FFF;
    color: #666;
    display: inline;
    float: left;
    margin: 5px 0px 0px;
    min-height: 80px;
    position: relative;
    width: 22%;
    word-wrap: break-word;
}
div#wrap {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_wrap.png") repeat-x scroll center bottom #FBFBFB;
    border-color: -moz-use-text-color #00A5CD #00A5CD;
    border-top: 0px none;
    box-shadow: 1px 1px 10px;
    padding: 0px;
    width: 90%;
}
#wrap {
    background-color: #F7F7F7;
    border: 1px solid #666;
    margin: 0px auto;
    min-width: 951px;
    padding: 5px;
    width: 90%;
}
body {
    background: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_fdf.png") repeat-x scroll 0% 0% #D8E9F6;
    padding: 0px;
}
body {
    background-attachment: fixed;
    background-color: #FFF;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    height: auto;
    color: #666;
}

#profile-advanced-right .module, #right .module, #postingbox.panel, .panel.introduction, .panel.loginPanel, .portal .module {
    background-image: url("http://2img.net/i/fa/optimisation_fdf/fr/bg_pannel.png");
    background-position: center bottom;
    background-repeat: repeat-x;
    border: 1px solid #C3E0F1;
    margin: 3px 1px;
    padding-bottom: 8px;
    padding-top: 4px;
}
.post{border-radius: 5px !important;}
.corners-bottom,.corners-top{
display: none !important;
}
#wrap {
    padding: 1px;
}
#content-container div#content {
    margin-right: 232px;
}
div#right div[style="height: 4px;"]{height:1px!important; }

I inserted the code above into CSS.

Then my forum showed like below image.

In the homepage, there got some changes. However, I think that it look not very well.


In the topic, Here is better. We got some rounds at the corners. However, the spaces that I requested, they did not show up.


I am sorry to bother you! But I think that we need to go back from the beginning and solve one by one.

Here is all code in CSS at the moment.

Code:

/* Personalize forum widgets with CSS */
/* Self service 2 */
.module .h3 { text-transform:none }
#right .forumline, #left .forumline, .module { box-shadow:2px 2px 2px rgba(0,0,0,0.4) }

/* Most viewed Topics -> Self service 2 */
.module .h3 {
  color:#FFF; /* color of the title font */
  font-size:10px; /* size of the title font */
  text-transform:none; /* Changes the text transformation from uppercase */
  background:#19E; /* background color */
  box-shadow:0 5px 6px rgba(255,255,255,0.5) inset, 0 -5px 6px rgba(0,0,0,0.1) inset; /* inset shadows used for a gradient */
  border-bottom:1px solid #39C; /* border size and color */
  margin:-5px -10px 5px -10px; /* spacing around the title | top left bottom right */
  padding:6px; /* Inner padding */
}
.module {
  background:#DEF; /* background color */
  border:1px solid #39C; /* border size and color */
  border-radius:12px 3px; /* rounds the borders */
}
.module .row1, .module .row2, .module .row3 { background:none /* removes the background color on the rows */ }

/* Vote/ Like system */
.LGlike {
  background: #105289;
  padding: 3px;
  border-radius: 4px;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  text-shadow: -1px 0.5px #888;
  box-shadow: 1px 1px 1px #888;
  cursor: pointer;
  margin-right: 4px;
 }
 .LGvote { margin: 0 5px; }
 .LGnovote {
  filter:Alpha(opacity=50);
  opacity: 0.5;
  cursor: default;
  box-shadow: none;
  text-shadow: none;
 }

/* Quick reply bigger */
#quick_reply #textarea_content { width:80% !important }


Can you make some changes to get the GAPs look like below image. I mean that the GAPs will be as per Formotion forum. (Homepage and Topic).

Dear Forumotion team,

I seem that this is not really difficult with you. When can I have your supports?

Dear @Ange Tuteur!

Three days left. Please help!

Thank you!

Hello,

Could you tell us what is left to do? Because i can see the forum as you wanted it to be.

I already fixed a little bit in the APC setting.

Here is my request for hompage:



This request for the topic:

i think she need space between categories and widgets and so on where she pointed in her picture's

Ok add this in your CSS:

Code:

.module {
margin-right: 10px!important;
}
.forabg{
margin-left: 5px!important;
}
.post {
border-radius:4px;
margin-left: 5px;
}
span.corners-top {
background-image: none!important;
}
span.corners-top span {
background-image: none!important;
}

and submit it!

Hello,

Code:

.module {
margin-right: 10px!important;
}
.forabg{
margin-left: 5px!important;
}
.post {
border-radius:4px;
margin-left: 5px;
}


I do not know how the code work but I have to remove two codes from bottom. And I am still using small images to round corners for homepage. May my requests so difficult to understand.

Can we go to the second one?

My current post profile looks like left image. Now, I want to change something (see my notes) to have my post profile looks like the right image.

Please noted that all in colors (I do not want to use image) and round (4) corners post profile as well. Please apply the colors you want, I will change them later.
I also need to move online status to right side of post profile. It will be showed as per Forumotion forum.



Thank you very much!

Bump

for the profile create a new javascript and use this
placement : in topics

Code:


$(function(){
$('.postprofile dt').eq(0).wrap(' <span id="pcolbg1"> ');
$('.postprofile dd').eq(0).wrap(' <span id="pcolbg1"> ');
$('.postprofile #pcolbg1').wrapAll(' <span id="pcolbg2"> ');
});


css

Code:


#pcolbg2 {
  padding-top:5px;
    display: block;
    background: none repeat scroll 0% 0% green;
    text-align: center;
    border-radius: 5px 5px 0px 0px;
}
#pcolbg2 dt,#pcolbg2 dd{margin:0px}
.postprofile{
 background-color:gray
   border-radius: 5px 5px 0px 0px;
}


for your spacing
css

Code:


#content{margin:5px}
.module{margin-bottom:5px;}
.post{margin-bottom:5px;}


Hi @_Twisted_Mods_,

Everything looks good now. Expect the second color underneath of avatar. It did not show up.

sorry i missed a ;

and we add important just incase

just replace the other one

Code:

.postprofile{
 background-color:gray!important;
   border-radius: 5px 5px 0px 0px;
}

First post of topic looks okay. The next post, the second color is fullfill on profile.

Please see this topic: http://cotuong.forumvi.com/t1-topic

Chị người việt nam nên vào http://devs.cf lấy mod