Report Blog Entry
Did you know you can embed HTML in SVG files? It's sandboxed so no sorry you can't click on it or get your sweet DHTML snowflakes (I'm still bitter about that) but you can, at least, use it to insert additional text boxes on your profile!
For example, here's the CSS needed to add the ~Myspace Authentic~ details box after the links box on my profile:
main > div:first-of-type > div:first-of-type > div:last-of-type::after {And the SVG file it embeds:
content: url('http://cattesandbuttes.com/myspace/test.svg');
position: relative;
left: -1px;
top: -1px;
}
main > div > div > div:last-of-type {
border: none !important;
}
main > div > div > div:last-of-type > .heading {
border: 1px dashed #df92be !important;
border-bottom: 2px solid black !important;'
margin-bottom: 0;
padding-bottom: 10px;
}
main > div > div > div:last-of-type > .inner {
border: 1px dashed #df92be !important;
border-top: none !important;
}
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">Yes, you have to embed all the styles! It's sandboxed and nothing carries over! But it's still hella neat ain't it?
<foreignObject width="100%" height="100%" x="0" y="0">
<style>
table, tbody, tr, td, p, div {margin: 0; padding: 0; border-collapse: collapse; box-sizing: border-box;}
h4 {margin: 0;}
p {padding: 2px;}
.container {margin-right: 1px; padding-right: 2px; margin-top: 20px;}
.table-section {border: 1px dashed #df92be; width: 100%;}
.heading {border-bottom: 2px solid black; margin-bottom: 10px;}
div {font-family: mistral; font-size:105%; color: #2a2a2a;}
tr > td {width: 50%;}
tr > td:first-child {color: #887dae; font-size: 1.05em; font-weight: bold; width: 33%;}
</style>
<div class="container" xmlns="http://www.w3.org/1999/xhtml">
<div class="table-section">
<div class="heading">
<h4>
~*~DiGiTaL PeT~*~'s Details
</h4>
</div>
<div class="inner">
<table class="details-table" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td>
<p>
Status:
</p>
</td>
<td>
<p>
In A Relationship
</p>
</td>
</tr>
<tr>
<td>
<p>
Here for:
</p>
</td>
<td>
<p>
Friends
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</foreignObject>
</svg>
~~tamagotchi (digital pet)
Comments
Displaying 0 of 0 comments ( View all | Add Comment )