I have some data that I'm reading from JSON and writing into a Table.
Currently looks like following.
<table>
<tr><td>Feature 1</td><td>true</td><td>false</td></tr>
<tr><td>Feature 2</td><td>false</td><td>false</td></tr>
<tr><td>Feature 3</td><td>true</td><td>true</td></tr>
</table>
What I want to do is leave the true/false data as it is but use CSS to turn the data into Tick/Cross or smiley / frown images.
I thing I have seen CSS3 notation for this, but I can't find it.
What you can you id manipulate the HTML a bit and add classes to the TD's with the values true/false.
<tr><td>Feature 1</td><td class="true">true</td><td class="false">false</td></tr>
In the CSS you can use the attribute selector or in this class just the class selector
td.true {
}
td.false {
}
You might also be able to hide the text with the text-indent property. Alternatively you can just output the true/false as a class rather than HTML text in the cell.
Related
In a MediaWiki page, I'd like to set the background color for a specific table row. The site's global stylesheet already has a style for <td>, so the cells do not inherit the style from <tr> as they do by default:
td {
background-color:Salmon;
}
<table border="1">
<tr><td>Salmon</td></tr>
<tr style="background-color:Olive;">
<td>Olive</td>
</tr>
<tr><td>Salmon</td></tr>
</table>
Since this is MediaWiki, I can only set attributes on table tags. Can I somehow override :td{background-color} style to the default inherit for the table with them without having to copy it into each cell?
Judging by https://www.w3.org/TR/css-style-attr/#syntax , this doesn't seem likely.
If you can't edit the CSS, then the answer is no - you have to add the inline style to every table cell. This is why Wikipedia has templates like {{n/a}} that add the inline styles for you.
The best way of doing this is to edit the CSS yourself. If you can't do that, but you are in a position to install extensions (or persuade someone else to install them), you could try the TemplateStyles extension which allows you to add custom CSS to individual templates. Failing that, you could create a template like {{n/a}} which adds the styles to every table cell, but saves you some typing. Or you could just bite the bullet and add all the styles inline to every table cell manually.
Is there a specific reason you are trying to do this inline (you wont be able to if you have a global - you will have to use CSS) Just give the table cell that you want a different color on a class. Since this will be more specific, it will override your global on those elements.
ie:
td class="othercolor"
td.othercolor{
background-color:#some other color
}
The TemplateStyles extension (which is a work in progress but very nearly done; will probably work fine if you apply all the open patches) allows attaching CSS rules to wiki pages. So you can do things like
table.mytable td {
background-color: Salmon;
}
This might be too general for your purposes, but changing
td {
background-color:salmon;
}
to
tr {
background-color:salmon;
}
will display the second row only in Olive, and the other rows in Salmon.
i came across the following code. this code should automatically change the color of the text by specific word or other characters. the code does not work for me, is really supposed to work or is it not true
#text [all "(" ] {
color: blue;
}
The code is at the bottom of this page.
No. If you want to do that, you need to do something awful like giving each character a span with itself as the class, or (my preference) use Javascript. Knockout is a great library that can let you apply classes or CSS styling based on the values of variables or functions (among many other useful things), so if you have a table and want negative numbers to appear in red, your <TD> tags would look something like:
<td data-bind="with: someObject, text: someProperty, css: {'isRed':someProperty()<0}"></td>
and you'd need a JavaScript object like
var someObject = {
someProperty: ko.observable(0);
}
Then you just need to apply your Knockout bindings and you're set!
Is it possible to add custom formatting markup to MediaWiki?
Say, for example, I have a div style I use quite often and I'd like to make markup to apply it more quickly than using <div id="frequentlyusedstyle">Title</div> -- like surrounding the text with ##Title## instead of typing out the div id. Is that possible?
(I realize that there is already heading markup; that's just an example. Thank you in advance!)
Just create a new page named "Template:name", where 'name' is whatever you want to name it, with the following text (as per your example):
< div id="frequentlyusedstyle">{{{1|}}}< /div>
(minus the extra spaces, since I don't know how to keep html from
parsing here.)
You would then use it by adding {{template name|Title}} to an article, and it will invoke the style.
You will need to have a style defined in MediaWiki:Common.css or similar, in order to style that div, such as:
#frequentlyusedstyle {
color: red;
}
Hope that helps.
I'm wanting to use properties from other css classes without having to rewrite the code...I'm not too savvy with css so please forgive me for the simple question.
Is it possible to do something like this or similar to it in css?
.class_a {
background:red;
}
.class_b{
.class_a;
}
The best way (that I know of) to re-use css classes is to decide on the css attributes you want to re-use, and put this in a seperate class, like so:
.class_a {
background:red;
}
Then, every time you want to re-use these attributes, you add the class to the html element, with spaces in between different class names, like so:
<div class="text class_a">This will be red, and have the properties of the text class</div>
<div class="text">This will only have the properties of the text class</div>
You can use the same property list for more than one selector:
.class_a, .class_b {
background:red;
}
There are CSS tools which allow you to code in the way you describe. You just do some post-processing of your code to produce valid CSS.
Check out LESS.
Not possible using CSS. However, you can achieve this using something like Sass. Sass allows you write CSS with enhancements such as the one you described. Unfortunately, this introduces an extra step since Sass files must be converted to CSS before you can use them on your page. Could help save you a lot of typing though :)
I've got a tr:table that I need to style using CSS. All the normal style functions of a table are working, but row banding and row selection aren't coming up. When I view the rendered source, I'm not seeing a difference in the rows for an id or class to grab on to, and the official documentation doesn't have any attributes for declaring a style class for either. Is this possible and if so what do I need to do to get my CSS to grab onto it?
<tr:table id="myTable" value="#{tableValues}" rowBandingInterval="1">
<tr:column>
##Stuff##
</tr:column>
<tr:column>
##Stuff##
</tr:column>
<tr:column>
##Stuff##
</tr:column>
</tr:table>
Edit
Let me try to clairfy what's happening.
First, using the declaration above tells jsf to generate a table, and the attribute rowBandingInterval tells it to give each row alternating colors (If it was set to 2, then it would do 2 rows one color, 2 rows another, 2 rows the original, etc.)
Once the page gets rendered into standard html, trinidad (and jsf) apply their own classes and IDs to the html. My normal procedure is to look at the rendered html, find the class that it is appling and add CSS rules for it. However in this case, no additional styles are added (nothing in the rendered html denotes one row to be different from another).
So the question is, how do I tell trinidad to either give alternating rows and the user selected row different classes/IDs for me to grab on to with CSS?
Edit 2
Just to keep anybody paying attention posted, there are no changes to the actual td elements either
Edit 3
After having switched all the attributes around and then stripping all the code down to it's bare bones, I found the row banding attribute. Trinidad classes are rather convluted, and unless you reformat the code and pull out all the noise you won't see it. Trinidad adds the class .af_column_cell-text-band to the banded rows, where as the normal rows have just .af_column_cell-text. So that's half the problem solved. I still need to know the selector for a user selected row, for which I'll happily give all the marbles to anybody that can give me an answer to just that.
This is not directly answering your question, but why not use the CSS3 pseudo-class nth-child to achieve this effect ? For instance :
tr:nth-child(2n)
{
background-color:red;
}
There is a nice and simple jquery code to do the row highlighting located here.
The jQuery is as follows
<script type="text/javascript">
$(document).ready(function(){
$(".stripeMe tr")
.mouseover(function() { $(this).addClass("over");})
.mouseout(function() { $(this).removeClass("over");
});
$(".stripeMe tr:even").addClass("alt");
});
</script>
Then a bit of css
tr.alt td { background: #ecf6fc; }
tr.over td { background: #bcd4ec; }
btw I took all that code from the following site where you can also view the demo.
I made something wrong during the registration process, so this is a new answer instead of a comment.
To deal with the trinidad-skinning topic you need to do the following:
In your web.xml you need to set this parameter to true while developping:
<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value></context-param>
Get firebug for your firefox. With that add-on you can determine which trinidad-selector is used on a component.
There is no selector for a user selected row. I did it this way:
Give your object something like a "highlight property", which you change if it is the selected one.
<tr:column sortProperty="nr" sortable="true" defaultSortOrder="ascending" headerText="Nr" inlineStyle="#{object.tablerowhighlight}text-align:right;"><tr:outputText value="#{object.nr}"/></tr:column>
Do that for all columns of your table and you are done.
put these selectors in your trinidadskin.css-file(smSkin.css in my case):
.AFTableCellDataBackgroundColor:alias
{
background-color: #F5F5DC;
}
.AFTableCellDataBandedBackgroundColor:alias
{
background-color: #FFFFFF;
}
Configuration of trinidad-skins.xml
<skin>
<id>
sm.desktop
</id>
<family>
sm
</family>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
skins/sm/smSkin.css
</style-sheet-name>
</skin>
I will refer you to the trinidad documentation.
http://myfaces.apache.org/trinidad/trinidad-api/tagdoc/tr_table.html
In their example they declare the banding as row banding="row" I would assume the reason you do not get anything is that you have not declared if it is row or column banding.