[Solved] Best Answer Box under topic title

J0k3R^

Advance Member

Status :

ZN SXOLH est. 1997

Posts :

260

Posted Tue May 20, 2014 3:20 pm

Details: Hi, i want to make this best answer like the image.

best answer - [Solved] Best Answer Box under topic title SyxYloX

im using punbb. i tried ur codes here http://help.forumotion.com/t133103-how-can-i-add-best-answer-box-under-the-titlebox but nothing worked for me. Also, im using some codes for 'best answer' background but they dont affect....

best answer - [Solved] Best Answer Box under topic title RjR1m8F

best answer - [Solved] Best Answer Box under topic title RjR1m8F

Spoiler:

Wow ! I love this Thaank you for this for support. :)

Forum Address: http://myplanet.forumgreek.com
Forum Version: punbb

Grafix

Management Team

Status :

Im Watching You Spammer :)

Posts :

1596

Posted Wed May 21, 2014 9:50 am

can you give me your Viewtopic_body ?

J0k3R^

Advance Member

Status :

ZN SXOLH est. 1997

Posts :

260

Posted Wed May 21, 2014 12:12 pm

yeah but i sent u PM for this, i cant post it in public, thankz :)

Grafix

Management Team

Status :

Im Watching You Spammer :)

Posts :

1596

Posted Wed May 21, 2014 12:27 pm

Add this to your Javascript

Code:: $(function(){ $('.posthead[style="background-color:#e9f7e1;"]').append('<div id="best-res" class="answerBadgeInPost">✓ Best Answer</div>').attr('style','background-image: -moz-linear-gradient(top, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.3)), color-stop(100%,rgba(255,255,255,0))); background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);background-image: -o-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);background-image: -ms-linear-gradient(top, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0) 100%);-webkit-box-shadow: inset rgba(255,255,255,0.35) 0px 1px 0px;-moz-box-shadow: inset rgba(255,255,255,0.35) 0px 1px 0px;box-shadow: inset rgba(255,255,255,0.35) 0px 1px 0px;background: #dfedd1;text-shadow: rgba(255,255,255,0.8) 0px 1px 0px;border: 1px solid #accf8b;'); var topicauthor = $('.post #best-res').parents('.post').find('.user .username a').html(); var topicavatar = $('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a img').attr('src'); var urlavt= $('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a').attr('href'); var topicpost = $('.post #best-res').parents('.post').find('.posthead a').attr('href'); var topicdata = $('.post #best-res').parents('.post').find('.posthead h2 .data-post').html(); var bestTopic = $('.post #best-res').parents('.post').find('.entry-content').html(); if($('#best-res').length){ $('.main.paged').before('<div class="post_feature_box"> <span class="ipsUserPhoto"><img src="'+topicavatar+'" /></span> <span class="ipsBadge">Best Answer</span> '+topicauthor+', '+topicdata+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline-block;">'+bestTopic+'</div><a href="'+topicpost+'"> <span class="ipsBadge" style="background: #B3B3B3;font-weight: normal !important;">View Full Post <img class="icon" src="http://i.imgur.com/omzqZnf.png"></span></a> </div>');} });

after that add this CSS

Code:: .post_feature_box { margin-top: 5px; max-width:100%; background-color: rgb(234, 248, 226); border: 1px dotted rgb(51, 51, 51); padding: 6px; min-height: 60px; } #best-res { color: #436500; background: #dfedd1; text-shadow: rgba(255,255,255,0.8) 0px 1px 0px; border: 1px solid #accf8b; border-top: 0; padding: 0 12px; height: 30px; line-height: 30px; position: relative; float: right; margin: -1px -2px 8px 8px; -webkit-border-bottom-left-radius: 3px; -webkit-border-bottom-right-radius: 3px; -moz-border-radius: 0px 0px 3px 3px; border-radius: 0px 0px 3px 3px; } .ipsUserPhoto { float: left; padding: 1px; border: 1px solid #d5d5d5; background: #fff; -webkit-box-shadow: 0px 2px 2px rgba(0,0,0,0.1); -moz-box-shadow: 0px 2px 2px rgba(0,0,0,0.1); box-shadow: 0px 2px 2px rgba(0,0,0,0.1); margin-right: 8px; } .ipsUserPhoto:hover { border-color: #7d7d7d; } .ipsUserPhoto img { width: 50px; height: 50px; } .ipsBadge { background: #7ba60d; display: inline-block; height: 16px; line-height: 16px; padding: 0 5px; font-size: 9px; font-weight: bold; text-transform: uppercase; color: #fff; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; vertical-align: middle; margin-right: 8px; }

then go to your CSS > Thank Message color > #e9f7e1

Dont forget to Press The Thank Button :)

J0k3R^

Advance Member

Status :

ZN SXOLH est. 1997

Posts :

260

Posted Wed May 21, 2014 12:54 pm

almost my friend. how can i remove the background color of the thanked post? (with the code i was using, it was normal and not colored (green) :)
and something last that i noticed: why do it says "null, null" ?

best answer - [Solved] Best Answer Box under topic title 5ZCTq8n

best answer - [Solved] Best Answer Box under topic title 5ZCTq8n

Thankz a lot for the support!

Grafix

Management Team

Status :

Im Watching You Spammer :)

Posts :

1596

Posted Wed May 21, 2014 1:06 pm

If you dont want it find this .post_feature_box in CSS then delete this

Code:: { background-color: #EAF8E2;}

i see because null type means no name :)

replace the JS with this

Code:: $(function(){$('.posthead[style="background-color:#e9f7e1;"]').append('<div id="best-res" class="answerBadgeInPost">✓ Best Answer</div>').attr('style','background-image:-moz-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.3)),color-stop(100%,rgba(255,255,255,0)));background-image:-webkit-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-o-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:-ms-linear-gradient(top,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);background-image:linear-gradient(to bottom,rgba(255,255,255,0.3)0%,rgba(255,255,255,0)100%);-webkit-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;-moz-box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;box-shadow:inset rgba(255,255,255,0.35)0px 1px 0px;background:#dfedd1;text-shadow:rgba(255,255,255,0.8)0px 1px 0px;border:1px solid#accf8b;');var topicauthor=$('.post #best-res').parents('.post').find('.author').html();var topicavatar=$('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a img').attr('src');var urlavt=$('.post #best-res').parents('.post').find('.postmain .postbody .user .user-ident .user-basic-info a').attr('href');var topicpost=$('.post #best-res').parents('.post').find('h3 a').attr('href');var topicdata=$('.post #best-res').parents('.post').find('.published').html();var bestTopic=$('.post #best-res').parents('.post').find('.entry-content div').last().prev().html();if($('#best-res').length){$('.main.paged').before('<div class="post_feature_box"><span class="ipsUserPhoto"><img src="'+topicavatar+'"/></span><span class="ipsBadge">Best Answer</span> '+topicauthor+', '+topicdata+'<div style="border: 1px solid #ddd; border-bottom: 1px solid #ececec; margin: 3px;"></div><div style="display: inline;">'+bestTopic+'</div><a href="'+topicpost+'"><br><span class="ipsBadge"style="background: #B3B3B3;font-weight: normal !important;">View Full Post<img class="icon"src="http://i57.servimg.com/u/f57/17/68/86/50/omzqzn10.png"></span></a></div>')}});

J0k3R^

Advance Member

Status :

ZN SXOLH est. 1997

Posts :

260

Posted Wed May 21, 2014 1:17 pm

u didnt understand me :D
i want to remove the green background of the thanked post.
the code that i was using before (check the first post) had made the background of the thanked post to be normal and not green.
how can we do it again with your code?

best answer - [Solved] Best Answer Box under topic title RMw0F2v

best answer - [Solved] Best Answer Box under topic title RMw0F2v

2. i pasted this js but still "null" appears.

Thankss in advance

Grafix

Management Team

Status :

Im Watching You Spammer :)

Posts :

1596

Posted Wed May 21, 2014 1:29 pm

Oh sorry :) ok

you cant delete the color because there is already a variable which is

{postrow.displayed.THANK_BGCOLOR}

that connected in JS and your Viewtopic_body :)

J0k3R^

Advance Member

Status :

ZN SXOLH est. 1997

Posts :

260

Posted Wed May 21, 2014 1:36 pm

i got x4 codes in viewtopic_body called

Code:: {postrow.displayed.THANK_BGCOLOR}

ive sent u a PM with my viewtopic, could u check it again and tell me after which one should i delete?

Grafix

Management Team

Status :

Im Watching You Spammer :)

Posts :

1596

Posted Wed May 21, 2014 1:44 pm

find this

Code:: <div class="postmain"{postrow.displayed.THANK_BGCOLOR}>

then replace with this

Code:: <div class="postmain">

Sponsored content

Posted

[Solved] Best Answer Box under topic title

J0k3R^

Grafix

J0k3R^

Grafix

J0k3R^

Grafix

J0k3R^

Grafix

J0k3R^

Grafix

Sponsored content

what most do you like? [5vote ]

Fast Navigation

1	#1
2	#2
Discover : #i<3socialacademyforum \| #themesIPB<3 \| #Javascript

Url
BBcode
HTML