Split replies/views like vb3

[peugeot405]

This mod splits replies/views on threadbit like on a vb3 forum.

changelog:

v1.0
initial release

v1.1
updated the css code

v1.2
updated the css code

v1.3
updated the css code

Two files are included in the zip-file:

split_replies_views_like_vb3_v_1_3.txt for new install
split_replies_views_like_vb3_ updatev1_2_to_v1_3.txt to update from v1.2 to v1.3


Added a fix for new post search in what's new, caussed by the changes from split replies/views like vb3.

[Amaury]

Thanks for this and the other one! :)

If you don't mind my asking, why did the Threads and Posts modification take more template edits?

[peugeot405]

There's more templates because threads and post are shown both on forumhome (index) and forumdisplay (category.).

Replies and views is only shown on forumdisplay (forum/subforum)

[Amaury]

Any way to keep the alternate background along the whole Replies and Views columns like it was with the default Replies / Views instead of just on sticky threads?

I removed the threadbit alt code in additional.css that had the background as transparent, but doing that only filled part of the row for each thread with the alternate background.

[peugeot405]

sure, no problem

open additional.css

find following:
code:

.threadbit .alt {
background:none;
}

replace with:
code:

.threadbit .alt {
background: url("images/gradients/grey-up.png") repeat-x scroll left bottom #F2F6F8;
}

[Amaury]

sure, no problem

open additional.css

find following:
code:

.threadbit .alt {
background:none;
}replace with:
code:

.threadbit .alt {
background: url("images/gradients/grey-up.png") repeat-x scroll left bottom #F2F6F8;
}

That's not exactly what I meant, as it only fills part of the area. It's probably something in the threadbit changes done. However, our other staff doesn't really like this, so I'm removing it since we do votes on modifications.

Nothing personal against you. This is still a great thing overall, but it's just not for us. :)

[peugeot405]

That's not exactly what I meant, as it only fills part of the area. It's probably something in the threadbit changes done. However, our other staff doesn't really like this, so I'm removing it since we do votes on modifications.

Nothing personal against you. This is still a great thing overall, but it's just not for us. :)

no problem.

if you change your mind, here's the code:

.threadbit .nonsticky, .threadbit .discussionrow {
background: url("images/gradients/grey-up.png") repeat-x scroll left bottom #F2F6F8;
}

[Amaury]

no problem.

if you change your mind, here's the code:

.threadbit .nonsticky, .threadbit .discussionrow {
background: url("images/gradients/grey-up.png") repeat-x scroll left bottom #F2F6F8;
}

Thank you. :)

Think you could provide some screenshots of that for the reference?

[peugeot405]

If I understood correctly you want the gray section you see in the pic threadbit1 but then over the full lenght like in pic threadbit2

145617

145618

note: I used a different color to show what section is meant.

with the original color it wold like the pic threadbit3.

145619

The code is following:

.threadbit .alt {
background: none;
}
.threadbit .nonsticky, .threadbit .discussionrow {
background: url("images/gradients/grey-up.png") repeat-x scroll left bottom #F2F6F8;
}

[Amaury]

Thanks for the reply.

This is how it looks by default: http://i.imgur.com/IeXkm3b.png

With your changes, the style variable threadbit_alt_background only affected the Replies and Views columns containing sticky threads: http://i.imgur.com/HjQ4WE7.png

The text being gone and borders not being there are not part of it, obviously. That's just the best I could do with Paint to show you since I already reverted the changes. :)

[peugeot405]

ok i'll have a look on your site.

The style you changed is KH-Flare 2.0 dark?

[Amaury]

The style you changed is KH-Flare 2.0 dark?

No, I reverted the changes this morning.

Do you need me to make the changes again? I can do so on a test style.

[peugeot405]

If it's not to much trouble, with the same colors.

It's strange because it's seems to work on my site

145620

don't mind the text and border colors, just a quick test :)

[peugeot405]

ok I'm looking at the teststyle now.

I see the sticky post darker then the others, and you want the same color for both right?

[Amaury]

If it's not to much trouble, with the same colors.

It's strange because it's seems to work on my site

145620

don't mind the text and border colors, just a quick test :)

Done.
Switch to Test Style using the bottom Quick Style Chooser (I don't have it in the sub-navigation dropdown since it's only for tests)
Go to a forum on there that contains at least one sticky thread, such as the Spam Sector
Look at the Replies and Views columns
Switch back to KH-Flare 2.0 [Dark] and look at the Replies / Views column
Compare the two styles

[peugeot405]

ok I'm looking at the teststyle now.

I see the sticky post darker then the others, and you want the same color for both right?

normally following code should work

.threadbit .nonsticky, .threadbit .discussionrow {
background: url("http://www.kh-flare.net/images/gradients/grey-up.png") repeat-x scroll left bottom #0F0F0F;
}

If not you need to check if you made changes somewere else, it could overwrite the one you add.
If added in additional.css it should overwrite everything else unless you have that code on the same template twice.

when on testsite i can't swith to another style

[Amaury]

when on testsite i can't swith to another style

