The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Need help to change style of post profile and topic

View previous topic View next topic Go down

Need help to change style of post profile and topic

Post by HaPham on 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.



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

HaPham
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

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

add this to your css

Code:

.online .postprofile {
    background-image: url("http://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

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

Post by HaPham on 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



Thank you!

HaPham
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

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

Anybody help?

HaPham
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

Post by _Twisted_Mods_ on 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://illiweb.com/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_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

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

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

Dear Mr. Twisted_Mods,

Code:
.online .postprofile {
    background-image: url("http://illiweb.com/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://illiweb.com/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://illiweb.com/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://illiweb.com/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).


HaPham
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

Post by HaPham on 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
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

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

Dear @Ange Tuteur!

Three days left. Please help!

Thank you!

HaPham
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

Post by Luffy on 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.






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

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

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

I already fixed a little bit in the APC setting.

Here is my request for hompage:



This request for the topic:


HaPham
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

Post by mist3r0us_b0y on 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
Forumember

Male Posts : 747
Reputation : 19
Language : english

http://sh.st/nJRXG

Back to top Go down

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

Post by Luffy on 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!






Luffy
Manager
Manager

Male Posts : 4245
Reputation : 424
Language : Greek, English
Location : Greece

http://helpgr.forumgreek.com/forum

Back to top Go down

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

Post by HaPham on 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.



Thank you very much!

HaPham
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

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

Bump

HaPham
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

Post by _Twisted_Mods_ on 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_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

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

Post by HaPham on 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.


HaPham
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

Post by _Twisted_Mods_ on 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_
Helper
Helper

Male Posts : 2032
Reputation : 302
Language : English
Location : Ms

http://liquidcode.forumotion.com

Back to top Go down

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

Post by HaPham on 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
New Member

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

http://cotuong.forumvi.com

Back to top Go down

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

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

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

phutu01
Forumember

Posts : 48
Reputation : 3
Language : 123

http://phutu.7forum.net

Back to top Go down

View previous topic View next topic Back to top


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