changing style of category

how to change this 




in to this ?

Hi,

Which forum version are you currently using? Can you post the URL of the forum that you used on the second screenshot, thank you.

phpbb3 

its absolution

What are you referring to absolution? Can you provide an URL, thank you?

Since this version doesn't have access to templates, it'll be done via JS, which I can probably code for you, but not the best with JS. So forgive me if I can't provide such coding. Thank you.

my forum link : http://gsmehfil.niceboard.com/

its edited to look like : https://www.phpbb.com/customise/db/style/

Go in CSS Stylesheet and add that code :

Code:

.forabg ul.topiclist li.header dd.posts{
  visibility: hidden;
  width: 0px;
}

ul.topiclist dfn {
display: block;
margin-top: -10px;
margin-left: 3px;
}

.forabg ul.topiclist.forums li.row dd.posts{
  visibility: hidden;
  width: 10px;
}

.w_posts, .w_topics{
  visibility: visible !important;
}

.w_topics, .w_posts {
background: url(http://demo.phpbb3styles.net/styles/absolution/theme/images/statbubble.png) transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border: none;
position: relative;
width: 71px;
font-weight: bold;
margin-top: 5px!important;
height: 42px;
  margin:0 auto;
}

.forabg ul.topiclist.forums li.row dd.topics, .forabg ul.topiclist li.header dd.topics{
  width: 12%;
}

.forabg ul.topiclist.forums li.row dd.posts, .forabg ul.topiclist li.header dd.posts{
  width: 20px;
}

.forabg ul.topiclist.forums li.row dd.topics{
  padding-left: 10px;
}

.forabg ul.topiclist li.header dd.topics{
  padding-left: 10px !important;
}

Now , create a new javascript name what you want , tick in index and fill with that :

Code:

$(document).ready(function(){
  $('.forabg ul.topiclist.forums li.row').each(function(){
      $(this).find('dd.posts').wrapInner('<div class="w_posts">');
      $(this).find('dd.topics').wrapInner('<div class="w_topics">');
      var towtopics = $(this).find('.w_topics');
      $(this).find('.w_posts').insertAfter(towtopics);
      $(this).find('.w_topics').append('');
      $(this).find('.w_posts').append('');
  });
  $('.forabg ul.topiclist li.header dd.topics').text('Statistici');
});

And that's all !

ohhh thanks so much candy the result i got this 



see above the picture it has two boxes's so can we make two instead of one ?

waiting for ur response 

Thanks

No , you can't do that , sorry.

no i mean they are on and above 

can we make it side by side ?

Yes we can, add that in your CSS:

Code:

.forabg ul.topiclist.forums li.row dd.topics {
width: 15%;
}

.w_topics{
float: left;
}

.w_posts{
float:right;
}

its ended something like this 

how to make them in line side by side ?

thanks

Modify this part:

Code:

.forabg ul.topiclist.forums li.row dd.topics {
width: 15%;
}

change 15 with 17 or how you want.

at last u helped out 
can i get some space between statistici and last post ?



Thanks

Code:

dd.lastpost{
padding-left: 5px;
margin-left: 5px;
}

Add that in your CSS Stylesheet

Thanks candy for helping out 

  topic solved can lock

Glad could I help you

wooooooooooo i got a problem 

when i enter a subforum this wot happned   

replace last code with this one :

Code:

dd.lastpost {
padding-left: 2px!important;
}

this isnt helped out

i pm u test account 

Thanks

The main problem of that problem is from your images

Code:

dd.lastpost {
padding-left: 0px!important;
}

.forabg ul.topiclist.forums li.row dd.topics {
width: 16%;
padding-left:0px!important;
}

Add that in your CSS Stylesheet

The second problem is becuase you don't have the widgets and in subforums.

Hm , probably , you don't read what I saw :
The problem is because you don't have widgets in subforums .

so it mean sub forum remains same ? as the above pic cause dont have widgets in it hmmm

ok i removed widget's from index still it remain's same any help ?

Thanks