Just a minor and random tip regarding the activity count widget

Question

I know this is going to sound silly but I'm a bit picky and I couldn't help noticing how numbers in the activity widget were not right aligned and I feel that hurts my eyes :) So I ended up modifying that CSS so that they are right aligned.

 

This is before the change:

 

 

This is after:

 

 

I noticed most users here are not developers nor designers so if that is the case, and you happen to be as picky as me, then here is how to change it:

 

Open your qa-theme/<your-theme>/qa-theme.php file (note I'm using the Snow theme and this might be different for any other theme) and make sure these CSS classes (.qa-activity-count, .qa-activity-count-item and .qa-activity-count-data) look this way:

 

.qa-activity-count {

        font-size: 14px;

        color: #666;

        padding: 10px;

        display: table;

}

 

.qa-activity-count-item {

        margin: 0;

        display: table-row;

}

 

.qa-activity-count-data {

        font-size: 24px;

        font-weight: 700;

        color: #0179b5;

        display: table-cell;

        text-align: right;

        padding-right: 0.25em;

}

 

In green the lines that have been added. That's pretty much it.

Comments

Nice tip @Pupi1985 . 1 Voteup for your cool idea . Thanks

---

I have come across the table-cell CSS property once but forgot again. Nice to see another application now. I have just used the display:table in another plugin :) Thumb up.

---

It is good for simple things but it is considerably inflexible, as you just can't apply cell spans like you would in the real HTML tables. But for this case, it just works and it is simple to add :) Hmm, 4 upvotes were 4 more than I expected. I might provide some more random tips from time to time then, hopefully, more useful