Spacing between History Fields

myCRED comes with very minimal CSS so you can decide yourself how things should look. You can add custom CSS using your themes functions.php file or your themes style.css file. This way you can update myCRED at any time without any worry that things change.

I see the CSS file for the widget, but I do not see the file controlling the appearance of the logs generated though shortcodes. What class should I be using to control this?

Hey.

There is no CSS styling applied to the logs generated, you will need to add these. While you can see the CSS file for the widget, you should never make changes in these files as you will loose them when the plugin gets updated. You should add your CSS styling to your themes’ style.css file.

Regarding which element it all depends on the element you want to style. If you use Chrome, you can right click on the element and select “Inspect Element” in the menu. You can then see that elements ID or CLASS (myCRED mainly uses classes) and apply styling to it.

As an example, the mycred_history shortcode generates a table element wich you can target by i.e. table.log-entries { }. Another example is the centered header and footer rows in the table which by default are centered. You could change this though table.log-entries th { text-align:left; }.

Thanks for your patience with me on this. I have tried this, and it is not working;

.table.log-entries {
padding: 10;
}

I also tried

.table.log-entries #td {
padding: 10;
}

Hey.

The first code applies 10 (something) to an element that has the class table and log-entries. The second code applies 10 (something) to a child element with the id td of an element that has the class table and log-entries. So none of these will work.

Applying general styling to the Table element:
table.log-entries { /* your style here */ }

Applying styling to all table headers:
table.log-entries th { /* your style here */ }

Applying styling to the user column:
table.log-entries #username { /* your style here */ }

Applying styling to the Date column:
table.log-entries #time { /* your style here */ }

Applying styling to the Points column:
table.log-entries #creds { /* your style here */ }

Applying styling to the Entry column:
table.log-entries #entry { /* your style here */ }

In the above examples I am referencing an ID which exists in the table header. Doing this will enforce the styling to the entire column, for example setting the width of the column.

Also, in your code, you are applying 10 something to the element. Think of it this way: “Apply 10 what? Pixels? Meters?” If you want pixels then it’s 10px. Some browser might apply 10 pixels while others will apply another measurement so it’s important that you tell them what it actually is.

Remember that you might have styling that are already applied to the element by other plugins or your theme. So if your styling is not applied it could be that another style has higher priority. You can find more information on Cascading Order here.

Ok, just tried this, no luck either:

.table.log-entries #time {width: 100px;}
.table.log-entries #creds {width: 100px;}
.table.log-entries #entry {width: 100px;}

If you look at the examples I gave there is no dot in the beginning of each row as there is no element with the class “table”. There is however a Table element. You can find more information on how to reference in CSS here.

Argh!! That’s it. THanks so much. AM not a coder, so will read to understand more on referencing CSS.

THank you.

No worries, we cant all be coders, hence the links. Have fun!