That's weird. Here are direct links:
KH-Flare 2.0 [Dark] (http://www.kh-flare.net/forum.php?styleid=167)
Test Style (http://www.kh-flare.net/forum.php?styleid=195)

I'll try that code.

Edit: That code just makes threadbit_background the same as threadbit_hilite_background and threadbit_alt_background.

[peugeot405]

and how execly do you want it to be

you want sticky to be like non sticky?

[Amaury]

and how execly do you want it to be

you want sticky to be like non sticky?

See my directions in post #15. I want the Replies and Views columns to look like the Replies / Views column on 2.0 Dark.

[peugeot405]

ok try this on your teststyle

.threadbit .nonsticky, .threadbit .discussionrow {
background: url("http://www.kh-flare.net/images/gradients/grey-up.png") repeat-x scroll left bottom #141414;
}
.threadbit .sticky {
background: url("http://www.kh-flare.net/images/gradients/grey-up.png") repeat-x scroll left bottom #141414;
}
.threadbit .threadstats {
background: url("http://www.kh-flare.net/images/gradients/grey-up.png") repeat-x scroll left bottom #0F0F0F;
height: 20px;
padding-top: 18px;
text-align: center;
width: 7%;
}

if it works add this on the KH-flare 2.0 dark

.threadbit .sticky {
background: url("http://www.kh-flare.net/images/gradients/grey-up.png") repeat-x scroll left bottom #141414;
}

[Amaury]

ok try this on your teststyle

.threadbit .nonsticky, .threadbit .discussionrow {
background: url("http://www.kh-flare.net/images/gradients/grey-up.png") repeat-x scroll left bottom #141414;
}
.threadbit .sticky {
background: url("http://www.kh-flare.net/images/gradients/grey-up.png") repeat-x scroll left bottom #141414;
}
.threadbit .threadstats {
background: url("http://www.kh-flare.net/images/gradients/grey-up.png") repeat-x scroll left bottom #0F0F0F;
height: 20px;
padding-top: 18px;
text-align: center;
width: 7%;
}if it works add this on the KH-flare 2.0 dark

.threadbit .sticky {
background: url("http://www.kh-flare.net/images/gradients/grey-up.png") repeat-x scroll left bottom #141414;
}

Nope.

That's fine, though. Like I said, the other staff doesn't want it, and it wasn't removed because of this.

[peugeot405]

strange i use firebug and it works.

did you overwrite the codes or just added it in additional.css

I'll have another look tomorrow.

[Amaury]

strange i use firebug and it works.

did you overwrite the codes or just added it in additional.css

I'll have another look tomorrow.

additional.css.

[peugeot405]

You can change the colors in style variable editor

In the threadbit section change following:

threadbit_alt_background:

Background Color: #0f0f0f
Background Image: url("http://www.kh-flare.net/images/gradients/grey-up.png")


threadbit_background:

Background Color: #141414
Background Image: url("http://www.kh-flare.net/images/gradients/grey-up.png")


threadbit_hilite_background:

Background Color: #0f0f0f
Background Image: url("http://www.kh-flare.net/images/gradients/grey-up.png")

[peugeot405]

Updated to version 1.1

see first post for details

[fai99al99]

RTL plz

thanks

[peugeot405]

updated to v1.2

updated screenshots

[stevieb]

Does this work with vB 4.2.0? And will it knacker the tables/styles? I'm using standard vB 4.2 skin.

[peugeot405]

Does this work with vB 4.2.0? And will it knacker the tables/styles? I'm using standard vB 4.2 skin.

It does work on vb 4.2.0

[stevieb]

Thanks - deffo won't break the default skin no?

Have you done it? Any chance of a screenprint/link to forum to look?

Thanks

[peugeot405]

Thanks - deffo won't break the default skin no?

Have you done it? Any chance of a screenprint/link to forum to look?

Thanks

I have tested it both on vb 4.2.0 and vb 4.2.1

screenshot is in first post

[stevieb]

Hi

Tried this and there is an error or two....

First - the replies and views are not side by side - they ought to be in a column, they're not!

forumdisplay page:

145938

How do I remove the shaded area around the replies/views?

Second - the new posts link (search.php) puts the forum name below when it used to be at the end or gone altogether.

145939

Clearly this does not work for default vB 4.2.0 installations does it! :down:

[peugeot405]

i installed on both vb 4.2.0 and 4.2.1 and is working fine.

If seems that you missed 1 or more step(s) when installing.

Can you post your link to the site please.

[stevieb]

I didn't miss any steps, lol - I can follow instructions! :)

I'm saying this is not compatible with vB 4.2.0 default - end of - evidence is there above you!

I have removed it from the site, too many complaints. From the images can you not see what the error is? Sorry but something isn't sitting right with it.

[stevieb]

The threads should look like this - in their original form

forumdisplay page:
145941

Search Page results:
145940

[peugeot405]

true, the new posts link (search) needs to be looked in to.

the forum display is working correctly for me.

145942

[stevieb]

true, the new posts link (search) needs to be looked in to.

the forum display is working correctly for me.

145942 Hmmm, I dunno - I have PM'd a link to my site but obviously removed this hack in the meantime :)

Happy to PM you the full code in my forumdisplay and threadbit so you can see/test it/add the code etc if you like?

[peugeot405]

did you make any other changes on those files?

[stevieb]

did you make any other changes on those files?

Nope they were only red after the changes here :)

Want a copy of the actual code in both files? You can then add it yourself, I'll load it and see if that does it? Any help appreciated mate :)

[peugeot405]

hold on a few secs.

just finished updating to v1.3, i'm going to test it.

[stevieb]

hold on a few secs.

just finished updating to v1.3, i'm going to test it.

ok thanks mate :)

[peugeot405]

i've made a copy of my threadbit and forumdisplay and additional.css

[stevieb]

I've reloaded the new version (v1.3) to the site, it's still the same - I have left it for now so you can go check out my site if you wanted to..

Thanks :)

[stevieb]

i've made a copy of my threadbit and forumdisplay and additional.css

Ok just added all your files, same output with same errors (take a look).....

[peugeot405]

It is something with the coding in addition.css

Have you added some coding before adding mine?

I've been looking at your additional.css and it seems some parts are missing, very strange.

[stevieb]

It is something with the coding in addition.css

Have you added some coding before adding mine?

Ooooh yea lol - I have lots of additional css in there

Want to see it...?

It's all headed so you can see what I have done and where.... :)

/#################### Postbit_Legacy ####################/

.postbit_invisible {
background: url("images/postbit_invisible.png") repeat scroll 0 0 #474747;
margin-top: 2px;
text-align: left;
margin-top: 2px;
margin-bottom: -2px;
font-size: 13px;
padding: 0 4px 0;
color: #FFF;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px; }

.postbit_invisible dd { float: right; }

.postbit_online {
background: url("images/postbit_online.png") repeat scroll 0 0 #d20303;
margin-top: 2px;
text-align: left;
margin-top: 2px;
margin-bottom: -2px;
font-size: 13px;
padding: 0 4px 0;
color: #fff;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px; }

.postbit_online dd { float: right; }

.postbit_offline {
background: url("images/postbit_offline.png") repeat scroll 0 0 #86c901;
margin-top: 2px;
text-align: left;
margin-top: 2px;
margin-bottom: -2px;
font-size: 13px;
padding: 0 4px 0;
color: #fff;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px; }

.postbit_offline dd { float: right; }

.postbitlegacy .userinfo {
background: none repeat scroll 0 0 #E5E3E3;
border: 1px solid #D1CFCF;
margin: 5px;
padding: 3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 5px 1px #E2E2E2;
-moz-box-shadow: 0px 0px 5px 1px #E2E2E2;
box-shadow: 0px 0px 5px 1px #E2E2E2; }


.etiket_postbit_alanI_imlinks {
background: none repeat scroll 0 0 transparent;
border: 0px solid #DDDDDD;
text-align: center;
margin-top: 2px;
padding: 2px 6px 0 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.etiket_postbit_alanI_imlinks :hover {
background: #6DB53E;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }

.etiket_postbit_alanI_userinfo_extra_yazIlarI {
color:{vb:stylevar post_field_font_color};
margin-top: 2px;
text-align:left;
border-bottom: 1px solid #DBDBDB;}

.etiket_postbit_alanI_userinfo_extra_yazIlarI dd { float: right;}


.etiket_postbit_alanI_userinfo_extra {
background: url("images/postbit_avatar.png") repeat scroll center center transparent;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
margin-top: 2px;
padding: 0 4px 6px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;}

.etiket_postbit_alanI_postbit_reputation {
background: url("images/postbit_rank.png") repeat scroll center center transparent;
border: 1px solid #DDDDDD;
margin-top: 2px;
padding: 2px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.etiket_postbit_alanI_rank {
background: url("images/postbit_rank.png") repeat scroll center center transparent;
border: 1px solid #DDDDDD;
margin-top: 2px;
padding: 2px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }

.etiket_postbit_alanI_usertitle {
background: url("images/postbit_rank.png") repeat scroll center center transparent;
border: 1px solid #DDDDDD;
margin-top: 2px;
font-size: 13px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}


.etiket_postbit_alanI_username {
background: url("images/postbit_rank.png") repeat scroll center center transparent;
border: 1px solid #DDDDDD;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.postbitlegacy .userinfo .postuseravatar, .postuseravatar img {
background: url("images/postbit_avatar.png") repeat scroll 0 0 transparent;
float: none;
padding: 4px;
text-align: center;
border: 1px solid #DDDDDD;
margin: 2px 1px 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.postbitlegacy .userinfo .username_container { margin-bottom: 1px; }

.postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #F2F6F8;
margin-top: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }

.postcontainer .username_container .popupmenu a.popupctrl { font-size: 19px; }

.postbitlegacy .postbody, .eventbit .eventdetails .eventbody {border-left: 0px solid #EFEFEF;}

.postbitlegacy .postdetails, .eventbit .eventdetails { background: {vb:stylevar postbit_background};}

.postbit .posttitle, .postbitlegacy .title {
background: url("images/postbit_rank.png") repeat scroll center center transparent;
-webkit-border-radius: 5px 0 0 5px;;
-moz-border-radius: 5px 0 0 5px;;
border-radius: 5px 0 0 5px;;
border: 1px solid #E9E9E9;
margin-bottom: 5px;
margin-right: -10px;
padding: 5px;}
/#################### Postbit_Legacy ####################/



/#################### Custom Buttons ####################/

.custom_forum_button {
background: {vb:stylevar control_content_background};
_background-image: none;
-moz-border-radius: {vb:stylevar control_content_radius};
-webkit-border-radius: {vb:stylevar control_content_radius};
-moz-box-shadow: 0 3px 8px {vb:stylevar control_content_shadow_color};
-webkit-box-shadow: 0 3px 8px {vb:stylevar control_content_shadow_color};
font: {vb:stylevar control_content_font};
color: {vb:stylevar control_content_color};
padding: {vb:stylevar control_content_padding};
border: {vb:stylevar control_content_border};
display:inline-block;
}

/#################### Custom Buttons ####################/

/#################### Rounded Corner Notices ####################/

.notices li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

/#################### Rounded Corner Notices ####################/

/#################### Insert pop-up image to url's ####################/

/* .signature a {
margin: 0px;
padding-right: 15px;
background-image: url('/images/link1.gif');
background-position:right center;
background-repeat: no-repeat;

} */

.postcontent a {
margin: 0px;
padding-right: 15px;
background-image: url('/images/link1.gif');
background-position:right center;
background-repeat: no-repeat;

}

/#################### Insert pop-up image to url's ####################/

/#################### Fixed Avatar CSS ####################/

.cms_widget .widget_post_useravatar img, .block .widget_post_useravatar img {
margin-top:2px;
display: block;
height: 36px;
position: absolute;
box-shadow: 0px 1px 1px #FF8800;
}
.postbit-lite .avatarlink img {
border: 1px solid #ddd;
width: 60px;
height: 60px;
}

ul.userlist_showavatars img {
border: 1px solid #ddd;
width: 60px;
height: 60px;
}
#memberlist td.profilepic img, #memberlist img.avatar {
width: 40px;
height: 40px;
}
.member_summary .friends_mini .friends_list li img {
width: 48px;
}

.postbit-lite .avatarlink img {
width: 58px;
height: 58px;
}

.activitybit .avatar img {
width: 58px;
height: 58px;
}

/#################### Fixed Avatar CSS ####################/

/#################### Breadcrumbs ####################/

.bread_box {
margin: 0;
overflow: hidden;
clear: both;
}
.breadcrumb {
position: relative;
font: 11px Arial,Calibri,Verdana,Geneva,sans-serif;
background: {vb:stylevar sidebar_background};
border: {vb:stylevar sidebar_border}; /* this is the border color that's around the whole thing */
-moz-border-radius:{vb:stylevar border_radius};
-webkit-border-radius: {vb:stylevar border_radius};
border-radius: {vb:stylevar border_radius};
overflow: hidden;
}
.breadcrumb .crust {
display: block;
float: left;
position: relative;
}
.breadcrumb .crust:first-child a.crumb {
padding-left: 13px;
-moz-border-radius-topleft:{vb:stylevar border_radius};
-moz-border-radius-bottomleft:{vb:stylevar border_radius};
-webkit-border-top-left-radius: {vb:stylevar border_radius};
-webkit-border-bottom-left-radius: {vb:stylevar border_radius};
border-top-left-radius: {vb:stylevar border_radius};
border-bottom-left-radius: {vb:stylevar border_radius};
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
text-decoration: none;
background-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the background color of the CRUMBS, ie: the links */
padding: 0 10px 0 23px;
border-bottom: {vb:stylevar sidebar_border}; /* this is the same as the border value higher up, this only shows if the last crumb causes it to overflow */
margin-bottom: -1px;
outline: 0 none;
-moz-outline-style: 0 none;
display: block;
line-height: 22px;
_border-bottom: none;
color:{vb:stylevar link_color}; /* this is the color of the links in the crumbs */
text-decoration:{vb:stylevar link_textDecoration};
}
.breadcrumb .crust b.lastcrumb {
background: transparent none;
color: {vb:stylevar footer_time_color}; /* this is the color of the last crumb, ie: the final destination */
font-weight: bold;
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
line-height: 22px;
}
.breadcrumb .crust .arrow {
border: 12px solid transparent;
border-right: 1px none black;
border-left: {vb:stylevar sidebar_border}; /* this is the _background_ color of the "arrow" */
border-left-width: 12px !important;
border-left-style: solid !important;
display: block;
position: absolute;
right: -12px;
top: -1px;
z-index: 50;
width: 0px;
height: 0px;
}
.breadcrumb .crust .arrow span {
border: 12px solid transparent;
border-right: 1px none black;
border-left-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the border color of the "arrow" */
display: block;
position: absolute;
left: -13px;
top: -12px;
z-index: 51;
white-space: nowrap;
overflow: hidden;
text-indent: 9999px;
width: 0px;
height: 0px;
}
.breadcrumb .refresh:hover { background-position: 0px -16px; }
.breadcrumb .crust:last-child a.crumb { font-weight: bold; }
.breadcrumb .crust:hover a.crumb {
background-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the background color of the crumb when it's hovered */
color:{vb:stylevar linkhover_color}; /* likewise, this is the color of the crumb's link when hovered */
text-decoration:{vb:stylevar linkhover_textDecoration};
}
.breadcrumb .crust:hover .arrow span {
border-left-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the color of the "arrow" when hovered. It should be identical to the `.breadcrumb .crust:hover a.crumb` background value */
}

/#################### Breadcrumbs ####################/

/#################### New WGO Collapse ####################/

.wgo_block .blockhead a.collapse {
position: absolute;
top: {vb:math {vb:math {vb:math {vb:stylevar padding}+{vb:math {vb:stylevar mid_fontSize}*{vb:stylevar line_height}}-13}/2}+1};
}

.wgo_block .blockhead a.collapse img {
/* values are based on the image */
position:absolute;
{vb:stylevar right}: -{vb:math {vb:stylevar padding} * 0.6};
display:block;
width:13px;
height:13px;
overflow:hidden;
top:-5px;
float: {vb:stylevar right};
clear: {vb:stylevar left};
}
/#################### New WGO Collapse ####################/

/#################### New Start ####################/
/* Split replies/views like vb3*/
.threadbit .threadstats {
height: 29px;
padding: 1.2% 0 0;
text-align: center;
width: 7%;
}
.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
padding: 0.5% 0 0;
width: 33%;
}
.threadbit .threadstats li {
margin-right: 0;
}
.threadbit .threadinfo {
min-width: 350px;
width: 50%;
}
.threadlisthead span.threadinfo {
width: 50%;
}
.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: left;
width: 33%;
}
.threadlisthead span.threadstats {
text-align: center;
width: 7%;
}
/* Split replies/views like vb3*/

[peugeot405]

try this:

/#################### Postbit_Legacy ####################/

.postbit_invisible {
background: url("images/postbit_invisible.png") repeat scroll 0 0 #474747;
margin-top: 2px;
text-align: left;
margin-top: 2px;
margin-bottom: -2px;
font-size: 13px;
padding: 0 4px 0;
color: #FFF;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px; }

.postbit_invisible dd { float: right; }

.postbit_online {
background: url("images/postbit_online.png") repeat scroll 0 0 #d20303;
margin-top: 2px;
text-align: left;
margin-top: 2px;
margin-bottom: -2px;
font-size: 13px;
padding: 0 4px 0;
color: #fff;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px; }

.postbit_online dd { float: right; }

.postbit_offline {
background: url("images/postbit_offline.png") repeat scroll 0 0 #86c901;
margin-top: 2px;
text-align: left;
margin-top: 2px;
margin-bottom: -2px;
font-size: 13px;
padding: 0 4px 0;
color: #fff;
border-top: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px; }

.postbit_offline dd { float: right; }

.postbitlegacy .userinfo {
background: none repeat scroll 0 0 #E5E3E3;
border: 1px solid #D1CFCF;
margin: 5px;
padding: 3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 5px 1px #E2E2E2;
-moz-box-shadow: 0px 0px 5px 1px #E2E2E2;
box-shadow: 0px 0px 5px 1px #E2E2E2; }


.etiket_postbit_alanI_imlinks {
background: none repeat scroll 0 0 transparent;
border: 0px solid #DDDDDD;
text-align: center;
margin-top: 2px;
padding: 2px 6px 0 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.etiket_postbit_alanI_imlinks :hover {
background: #6DB53E;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }

.etiket_postbit_alanI_userinfo_extra_yazIlarI {
color:{vb:stylevar post_field_font_color};
margin-top: 2px;
text-align:left;
border-bottom: 1px solid #DBDBDB;}

.etiket_postbit_alanI_userinfo_extra_yazIlarI dd { float: right;}


.etiket_postbit_alanI_userinfo_extra {
background: url("images/postbit_avatar.png") repeat scroll center center transparent;
border-bottom: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
margin-top: 2px;
padding: 0 4px 6px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;}

.etiket_postbit_alanI_postbit_reputation {
background: url("images/postbit_rank.png") repeat scroll center center transparent;
border: 1px solid #DDDDDD;
margin-top: 2px;
padding: 2px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.etiket_postbit_alanI_rank {
background: url("images/postbit_rank.png") repeat scroll center center transparent;
border: 1px solid #DDDDDD;
margin-top: 2px;
padding: 2px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }

.etiket_postbit_alanI_usertitle {
background: url("images/postbit_rank.png") repeat scroll center center transparent;
border: 1px solid #DDDDDD;
margin-top: 2px;
font-size: 13px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}


.etiket_postbit_alanI_username {
background: url("images/postbit_rank.png") repeat scroll center center transparent;
border: 1px solid #DDDDDD;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.postbitlegacy .userinfo .postuseravatar, .postuseravatar img {
background: url("images/postbit_avatar.png") repeat scroll 0 0 transparent;
float: none;
padding: 4px;
text-align: center;
border: 1px solid #DDDDDD;
margin: 2px 1px 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;}

.postbitlegacy .userinfo .username_container { margin-bottom: 1px; }

.postbitlegacy .userinfo .postuseravatar img, .eventbit .userinfo .eventuseravatar img {
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #F2F6F8;
margin-top: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; }

.postcontainer .username_container .popupmenu a.popupctrl { font-size: 19px; }

.postbitlegacy .postbody, .eventbit .eventdetails .eventbody {border-left: 0px solid #EFEFEF;}

.postbitlegacy .postdetails, .eventbit .eventdetails { background: {vb:stylevar postbit_background};}

.postbit .posttitle, .postbitlegacy .title {
background: url("images/postbit_rank.png") repeat scroll center center transparent;
-webkit-border-radius: 5px 0 0 5px;;
-moz-border-radius: 5px 0 0 5px;;
border-radius: 5px 0 0 5px;;
border: 1px solid #E9E9E9;
margin-bottom: 5px;
margin-right: -10px;
padding: 5px;}
/#################### Postbit_Legacy ####################/



/#################### Custom Buttons ####################/

.custom_forum_button {
background: {vb:stylevar control_content_background};
_background-image: none;
-moz-border-radius: {vb:stylevar control_content_radius};
-webkit-border-radius: {vb:stylevar control_content_radius};
-moz-box-shadow: 0 3px 8px {vb:stylevar control_content_shadow_color};
-webkit-box-shadow: 0 3px 8px {vb:stylevar control_content_shadow_color};
font: {vb:stylevar control_content_font};
color: {vb:stylevar control_content_color};
padding: {vb:stylevar control_content_padding};
border: {vb:stylevar control_content_border};
display:inline-block;
}

/#################### Custom Buttons ####################/

/#################### Rounded Corner Notices ####################/

.notices li {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

/#################### Rounded Corner Notices ####################/

/#################### Insert pop-up image to url's ####################/

/* .signature a {
margin: 0px;
padding-right: 15px;
background-image: url('/images/link1.gif');
background-position:right center;
background-repeat: no-repeat;

} */

.postcontent a {
margin: 0px;
padding-right: 15px;
background-image: url('/images/link1.gif');
background-position:right center;
background-repeat: no-repeat;

}

/#################### Insert pop-up image to url's ####################/

/#################### Fixed Avatar CSS ####################/

.cms_widget .widget_post_useravatar img, .block .widget_post_useravatar img {
margin-top:2px;
display: block;
height: 36px;
position: absolute;
box-shadow: 0px 1px 1px #FF8800;
}
.postbit-lite .avatarlink img {
border: 1px solid #ddd;
width: 60px;
height: 60px;
}

ul.userlist_showavatars img {
border: 1px solid #ddd;
width: 60px;
height: 60px;
}
#memberlist td.profilepic img, #memberlist img.avatar {
width: 40px;
height: 40px;
}
.member_summary .friends_mini .friends_list li img {
width: 48px;
}

.postbit-lite .avatarlink img {
width: 58px;
height: 58px;
}

.activitybit .avatar img {
width: 58px;
height: 58px;
}

/#################### Fixed Avatar CSS ####################/

/#################### Breadcrumbs ####################/

.bread_box {
margin: 0;
overflow: hidden;
clear: both;
}
.breadcrumb {
position: relative;
font: 11px Arial,Calibri,Verdana,Geneva,sans-serif;
background: {vb:stylevar sidebar_background};
border: {vb:stylevar sidebar_border}; /* this is the border color that's around the whole thing */
-moz-border-radius:{vb:stylevar border_radius};
-webkit-border-radius: {vb:stylevar border_radius};
border-radius: {vb:stylevar border_radius};
overflow: hidden;
}
.breadcrumb .crust {
display: block;
float: left;
position: relative;
}
.breadcrumb .crust:first-child a.crumb {
padding-left: 13px;
-moz-border-radius-topleft:{vb:stylevar border_radius};
-moz-border-radius-bottomleft:{vb:stylevar border_radius};
-webkit-border-top-left-radius: {vb:stylevar border_radius};
-webkit-border-bottom-left-radius: {vb:stylevar border_radius};
border-top-left-radius: {vb:stylevar border_radius};
border-bottom-left-radius: {vb:stylevar border_radius};
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
text-decoration: none;
background-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the background color of the CRUMBS, ie: the links */
padding: 0 10px 0 23px;
border-bottom: {vb:stylevar sidebar_border}; /* this is the same as the border value higher up, this only shows if the last crumb causes it to overflow */
margin-bottom: -1px;
outline: 0 none;
-moz-outline-style: 0 none;
display: block;
line-height: 22px;
_border-bottom: none;
color:{vb:stylevar link_color}; /* this is the color of the links in the crumbs */
text-decoration:{vb:stylevar link_textDecoration};
}
.breadcrumb .crust b.lastcrumb {
background: transparent none;
color: {vb:stylevar footer_time_color}; /* this is the color of the last crumb, ie: the final destination */
font-weight: bold;
}
.breadcrumb .crust a.crumb, .breadcrumb .crust b.lastcrumb {
line-height: 22px;
}
.breadcrumb .crust .arrow {
border: 12px solid transparent;
border-right: 1px none black;
border-left: {vb:stylevar sidebar_border}; /* this is the _background_ color of the "arrow" */
border-left-width: 12px !important;
border-left-style: solid !important;
display: block;
position: absolute;
right: -12px;
top: -1px;
z-index: 50;
width: 0px;
height: 0px;
}
.breadcrumb .crust .arrow span {
border: 12px solid transparent;
border-right: 1px none black;
border-left-color: {vb:stylevar sidebar_background.backgroundColor}; /* this is the border color of the "arrow" */
display: block;
position: absolute;
left: -13px;
top: -12px;
z-index: 51;
white-space: nowrap;
overflow: hidden;
text-indent: 9999px;
width: 0px;
height: 0px;
}
.breadcrumb .refresh:hover { background-position: 0px -16px; }
.breadcrumb .crust:last-child a.crumb { font-weight: bold; }
.breadcrumb .crust:hover a.crumb {
background-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the background color of the crumb when it's hovered */
color:{vb:stylevar linkhover_color}; /* likewise, this is the color of the crumb's link when hovered */
text-decoration:{vb:stylevar linkhover_textDecoration};
}
.breadcrumb .crust:hover .arrow span {
border-left-color:{vb:stylevar blocksubhead_background.backgroundColor}; /* this is the color of the "arrow" when hovered. It should be identical to the `.breadcrumb .crust:hover a.crumb` background value */
}

/#################### Breadcrumbs ####################/

/#################### New WGO Collapse ####################/

.wgo_block .blockhead a.collapse {
position: absolute;
top: {vb:math {vb:math {vb:math {vb:stylevar padding}+{vb:math {vb:stylevar mid_fontSize}*{vb:stylevar line_height}}-13}/2}+1};
}

.wgo_block .blockhead a.collapse img {
/* values are based on the image */
position:absolute;
{vb:stylevar right}: -{vb:math {vb:stylevar padding} * 0.6};
display:block;
width:13px;
height:13px;
overflow:hidden;
top:-5px;
float: {vb:stylevar right};
clear: {vb:stylevar left};
}
/#################### New WGO Collapse ####################/

/#################### New Start ####################/
/* Split replies/views like vb3*/
.threadbit .threadstats {
height: 29px;
padding: 1.2% 0 0;
text-align: center;
width: 7%;
}
.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
padding: 0.5% 0 0;
width: 33%;
}
.threadbit .threadstats li {
margin-right: 0;
}
.threadbit .threadinfo {
min-width: 350px;
width: 50%;
}
.threadlisthead span.threadinfo {
width: 50%;
}
.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: left;
width: 33%;
}
.threadlisthead span.threadstats {
text-align: center;
width: 7%;
}
/* Split replies/views like vb3*/


this includes the updated version (v1.3)

nice idee with the heading :)

[stevieb]

try this:

this includes the updated version (v1.3)

nice idee with the heading :) Ok, that's loaded - take a look - no difference! Weird isn't it.... just doesn't make much sense :(

I like to know what css I have added because if there is a conflict I can then easily remove the offending stuff, depending which mod I prefer of course but right now I really want to get these tables sorting so will try almost anything lol

But as you've seen, our forum is pretty cool and I'd hate to lose all the functions but the layout is crap as default hence this hack is awesome if we can fix it....

Thanks by the way, for all your patience and time. :)

[stevieb]

I just removed all css other than yours and nothing changed either.....

[peugeot405]

Ok, that's loaded - take a look - no difference! Weird isn't it.... just doesn't make much sense :(

.threadbit .threadstats {
height: 29px;
padding: 1.2% 0 0;
text-align: center;
width: 7%;
}

is missing in additional.css

I like to know what css I have added because if there is a conflict I can then easily remove the offending stuff, depending which mod I prefer of course but right now I really want to get these tables sorting so will try almost anything lol

I'll be doing that aswell in the future

Thanks by the way, for all your patience and time. :)l

no problem, that is what support is for.

[stevieb]

.threadbit .threadstats {
height: 29px;
padding: 1.2% 0 0;
text-align: center;
width: 7%;
}

is missing in additional.css You did it - take a look :)

Well done, thank you :)

[peugeot405]

i noticed it, i was on your site ;)

no problem, glad it got solved.

[stevieb]

Next question, how do I do this on the main forum homepage :)

Also, on the code we just edited, when you search new posts/todays posts the forum name at the end overlaps the tick box - is it possible to drop the text a few pixels to avoid that happening?

In firebug it suggests if I edit .threadbit .threadimod input and give it a top:-10px; it lifts the tick box a bit....

Is that best way to fix it do you think?

[peugeot405]

Next question, how do I do this on the main forum homepage :)

with this one:


Split posts/treads like vb3 (https://vborg.vbsupport.ru/showthread.php?t=299530)

[stevieb]

with this one:


Split posts/treads like vb3 (https://vborg.vbsupport.ru/showthread.php?t=299530)

will I have the same or likely issues though haha ;)

[stevieb]

Also, on the code we just edited, when you search new posts/todays posts the forum name at the end overlaps the tick box - is it possible to drop the text a few pixels to avoid that happening?

In firebug it suggests if I edit .threadbit .threadimod input and give it a top:-10px; it lifts the tick box a bit....

Is that best way to fix it do you think? I edited this post and added the following.....

Thanks

[stevieb]

Also, on the code we just edited, when you search new posts/todays posts the forum name at the end overlaps the tick box - is it possible to drop the text a few pixels to avoid that happening?

In firebug it suggests if I edit .threadbit .threadimod input and give it a top:-10px; it lifts the tick box a bit....

Is that best way to fix it do you think? I just added this to the bottom of the additionalcss code you provided:

.threadbit .threadimod input {
top: -10px;
}

Tick boxes are now perfectly aligned :)

[peugeot405]

Next question, how do I do this on the main forum homepage :)

Also, on the code we just edited, when you search new posts/todays posts the forum name at the end overlaps the tick box - is it possible to drop the text a few pixels to avoid that happening?

In firebug it suggests if I edit .threadbit .threadimod input and give it a top:-10px; it lifts the tick box a bit....

Is that best way to fix it do you think?


You can do it that way, but it put's the box almost on the top.

Another way is:

find:


.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
padding: 0.5% 0 0;
width: 33%;
}

replace with


.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
padding: 0.5% 0 0;
width: 30%;
}

find:

.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: left;
width: 33%;
}

replace with:

.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: left;
width: 30%;
}

That way the tick nox stays centered.

[stevieb]

You can do it that way, but it put's the box almost on the top.

Another way is:

find:


.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
padding: 0.5% 0 0;
width: 33%;
}

replace with


.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
padding: 0.5% 0 0;
width: 30%;
}

find:

.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: left;
width: 33%;
}

replace with:

.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: left;
width: 30%;
}

That way the tick nox stays centered. Thanks :)

Ok tried it but as we have some long forum names it'll never work 100% so I altered the table sizes thanks to the code above but then also added this at the base to give us that leeway on longer thread names:

.threadbit .threadimod input {
top: -10px;
}

[stevieb]

Hi again

Just noticed when someone is not using a large screen (or mobile) things go slightly off :(

For example on the main index page (of our site) if you minimise the page to 50% or so you'll see this effect:

145950

As you can see, the posted date goes below the linespace - it seems to do it when the title is too big and pushes onto two lines?

Likewise, on the todays posts/new posts search page the following error occurs:

145951

As you can see the views/replies get pushed down when too big numbers...


Any idea? Sorry to be a pain :(

[peugeot405]

I'm working on a fix for the search page as we speak. I found a way to split replies and views. (see img)

145952

For the last post, i suggest changing the width again, making the last post a little wider.

[stevieb]

I'm working on a fix for the search page as we speak. I found a way to split replies and views. (see img)

145952

For the last post, i suggest changing the width again, making the last post a little wider. hiya

Thanks - can't wait for the fix :)

You're clearly as much as a perfectionist as I am then lol

Ermmm, how do I make it wider - eeeek (don't wanna ruin all the work you did today). :p :p

[peugeot405]

So you want to swich the stats with the last post like on vb5?

[stevieb]

So you want to swich the stats with the last post like on vb5?

Nooooooo I deleted my last post if this is an answer to it sorry. :)

[peugeot405]

Nooooooo I deleted my last post if this is an answer to it sorry. :)

Oops, didn't saw that untill now

[stevieb]

For the last post, i suggest changing the width again, making the last post a little wider.
Ermmm, how do I make it wider - eeeek (don't wanna ruin all the work you did today). :p :p

Any idea's what I do please?

[peugeot405]

Hi again

Just noticed when someone is not using a large screen (or mobile) things go slightly off :(

For example on the main index page (of our site) if you minimise the page to 50% or so you'll see this effect:

145950

As you can see, the posted date goes below the linespace - it seems to do it when the title is too big and pushes onto two lines?

Likewise, on the todays posts/new posts search page the following error occurs:

145951

As you can see the views/replies get pushed down when too big numbers...


Any idea? Sorry to be a pain :(

fix for new post search on what's new added in first post.

about the last post, it's on forumhome and forumdisplay so you have to revert the changes i posted here (https://vborg.vbsupport.ru/showpost.php?p=2437296&postcount=14)

[stevieb]

fix for new post search on what's new added in first post.

about the last post, it's on forumhome and forumdisplay so you have to revert the changes i posted here (https://vborg.vbsupport.ru/showpost.php?p=2437296&postcount=14) arghhh but I didn't want to revert it all - can't it just lose maybe 20px or something?

[stevieb]

fix for new post search on what's new added in first post.
So I need to do all this then, yea?

Description:
This mod splits replies/views on threadbit like on a vb3 forum v1.3 Without borders

Update Instructions:

Step 1:
Open template additional.css

Find the following:
Code:

.threadlisthead span.threadlastpost {
padding-left: 2%;
text-align: left;
width: 32%;
}

Replace with:
Code:

.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: left;
width: 33%;
}

Find the following:
Code:

.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
width: 32%;
}

Replace with:
Code:

.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
padding: 0.5% 0 0;
width: 33%;
}

Find the following:
Code:

.threadbit .threadstats {
height: 21px;
margin-top: 17px;
text-align: center;
width: 7%;
}

Replace With:
code

.threadbit .threadstats {
height: 29px;
padding: 1.2% 0 0;
text-align: center;
width: 7%;
}
Done!

[peugeot405]

try this:

find following :

.forumbit_post .foruminfo {
clear: right;
float: left;
min-height: 48px;
min-width: 30%;
width: 54.2%;
}

replace with:

.forumbit_post .foruminfo {
clear: right;
float: left;
min-height: 48px;
min-width: 30%;
width: 47.2%;
}

find following:

.forumbit_post .forumrow .forumlastpost {
float: left;
font-size: 12px;
height: 31px;
padding: 7.5px 0 0;
width: 20.6%;
}

replace with:

.forumbit_post .forumrow .forumlastpost {
float: left;
font-size: 12px;
height: 31px;
padding: 7.5px 0 0;
width: 27.6%;
}

find following:

.forumbit_nopost .forumhead .forumtitle {
font-size: 13px;
min-width: 30%;
width: 64.8%;
}

replace with:

.forumbit_nopost .forumhead .forumtitle {
font-size: 13px;
min-width: 30%;
width: 57.6%;
}

find following:

.forumbit_nopost .forumhead span.forumlastpost, .forumbit_post .forumhead span.forumlastpost {
width: 18.2%;
}

replace with:

.forumbit_nopost .forumhead span.forumlastpost, .forumbit_post .forumhead span.forumlastpost {
width: 25.2%;
}

[peugeot405]

So I need to do all this then, yea?

Description:
This mod splits replies/views on threadbit like on a vb3 forum v1.3 Without borders

Update Instructions:

Step 1:
Open template additional.css

Find the following:
Code:

.threadlisthead span.threadlastpost {
padding-left: 2%;
text-align: left;
width: 32%;
}

Replace with:
Code:

.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: left;
width: 33%;
}

Find the following:
Code:

.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
width: 32%;
}

Replace with:
Code:

.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
padding: 0.5% 0 0;
width: 33%;
}

Find the following:
Code:

.threadbit .threadstats {
height: 21px;
margin-top: 17px;
text-align: center;
width: 7%;
}

Replace With:
code

.threadbit .threadstats {
height: 29px;
padding: 1.2% 0 0;
text-align: center;
width: 7%;
}
Done!

that's for threadbit, not for forum home.

[stevieb]

that's for threadbit, not for forum home.

how do I add just the new bit of the search view that you did please :)

[peugeot405]

Open template search_threadbit

Find following:


<!-- threadstats -->
<vb:if condition="!$show['notificationtype'] && !$thread['del_username']">
<ul class="threadstats td alt" title="<vb:if condition="$thread['dot_count'] > 0">{vb:rawphrase have_x_posts_in_thread_last_y, {vb:raw thread.dot_count}, {vb:raw thread.dot_lastpost}}</vb:if>">
<li>{vb:rawphrase replies}: <a class="understate" href="misc.php?do=whoposted&amp;t={vb:raw thread.threadid}" onclick="who({vb:raw thread.threadid}); return false;">{vb:raw thread.replycount}</a></li>
<li>{vb:rawphrase views}: {vb:raw thread.views}</li>
</ul>
</vb:if>

