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.

Need help to change style of post profile and topic

5 posters

Go down

Need help to change style of post profile and topic Empty Need help to change style of post profile and topic

Post by HaPham December 25th 2014, 7:51 pm

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.

Need help to change style of post profile and topic 10863854_1380164562284037_5499071485457518434_o

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

Need help to change style of post profile and topic 10873021_1380164628950697_5593931670370931845_o

- 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!
HaPham
HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by _Twisted_Mods_ December 25th 2014, 9:47 pm

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

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by HaPham December 26th 2014, 12:11 am

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

Need help to change style of post profile and topic 10847224_1380370992263394_3964145865029597855_o

Thank you!
HaPham
HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by HaPham December 26th 2014, 10:57 pm

Anybody help?
HaPham
HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by _Twisted_Mods_ December 27th 2014, 12:21 am

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

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by HaPham December 27th 2014, 2:03 am

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.
Need help to change style of post profile and topic 10869585_686683161445629_2922063357857952293_o

In the topic, Here is better. We got some rounds at the corners. However, the spaces that I requested, they did not show up.
Need help to change style of post profile and topic 1491317_686683164778962_7741756954290037683_o

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

Need help to change style of post profile and topic 10873021_1380164628950697_5593931670370931845_o
HaPham
HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by HaPham December 28th 2014, 4:56 pm

Dear Forumotion team,

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

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by HaPham December 29th 2014, 11:07 am

Dear @Ange Tuteur!

Three days left. Please help!

Thank you!
HaPham
HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by TheCrow December 29th 2014, 11:14 am

Hello,

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

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by HaPham December 29th 2014, 11:49 am

I already fixed a little bit in the APC setting.

Here is my request for hompage:

Need help to change style of post profile and topic 10838138_688590814588197_4662408149914710592_o

This request for the topic:

Need help to change style of post profile and topic 10648222_688590764588202_6619833998897703143_o
HaPham
HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by mist3r0us_b0y December 29th 2014, 12:39 pm

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

Male Posts : 747
Reputation : 19
Language : english

http://sh.st/nJRXG

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by TheCrow December 29th 2014, 1:18 pm

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!
TheCrow
TheCrow
Manager
Manager

Male Posts : 6898
Reputation : 794
Language : Greek, English

https://forumote.forumotion.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by HaPham December 29th 2014, 6:35 pm

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.

Need help to change style of post profile and topic 10869851_688749597905652_8672831364662324984_o

Thank you very much!
HaPham
HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by HaPham December 30th 2014, 6:41 pm

Bump
HaPham
HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by _Twisted_Mods_ December 31st 2014, 4:56 am

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

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by HaPham December 31st 2014, 8:56 am


Hi @_Twisted_Mods_,

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

Need help to change style of post profile and topic 10888917_690156334431645_3886387737162310809_n
HaPham
HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by _Twisted_Mods_ December 31st 2014, 9:38 am

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

Male Posts : 2108
Reputation : 336
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by HaPham December 31st 2014, 10:33 am

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


Last edited by HaPham on December 31st 2014, 3:51 pm; edited 1 time in total
HaPham
HaPham
New Member

Posts : 18
Reputation : 6
Language : Ho Chi Minh City

http://cotuong.forumvi.com

Back to top Go down

Need help to change style of post profile and topic Empty Re: Need help to change style of post profile and topic

Post by phutu01 December 31st 2014, 11:26 am

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

Posts : 48
Reputation : 3
Language : 123

http://phutu.7forum.net

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum