MyBB Community Forums

I need help with this css problem, i am not a coder/designer and I tried adding backgrounds to my stats and this is the results



How can I make it so it does not change its size different from all of the others when x amounts of posts/threads are done. I want them all to be about the size of the ones of which you see with 0 posts/threads.

CSS Code (This came from a PAID theme that I own legally and purchased) I just am putting it on a theme i am making myself for a different forum.

.topicstats {
    background: #1B1B1B;
  padding: 6px 30px;
    background-color: #1B1B1B !important;
    
    border-radius: 2px;
    border: 1px solid #2A2A2A;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,0.58);		

Not sure, so you need the stats to show in "K"
FE: "1K", "2K", "2.1K" ?

(2016-06-03, 06:52 AM)Donald_Duck Wrote: [ -> ]Not sure, so you need the stats to show in "K"
FE: "1K", "2K", "2.1K" ?

If that is possible then yes but i mainly just want everything to be even and not at different widths.

define a fixed width for the box (width: XXXpx in the css... may i have the forum url to actually see this in action which can help better to fix it..

(2016-06-03, 06:59 AM)mmadhankumar Wrote: [ -> ]define a fixed width for the box (width: XXXpx in the css... may i have the forum url to actually see this in action which can help better to fix it..

Temporary url: http://prepperforum.ml

I tried the following 

.topicstats {
    background: #1B1B1B;
  width:35px;
    background-color: #1B1B1B !important;
     border-radius: 2px;
    border: 1px solid #2A2A2A;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,0.58);		

And what you see is the results of that, it doesnt work.

P.S if you are wondering I faked the stats in the database for the testing.

(2016-06-03, 07:20 AM)Darkside96 Wrote: [ -> ]

(2016-06-03, 06:59 AM)mmadhankumar Wrote: [ -> ]define a fixed width for the box (width: XXXpx in the css... may i have the forum url to actually see this in action which can help better to fix it..

Temporary url: http://prepperforum.ml

I tried the following 

.topicstats {
    background: #1B1B1B;
  width:35px;
    background-color: #1B1B1B !important;
     border-radius: 2px;
    border: 1px solid #2A2A2A;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,0.58);		

And what you see is the results of that, it doesnt work.

P.S if you are wondering I faked the stats in the database for the testing.

Is this what you're wanting?

.topicstats {
    background-color: #1B1B1B !important;
    border-radius: 2px;
    border: 1px solid #2A2A2A;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,0.58);
    display: block;
    max-width: 30px;
    overflow: hidden;

The box cuts off the numbers though, so you'll need PHP to change the ending to K after 1,000.

(2016-06-03, 07:45 AM)Tactrus Wrote: [ -> ]

(2016-06-03, 07:20 AM)Darkside96 Wrote: [ -> ]

(2016-06-03, 06:59 AM)mmadhankumar Wrote: [ -> ]define a fixed width for the box (width: XXXpx in the css... may i have the forum url to actually see this in action which can help better to fix it..

Temporary url: http://prepperforum.ml

I tried the following 

.topicstats {
    background: #1B1B1B;
  width:35px;
    background-color: #1B1B1B !important;
     border-radius: 2px;
    border: 1px solid #2A2A2A;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,0.58);		

And what you see is the results of that, it doesnt work.

P.S if you are wondering I faked the stats in the database for the testing.

Is this what you're wanting?

.topicstats {
    background-color: #1B1B1B !important;
    border-radius: 2px;
    border: 1px solid #2A2A2A;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,0.58);
    display: block;
    max-width: 30px;
    overflow: hidden;

The box cuts off the numbers though, so you'll need PHP to change the ending to K after 1,000.

Perfect, thank you.

(2016-06-03, 07:45 AM)Tactrus Wrote: [ -> ]

.topicstats {
    background-color: #1B1B1B !important;
    border-radius: 2px;
    border: 1px solid #2A2A2A;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,0.58);
    display: block;
    max-width: 30px;
    overflow: hidden;

Please no.

.topicstats {
    background: #1B1B1B;
    border: 1px solid #2A2A2A;
    box-shadow: inset 0px 0px 3px rgba(0,0,0,.58);
    width: 50px;
    padding: 5px 10px;
    text-align: center;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}