Replace with:

<!-- threadstats -->
<vb:if condition="!$show['notificationtype'] && !$thread['del_username']">
<dl class="threadstats td alt2" title="<vb:if condition="$thread['dot_count'] > 0">{vb:rawphrase have_x_posts_in_thread_last_y, {vb:raw thread.dot_count}, {vb:raw thread.dot_lastpost}}</vb:if>">
<td>{vb:rawphrase replies}:</td> <dd><a class="understate" href="misc.php?do=whoposted&amp;t={vb:raw thread.threadid}" onclick="who({vb:raw thread.threadid}); return false;">{vb:raw thread.replycount}</a></dd>
</dl>
<dl class="threadstats td alt2" title="<vb:if condition="$thread['dot_count'] > 0">{vb:rawphrase have_x_posts_in_thread_last_y, {vb:raw thread.dot_count}, {vb:raw thread.dot_lastpost}}</vb:if>">
<td>{vb:rawphrase views}:</td> <dd>{vb:raw thread.views}</dd>
</dl>
</vb:if>

Open template additional.css

Add following:

.threadstats.td.alt2 {
height: 38px;
padding-top: 9px;
}

.threadinfo.thread {
width: 45%;
}

[stevieb]

Open template search_threadbit

Find following:


<!-- threadstats -->
<vb:if condition="!$show['notificationtype'] && !$thread['del_username']">
<ul class="threadstats td alt" title="<vb:if condition="$thread['dot_count'] > 0">{vb:rawphrase have_x_posts_in_thread_last_y, {vb:raw thread.dot_count}, {vb:raw thread.dot_lastpost}}</vb:if>">
<li>{vb:rawphrase replies}: <a class="understate" href="misc.php?do=whoposted&amp;t={vb:raw thread.threadid}" onclick="who({vb:raw thread.threadid}); return false;">{vb:raw thread.replycount}</a></li>
<li>{vb:rawphrase views}: {vb:raw thread.views}</li>
</ul>
</vb:if>

Replace with:

