Environment
Update!
Moodle 3.3
Boost
It works with BOOST and
<td class="table-success">...</td>Still does not work with Essential.
Moodle 3.3
Essential 3.3.1.3
Moodle 3.1
Essential 3.1.1.9
Code
...<tr>
<td class="success">
Title Page
</td>
<td><ul><li>Completely follows the Form and Style Guide title page formatting</li></ul></td>
<td><ul><li>There is an incomplete or no title page</li></ul></td>
<td>
1
</td>
</tr>
...
Maybe someone could help. Could someone else replicate this ?
Boost is built with Bootstrap 4
Essential with Bootstrap 2
Make sure you are using the right selectors and code snippets
Richard, thanks, I have, and I have tested that on like w3school website and other places and works just fine.
Well, the bootstrap2 documentation gives success as an option row class not a table-success class, so I wouldn't expect table-success to work with Essential as it doesn't appear to exist as part of the Bootstrap2 css.
http://getbootstrap.com/2.3.2/base-css.html#tables
But I confess I am a little confused - you say 'table-success' does not work, but your code example just gives 'success', so which are you actually trying?
Thank you Richard, i have tried both in 3.3 and tried class="success" in 3.1 also
It works for rows but not for cells
Have you tried to add table-success to your code when using Essential theme?
Have you looked up to see if Essential has any CSS styles for the class selector 'success'?
Have you tried to add table-success to your code when using Essential theme?
Yes Marry, i have
Have you looked up to see if Essential has any CSS styles for the class selector 'success'?
where would i look for that ?
Danke!
| TESTING SUCCESS class="alert alert-success" |
| TESTING ERROR class="alert alert-error" |
| TESTING INFO class="alert alert-info" |
| TESTING DANGER class="alert alert-danger" |
| TESTING WARNING class="alert" |
THE TRICK IS FIND THE CORRECT CLASS SELECTOR DO NOT ASSUME IT
Mary
that is a little crazy, but thank you so much for the help, they indeed work
p.s. Thanks for "CAPS" they help sometimes.
Mary, i am still not happy with the results as using the alert class it also assigns they style to the text.
Using classed in <tb> or <tr> the text does not change.
Hi Mihai,
What specific classes are you attempting to add? Please provide a link to the document page that describes them.
G
I am trying to apply row color clases as described in the link below to specific table cells only.
http://getbootstrap.com/2.3.2/base-css.html#tables
The example on the link is given for rows, however i know that some contextual classes can be applied to other elements also.
Maybe i am trying to do the impossible.
Did you read the documentation properly? So:
<table class="table">
<tbody><tr class="success">
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td>Approved</td>
</tr>
</tbody></table>
equals:
Yes i see now that they can be applied to rows only in Bootstrap 2.3.2
BS 3 and 4 allow what i want.
Thanks Gareth, Mary and Richard
Ok as the CSS is:
.table tbody tr.success>td {
background-color: #dff0d8;
}what is to stop you writing additional CSS in the Custom CSS box like:
.table tbody tr > td.success {
background-color: #dff0d8;
}then have the markup:
<table class="table">
<tbody>
<tr>
<td>1</td>
<td>TB - Monthly</td>
<td>01/04/2012</td>
<td class="success">Approved</td>
</tr>
</tbody></table>
?
That's not true as the ones in my example where in the <td></td>
<table style="width: 442px; height: 158px;">
<tbody>
<tr>
<td class="alert alert-success">TESTING SUCCESS class="alert alert-success"</td>
</tr>
<tr>
<td class="alert alert-error">TESTING ERROR class="alert alert-error"</td>
</tr>
<tr>
<td class="alert alert-info">TESTING INFO class="alert alert-info"</td>
</tr>
<tr>
<td class="alert alert-danger">TESTING DANGER class="alert alert-danger"</td>
</tr>
<tr>
<td class="alert">TESTING WARNING class="alert"</td>
</tr>
</tbody>
</table>
| TESTING SUCCESS class="alert alert-success" | Empty |
Fair enough, but the alerts also style the text colour as well and not just the background only.
Oh sorry I assumed that the various class selectors for success, info, warning, danger, etc., all coloured text as well of backgrounds. I have only ever thought of them as ALERTS, whereas there are times when the coloured text is not really need, as in this example of TABLE cells.
I wish Moodle HQ would consider changing the colours in the Admin Notification page as I do find then so hard to read.
Sorry...
I better go read up more about these different options!
M
Hi,
I have just been testing this in my Moodle 3.0 using the equivalent Essential Theme.
To get this to work you need to first add the class="table" to the table itself.
Next all you have to do is add to the <td> tag the following:
class="success" if you want a green background color
class="error" if you want a pink background color
<table class="table">
<caption>TEST</caption>
<tbody>
<tr>
<td class="success">SUCCESS</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td class="error">ERROR</td>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
| SUCCESS | 1 | 2 |
| ERROR | 1 | 2 |
Sadly it does not work here but it does in Essential theme for Moodle 3.0
Hope this helps?
Mary.