I use a MediaWiki instance on a thumb drive to keep track of a ton of stuff. In the past, I've been in a hurry so I haven't had the chance to look for a nice way to make tables, so this syntax has served my purposes well:
{| border=1
...
|}
Now I want something a little nicer; I'm used to using CSS to make nicer table borders, but I'm not finding a clean way to do this syntax via MediaWiki. Basically, I want a table that looks equivalent to this HTML:
<table style="border-collapse: collapse">
<tr>
<td style="border: 1px solid black">one</td>
<td style="border: 1px solid black">two</td>
</tr>
</table>
Setting border on every cell is going to be difficult. My initial guess is I need to add a table class to a CSS file somewhere; if so, where might the appropriate file be located?
Do like they do in Wikipedia: create a "prettytable" template (see source; you can skip the fancy <noinclude> stuff) where you put some HTML / CSS, e.g.:
border="1" cellpadding="4" cellspacing="0" style="margin: 1em 1em 1em 0;
background: #f9f9f9; border: 1px #aaa solid; border-collapse: collapse;"
Then use the template like this in your tables; it does a simple "include":
{| {{Prettytable}}
...
|}
The same technique can be used for styling cells. You should find plenty more examples of this in different Wikipedias (and other Wikimedia projects).
You can customise the CSS used via pages in the MediaWiki namespace, for example, MediaWiki:Common.css. There are also skin-specific CSS pages, e.g. MediaWiki:Monobook.css, for the default skin.
As you wrote, you can edit Mediawiki CSS files. This is the way to go; however, if for some reason you can't use CSS, you can always use Wiki templates that contain cell-specific styling tags.
Use this tool to quickly generate the tables - http://www.tablesgenerator.com/mediawiki_tables
Related
I'm working on sending emails to various email clients(such as yahoo,hotmail,gmail,....).
I have a div with id OrderInfo inside that I have a variable which generates a dynamic table.
HTML
<div id="OrderInfo">
variable
</div>
The dynamic table generates headers(th) with lower case, so I want to change that to uppercase and few more styling. So I have written a selectors
CSS
#OrderInfo table tr th {
text-transform: uppercase;
background-color: #737373;
color: white;
}
This is working fine for yahoo, hotmail but not for gmail.
I came across that only inline styles work for gmail but how can I the styles of modify a dynamic one.
I have no control on the variable (I mentioned in the div) it generates a table with values which processes while sending to the client.
So I cannot keep a static table and cannot change the way it renders
gmail as well as some other web and desktop/mobile clients strips away css stylesheets either imported or embedded in a <style>...</style> node in the head
Put them inline:
<div id="OrderInfo">
<table>
<tr>
<td style="text-transform: uppercase; background-color: #737373; color: white;">
<!-- .......... -->
</td>
</tr>
</table>
</div>
As a more general advice: building email html is not trivial as final result may vary a lot depending on the recipent's mail client.
The general rule is to make the html as simple as possible, avoiding "modern" css features; use nested tables instead of divs when possible (some says build the html as if you were building a 15 years ago webpage).
The above is very general and may not be always true.
There are several resources online that gives advices and rules on how to make an html email or template.
Finally the only and one rule to always follow if you want to be sure of the result: test your messages with various client
UPDATE 2018
GMAIL now and from a while ago has been supporting embedded CSS, so you can use CSS inside tag <style> in head, it even allow/supports the use of media queries.
OLD ANSWER
Gmail doesn't support embedded CSS, you need to use inline styles, take a look at this
12 Things you MUST Know when Developing Emails for Gmail and Gmail Mobile Apps
Here is what you could do:
<th bgcolor="#737373" style="text-transform: uppercase; color:white></th>
Many email service provide not support to css included in email template. Instead use inline css.
Also, Email template should be formed using tables as it only support HTML3. You can use HTML4/5 elements withing td tags
Do check this link. It will help you to build email template.
Try with this styling making your link red with no special effect for the hover situation:
a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}
This works fine for me, but if anyone of the 4 statements are missing it will not work neither in a gmail client nor in Outlook. They must also appear in the order shown above.
I am building HMTL emails and I use nested tables to layout the email. To change text I apply the styles directly to the < td > tags and this works for the most part across the board. I am noticing though on SOME heavily nested tabled (Greater then 5) the style is being removed completely on Gmail in Internet Explorer, and on Yahoo in various browsers (on a PC). Below is my code:
(This code is ~5 tables deep)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px;font-family:'Century Gothic',Arial, Helvetica, sans-serif; font-size:26px; color:#202020;">The Latest</td>
</tr>
</table>
Has anyone ran into this before or know why they might be stripping the style? It's not only text styles but the padding is also removed on these < td > tags.
I've never had the issue myself, but there is known to be issues with nesting tables too deep. I'm willing to bet that there is a more precise way to layout your email to avoid the issue. Don't be scared to use colspans and rowspans when necessary. Post your code if you like.
I think I may know why this is happening. I've seen issues when using a font-family with quotes throw off the inline CSS. If you move the font-family to the end of your inline styles it may work. See below.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding-bottom:10px; font-size:26px; color:#202020; font-family:'Century Gothic',Arial, Helvetica, sans-serif;">The Latest</td>
</tr>
</table>
In case this is useful for anyone: I ran into this problem with a specific <td> that was getting all the inline CSS stripped. After checking it, I found I had an incorrect property declared, like so:
padding-bottom;
Removing that incorrect property resolved the issue.
It seems to me that Gmail somehow validates the css of each element, and strips it all if it finds an error.
Not a direct answer so my apologise, but could you not use CSS instead of HTML tables? You will be able to achieve the same result I would think?
I just tested an html email that works for Gmail.
Generally speaking, I learned that Gmail tends to strip out the whole inline style attribute when you declare font-family, this behavior sometimes happens when:
1) when you declare a custom font using ' or ", es: <span class="small-text" style="font-family:'Titillium Web',Arial,sans-serif;"></span>
2) if don't put spaces between ; , , and : chars, in a font-family declaration.
3) every time you declare 2 <span> with a font-family in the same <td>, Gmail will strip the second's <span> rules
but I don't know what is the general rule, so my solution was: always declare font-family inside a separate tag, at least, in this way you won't lose all the styles.
example:
<span style="color:#8d8c87;display:block;font-size:12px;line-height:120%;text-align:center">
<span style="font-family:'Titillium Web',Arial,sans-serif;">text</span>
</span>
I noticed that the <td align="center"> code works differently on the MediaWiki.org page and the en.wikipedia.org page. I type the same following test code on the both wikis:
http://www.mediawiki.org/wiki/User:Scottie33/sandbox
http://en.wikipedia.org/wiki/User:Scottie33/sandbox
Source (test) code:
<table border="1">
<tr>
<td align="center">
test test test test test test
test
<table border="1"><tr><td>
[[File:Information_icon.svg|20px]]
</td></tr></table>
test
</td></tr>
</table>
Why the MediaWiki.org page produce following (wrong) code:
<td style="text-align: center;">
instead (expected) of this:
<td align="center">
When wgHtml5is enabled (which is enabled by default in the MediaWiki software, but disabled on most Wikimedia Foundation wikis, and has recently been enabled on mediawiki.org) then the Html processor in MediaWiki strips presentational attributes such as these, and replaces them with a rough equivalent inline style attribute.
That system has a bug (filed as bug #36495 (bugzilla.wikimedia.org)) in scenarios such as these, because text-align or float alone doesn't cover all of it.
See also:
$wgHtml5
$wgCleanupPresentationalAttributes
But so much for the cause of the problem. Back to the issue at hand, the short version is: those attributes are deprecated, and you're best off not using them in the first place.
Instead use CSS. Or, in this particular example (as Bergi mentioned earlier), there is an alternative method that is more appropriate: Use the |center| keyword in the [[File: syntax.
The wikis seem to run with different configs for HTML Tidy values of $wgCleanupPresentationalAttributes, which will correct the deprecated styling html attributes in favor of css.
Yet, align="center" and style="text-align:center" don't show exactly the same behaviour. While the align attribute affects both inline elements, block elements and afaik itself, the css property only aligns inline elements (text). To align block elements, you'd use the margin-property.
Correct markup:
{| style="text-align:center; border:1px solid;"
| test test test test
test
<div style="margin-left:auto; margin-right:auto;">
[[File:Information icon.svg|20px]]
</div>
|}
or, even easier:
[[File:Information icon.svg|center|20px|border]]
I have an old version of frontpage I am toying around with. I planned to use django in the background to do the heavy lifting but thought using this old Frontpage software I have would be good for the front end but I am finding it is writing code in an out of date fashion. I was reading that the tag has been deprecated and we should be using "style" now. the example I was reading has it inside the paragraph or header tag. However the code I have from frontpage is using the font tag inside of a table cell tag so I am wondering what is the correct way to write it.
Here is the code generated by Frontpage
<td width="190" align="center" bgcolor="#000080" height="18"><b><a href="index.htm">
<font title="return to main page" color="#00FFFF" face="Verdana">Home</font></a></b></td>
would I just change it so the styles
<td width="190" align="center" bgcolor="#000080" height="18" style="color:#00FFFF;font-family:Verdana">
<b>Home</b>
</td>
My problem with that is now all text in the table cell would be that font right? So if I wanted more things in the table cell than just the link where would I put that? Also I just tried that and the font-family is working but not the color...?
You need to look up and spend some time learning CSS.
You can do something like this with it:
CSS:
.linkstyle
{
font-family: verdana;
color: #00FFFF;
}
CODE:
<span style="linkstyle">Home</span>
Using inline styles like you've posted, this would work.
<td style="width: 190px; height: 18px; text-align: center; background-color: #000080;">
<strong>Home</strong>
</td>
As a side note, you have several very bad practices. Using tables to lay out your website is very outdated and hard to work with (which is why it is outdated). Using inline CSS is confusing to everyone (including yourself). In addition to the references others have posted, I recommend http://htmldog.com/
Why are you using Frontpage?
Grab a free editor (search for one), or just create it yourself using something like Notepad++. The amount of time you will spend cleaning up code will be a total waste of your time when using Frontpage (gui).
Also use CSS styles instead of inline bgcolor / font, etc;
You could use a combination of <span> tags with class attributes and css.
Here are some good references on that stuff:
HTML: http://www.w3schools.com/tags
CSS2: http://www.w3schools.com/css/css_reference.asp
CSS3: http://www.w3schools.com/css3/css3_reference.asp
I am trying to setup svnspam. The setup and configuration went fine. But when the mails are sent to my Gmail id, they do not have the coloured diffs.
Poking into the original mail through the Gmail view original interface I get to see the CSS like this:
<html>
<head>
<style type="text/css">
body {background-color:#ffffff;}
.file {border:1px solid #eeeeee;margin-top:1em;margin-bottom:1em;}
.pathname {font-family:monospace; float:right;}
.fileheader {margin-bottom:.5em;}
.diff {margin:0;}
.tasklist {padding:4px;border:1px dashed #000000;margin-top:1em;}
.tasklist ul {margin-top:0;margin-bottom:0;}
tr.alt {background-color:#eeeeee}
#added {background-color:#ddffdd;}
#addedchars {background-color:#99ff99;font-weight:bolder;}
tr.alt #added {background-color:#ccf7cc;}
#removed {background-color:#ffdddd;}
#removedchars {background-color:#ff9999;font-weight:bolder;}
tr.alt #removed {background-color:#f7cccc;}
#info {color:#888888;}
#context {background-color:#eeeeee;}
td {padding-left:.3em;padding-right:.3em;}
tr.head {border-bottom-width:1px;border-bottom-style:solid;}
tr.head td {padding:0;padding-top:.2em;}
.task {background-color:#ffff00;}
.comment {padding:4px;border:1px dashed #000000;background-color:#ffffdd}
.error {color:red;}
hr {border-width:0px;height:2px;background:black;}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" border="0" rules="cols">
Now when I copy the whole html from the original source and create an html file locally I get to see the coloured diffs beautifully.
What could be wrong here?
I just started working with HTML mail formatting a couple days ago, so I'm no expert. I've found that it is not easy to support all the different mail clients out there. The number one thing you need to do is use inline styles, as <style> blocks don't necessarily work in all clients. Also, do not attempt to do regular CSS layout, you must use tables for layout. This means lots of repeated code, messy tables, and such. For instance:
<div style="width:590px; margin-top:10px;margin-right:auto;margin-bottom:5px;margin-left:auto; padding: 20px 20px 20px 20px; background-color:#89b556;background-image: url(http://groupon.s3.amazonaws.com/email-images/shared/bg-email-starburst.jpg);background-repeat: no-repeat;background-position: center top; border-width:5px; border-style: solid; border-color:#deedcc;-moz-border-radius:10px;-webkit-border-radius:10px; ">
<table width="100%" style="background-color:#fff; -moz-border-radius-topright:8px; -moz-border-radius-topleft:8px; -webkit-border-top-right-radius:8px; -webkit-border-top-left-radius:8px; *margin-top: -5px" cellspacing="0" cellpadding="0">
I read somewhere that some clients won't accept the <style> block in the <head>, but will in the <body>, so give that a try. Maybe gmail would support that.
Take a look at these free email templates for some ideas. Another thing I do is find a nicely formatted email that was sent to me and view its source. For instance, I used an email sent by Groupon.com, viewed the source, and took ideas from it. Unfortunately, I later found that it doesn't look right in some clients, such as Evolution. But it could be a starting point for you.
Here's another SO question that has some helpful answers.
For completeness sake (and my own future reference), I'm including the awesome link* provided by #Cherian above. I had not seen that link before, but it contains a wealth of information! Great find...
**link has since died at original location. It is accessible at: http://web.archive.org/web/20090116092215/http://xavierfrenette.com/articles/css-support-in-webmail/*
Tauren has given a great answer.
I've just found out that the new gmail interface (introduced in 2011) strips the background-color attribute from inline styles. I've managed to work around this by using the bgcolor attribute on a tr element.