<!-- threadstats -->
<vb:if condition="!$show['notificationtype'] && !$thread['del_username']">
<dl class="threadstats td alt2" title="<vb:if condition="$thread['dot_count'] > 0">{vb:rawphrase have_x_posts_in_thread_last_y, {vb:raw thread.dot_count}, {vb:raw thread.dot_lastpost}}</vb:if>">
<td>{vb:rawphrase replies}:</td> <dd><a class="understate" href="misc.php?do=whoposted&amp;t={vb:raw thread.threadid}" onclick="who({vb:raw thread.threadid}); return false;">{vb:raw thread.replycount}</a></dd>
</dl>
<dl class="threadstats td alt2" title="<vb:if condition="$thread['dot_count'] > 0">{vb:rawphrase have_x_posts_in_thread_last_y, {vb:raw thread.dot_count}, {vb:raw thread.dot_lastpost}}</vb:if>">
<td>{vb:rawphrase views}:</td> <dd>{vb:raw thread.views}</dd>
</dl>
</vb:if>

Open template additional.css

Add following:

.threadstats.td.alt2 {
height: 38px;
padding-top: 9px;
}

.threadinfo.thread {
width: 45%;
}

thanks - there is an issue with stickies though..... the forum name drops to the bottom.... see it :)

145956

Also the forum name column is too short - it's squashed....

[peugeot405]

change following:

.threadinfo.thread {
width: 50%;
}

with:

.threadinfo.thread {
width: 40%;
}

[stevieb]

it never was 50% mate - it was 45%....

see above #74 lol

But well done, fixed :)

[stevieb]

any chance we can remove the shading from the forum field / tick box in the search todays post..?

[peugeot405]

any chance we can remove the shading from the forum field / tick box in the search todays post..?

can you post a screenshot to see exacly what you want to change, and I look in to it tonight.
never mind, figured it out :)

.threadbit .threadpostedin {
background: none repeat scroll 0 0 transparent;
font-size: 12px;
height: 29.52px;
max-width: 19.9%;
padding: 8.74px 0;
width: 8888px;
}

[stevieb]

can you post a screenshot to see exacly what you want to change, and I look in to it tonight.
never mind, figured it out :)

.threadbit .threadpostedin {
background: none repeat scroll 0 0 transparent;
font-size: 12px;
height: 29.52px;
max-width: 19.9%;
padding: 8.74px 0;
width: 8888px;
}

I was meaning this bit (when you click new posts/todays posts) - note the blue shading:

145957

Adding the code above to additionalcss doesn't do anything..... :)

[peugeot405]

In stylemanager, select Style Variable Editor from the dropdown menu on the right

Scroll down until you see threadbit

dubble click on threadbit alt background

background color : transparant.
background image: remove the link.

[kkk333]

thamks
could you split thread starter / Title ?

[peugeot405]

thamks
could you split thread starter / Title ?

I'll have a look at this.

[Harpo]

I have the mod user avatars on forums. Will this break the mod I am currently using?

[peugeot405]

I have the mod user avatars on forums. Will this break the mod I am currently using?

I suppose you are referring to User Avatars In Thread Listing (www.vbulletin.org/forum/showthread.php?t=268618).

I installed the mod and it doesn't interfear with spit replies/views like vb3.
see pics below.

147222

147223

147224

You will need to adapt the instructions of split replies/views like vb3 to include the changes already made in the templates on your site.

[khfoong]

thank you so much for this MOD.
i am so grateful to u.

IT WORKS GREAT !

[peugeot405]

thank you so much for this MOD.
i am so grateful to u.

IT WORKS GREAT !

Thanks khfoong, glad you like it.

[john7911]

I was waiting for this modification.
I can't find .threadlisthead span.threadlastpost in additional.css :(
Is it possible to change in my forum?
http://www.faouweb.net/forum/forum.php
Thank you.

[peugeot405]

I was waiting for this modification.
I can't find .threadlisthead span.threadlastpost in additional.css :(
Is it possible to change in my forum?
http://www.faouweb.net/forum/forum.php
Thank you.

What do you mean with you can find it? You have to add it. You just need to copy the css code from the instructions and paste them into additional css under any other coding you have in that template.

If you can make a temporary account with acces to the editor section, i can install the mod for you tomorrow in the evening (after work, around 10 pm). You can send me details by pm.

[john7911]

Thank you peugeot405
It's OK i have modified my forum :up:
http://www.faouweb.net/forum/forum.php

Is it possible to add Border for Threads and change the Background?
https://vborg.vbsupport.ru/

like Replies / Views here:
http://www.faouweb.net/forum/forumdisplay.php?2-AutoCAD
Thank you ;)

[peugeot405]

Thank you peugeot405
It's OK i have modified my forum :up:
http://www.faouweb.net/forum/forum.php

Is it possible to add Border for Threads and change the Background?
https://imagizer.imageshack.us/v2/293x437q90/534/f8o9.png

like Replies / Views here:
http://www.faouweb.net/forum/forumdisplay.php?2-AutoCAD
Thank you ;)

ok now i see the confusion it's my other mod Split posts/treads like vb3 (https://vborg.vbsupport.ru/showthread.php?t=299530) you have installed. that's why i couldn't find the problem. Sorry, was getting very late at that time.

i'll look in to it tonight.

[peugeot405]

ok now i see the confusion it's my other mod Split posts/treads like vb3 (https://vborg.vbsupport.ru/showthread.php?t=299530) you have installed. that's why i couldn't find the problem. Sorry, was getting very late at that time.

i'll look in to it tonight.

In addtional.css search for:

.forumbit_post .forumstats, .forumbit_post .forumstats_2 {
display: block;
float: left;
height: 30px;
margin-right: 0;
padding-top: 1.5%;
text-align: center;
width: 7%;
}

and replace it with:

.forumbit_post .forumstats, .forumbit_post .forumstats_2 {
display: block;
float: left;
height: 30px;
margin-right: 0;
padding-top: 2%;
text-align: center;
width: 6.5%;
background: #333333;
border-left: 2px solid #0d0d0d;
border-right: 2px solid #0d0d0d;
}
.forumbit_post .forumstats, .forumbit_post .forumstats_3 {
display: block;
float: left;
height: 30px;
margin-right: 0;
padding-top: 1.5%;
text-align: center;
width: 6.5%;
}

In forumhome_forumbit_level1_post search for:

<!-- Split posts/treads like vb3 -->
<div class="forumlastpost td">
<h4 class="lastpostlabel">{vb:rawphrase last_post}:</h4>
<div>
{vb:raw forum.lastpostinfo}
</div>
</div>
<h4 class="nocss_label">{vb:rawphrase forum_statistics}:</h4>
<ul class="forumstats_2 td">
<li>{vb:raw forum.threadcount}</li>
</ul>
<ul class="forumstats_2 td">
<li>{vb:raw forum.replycount}</li>
</ul>
<!-- Split posts/treads like vb3 -->

and replace it with:

<!-- Split posts/treads like vb3 -->
<div class="forumlastpost td">
<h4 class="lastpostlabel">{vb:rawphrase last_post}:</h4>
<div>
{vb:raw forum.lastpostinfo}
</div>
</div>
<h4 class="nocss_label">{vb:rawphrase forum_statistics}:</h4>
<ul class="forumstats_2 td">
<li>{vb:raw forum.threadcount}</li>
</ul>
<ul class="forumstats_3 td">
<li>{vb:raw forum.replycount}</li>
</ul>
<!-- Split posts/treads like vb3 -->

In forumhome_forumbit_level2_post search for:

<!-- Split posts/treads like vb3 -->
<div class="forumlastpost td">
<h4 class="lastpostlabel">{vb:rawphrase last_post}:</h4>
<div>
{vb:raw forum.lastpostinfo}
</div>
</div>
<h4 class="nocss_label">{vb:rawphrase forum_statistics}:</h4>
<ul class="forumstats_2 td">
<li>{vb:raw forum.threadcount}</li>
</ul>
<ul class="forumstats_2 td">
<li>{vb:raw forum.replycount}</li>
</ul>
<!-- Split posts/treads like vb3 -->

and replace it with:

<!-- Split posts/treads like vb3 -->
<div class="forumlastpost td">
<h4 class="lastpostlabel">{vb:rawphrase last_post}:</h4>
<div>
{vb:raw forum.lastpostinfo}
</div>
</div>
<h4 class="nocss_label">{vb:rawphrase forum_statistics}:</h4>
<ul class="forumstats_2 td">
<li>{vb:raw forum.threadcount}</li>
</ul>
<ul class="forumstats_3 td">
<li>{vb:raw forum.replycount}</li>
</ul>
<!-- Split posts/treads like vb3 -->

[john7911]

Thank you very much peugeot405 :) :) :)

[peugeot405]

Thank you very much peugeot405 :) :) :)

Glad to help.

[john7911]

I have a small question.
If I change the resolution of the screen, there is a gap as you can see in the picture:
https://imagizer.imageshack.us/v2/800x502q90/829/1eqw.png
I have tried to modify it with Firebug but i don't know how to solve it :(
What I have to modify?
Thank you ;)

[peugeot405]

sorry for late replay.

try this:

in additional.css search for:

.forumbit_post .forumstats, .forumbit_post .forumstats_2 {
display: block;
float: left;
height: 30px;
margin-right: 0;
padding-top: 2%;
text-align: center;
width: 6.5%;
background: #333333;
border-left: 2px solid #0d0d0d;
border-right: 2px solid #0d0d0d;
}
.forumbit_post .forumstats, .forumbit_post .forumstats_3 {
display: block;
float: left;
height: 30px;
margin-right: 0;
padding-top: 1.5%;
text-align: center;
width: 6.5%;
}

and replace with:

.forumbit_post .forumstats, .forumbit_post .forumstats_2 {
display: block;
float: left;
height: 36px;
margin-right: 0;
padding-top: 3%;
text-align: center;
width: 6.5%;
background: #333333;
border-left: 2px solid #0d0d0d;
border-right: 2px solid #0d0d0d;
}
.forumbit_post .forumstats, .forumbit_post .forumstats_3 {
display: block;
float: left;
height: 36px;
margin-right: 0;
padding-top: 3%;
text-align: center;
width: 6.5%;
}

[john7911]

Thank you very much peugeot405 ;)

[peugeot405]

Thank you very much peugeot405 ;)

no problem, glad to help.

[watershed]

Hi and thanks for writing this mod, it looks promising and is something i've been searching for some time :)

However when I install it i don't get the correct view, it seems to be some allignment problem, perhaps to do with me using an RTL language or some other addon. I was wondering if anybody could help out, I've double checked that i did the edits right, and there did not seem to be any conflicts with something previous on additional.css

I'm using a style called morbid_blue_fluid which could be found here https://vborg.vbsupport.ru/showthread.php?t=233338

I'm attaching a screenshot of the way it appears after installation.

Thanks for the help :)

[peugeot405]

Hi and thanks for writing this mod, it looks promising and is something i've been searching for some time :)

However when I install it i don't get the correct view, it seems to be some allignment problem, perhaps to do with me using an RTL language or some other addon. I was wondering if anybody could help out, I've double checked that i did the edits right, and there did not seem to be any conflicts with something previous on additional.css

I'm using a style called morbid_blue_fluid which could be found here https://vborg.vbsupport.ru/showthread.php?t=233338

I'm attaching a screenshot of the way it appears after installation.

Thanks for the help :)

Hi, glad you like it.

I'm having some issues with my testside at the moment, so i can't test it at the moment. I need some time to fix it.

If you post a link to your website, i'll see if i can fix it.

[watershed]

Hi and thank you so much for the reply!

so here is the link: http://www.hakafe.com/forum3.html

You would have to change view style to morbid_blud_fluid because that's the one on which i made the edits (my users use the default one, i didn't want to try to mess around with that one live). Perhaps it is some edit in that style that prevents it from displaying correctly and it would work fine on the default, i was hoping you could assist me with that.

Cheers again!

update: actually, upon changing language to English i see that it is displayed correctly! So i'm guessing it has to do with the RTL language. just a heads up :)

[peugeot405]

in addition.css

search for:


.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
padding: 0.5% 0 0;
width: 33%;
}

and replace with:

.threadbit .threadlastpost {
clear: left;
display: block;
float: right;
padding: 0.5% 0 0;
width: 36%;
}

search for:

.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: left;
width: 33%;
}

and replace with:

.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: right;
width: 35%;
}

search for:

.threadlisthead span.threadinfo {
width: 50%;
}

and replace with:

.threadlisthead span.threadinfo {
width: 48%;
}

That should fix the issue.

[watershed]

in addition.css

search for:


.threadbit .threadlastpost {
clear: right;
display: block;
float: left;
padding: 0.5% 0 0;
width: 33%;
}

and replace with:

.threadbit .threadlastpost {
clear: left;
display: block;
float: right;
padding: 0.5% 0 0;
width: 36%;
}

search for:

.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: left;
width: 33%;
}

and replace with:

.threadlisthead span.threadlastpost {
padding-left: 0;
text-align: right;
width: 35%;
}

search for:

.threadlisthead span.threadinfo {
width: 50%;
}

and replace with:

.threadlisthead span.threadinfo {
width: 48%;
}

That should fix the issue.

Thank you so much!!! it did in-fact solve the issue!

Just one more quick question if i may: i'd like to make the replies column Bold, what's the best way of doing that (and changing other font styles)?

Cheers

[peugeot405]

Thank you so much!!! it did in-fact solve the issue!

I'll add the instructions on the first post.

Just one more quick question if i may: i'd like to make the replies column Bold, what's the best way of doing that (and changing other font styles)?

In additional.css

Search for:


.threadbit .threadstats {
height: 29px;
padding: 1.2% 0 0;
text-align: center;
width: 7%;
}

and replace with:


.threadbit .threadstats {
font-family: times new roman;
font-weight: bold;
height: 29px;
padding: 1.2% 0 0;
text-align: center;
width: 7%;
}

Change time new roman to the font you want.

[watershed]

Cheers, that did make it bold, however it also made the views count bold. Is there a way to separate the styling for the post count and the view count?

[peugeot405]

It will require some template changes. Give me some time to look in to it.

[john7911]

Hi peugeot405,
I have installed a new theme, and modified it to have the views like vb3 but Reply and Views are not in the good place, I think i did a mistake as you can see in the picture:
https://vborg.vbsupport.ru/external/2014/05/11.jpg

https://vborg.vbsupport.ru/external/2014/05/12.jpg
What can I do?
http://www.faouweb.net/forum/forum.php
Thank you :)

[john7911]

It's OK , i solved the problem :)

[arrarrgee]

Hi Peugeot,
I cant seem to find any code in my additional.css template. I have a 4.2.2. Could you help me pls. Am i looking at the correct thing?
Thx
arr

[arrarrgee]

The default shows nothing...the template is empty. Help pls

[Disco_Dave]

The default shows nothing...the template is empty. Help pls

Just add this bit of code into your additional.css

.threadbit .threadstats {
font-family: times new roman;
font-weight: bold;
height: 29px;
padding: 1.2% 0 0;
text-align: center;
width: 7%;
}

[arrarrgee]

Hi Dave
I did that. It aligns replies/views a bit to the left and bolds them. It doesn't slipt them as described in the MOD. Help pls

Thx
arr

[peugeot405]

can you post the link to your website?

to get rid of the bold, change
font-weight: bold;
to
font-weight: normal;