Register - Login
Views: 99371009
 Main - Memberlist - Active users - Calendar - Wiki - IRC Chat - Online users
Ranks - Rules/FAQ - Stats - Latest Posts - Color Chart - Smilies		 04-23-22 07:29:36 PM
Jul - Projects and Creations - Catgirl layout redux! New poll - New thread - New reply
Next newer thread | Next older thread
— BlackRose —
Transforming cats into robots since 1989!
Posted on 05-12-11 09:29:38 PM (last edited by BlackRose at 05-12-11 07:45 PM) Link | Quote
After working on this for most of the day, I have finally finished it. Pretty much this is a homage (if you will) to my first (well, more like second or third if you don't count the changes I made to it) layout here on Jul!.

If you don't remember or haven't been around when I first came to Jul in October of 2009, my layout prominently featured a large image of a catgirl. Because of the character, my layout (and the one or two that came after it featuring her) was pretty popular. After I took it down and replaced it with a plaid, sort-of-plain blue/winter-themed layout, which made a few people mention to me that they missed the catgirl, and even recently I was told by someone that they missed it.


So, hopefully this time the catgirl will stay, at least in some form or fashion.

And now, for some technical stuff. yay!

The layout uses CSS media queries that dynamically change the positioning and display of elements in the layout. For instance, if you were to resize your browser down below 1024×768 and are running a recent version of Firefox or Google Chrome, you will see the two columns of text change to one column. If you were to resize it further down below 800×600, the catgirl will magically disappear from the layout and everything will fill the whole post area.


And for the latest browers that has CSS3 Multi-column support, I added in a class that allows me to put content in two columns (I highly doubt that I will use it after today, but it's a nice way to learn this stuff.)

Edit: I totally forgot that it also uses WOFF for using a custom font in the layout as well.

I think myself that this is probably my best layout to date.

So, what do you think?

____________________
Lain.RustedLogic.net
 
— Bloodstar —
11360
Buy me a trip to the moon
So I can laugh at my mistakes


Post 8737/11363

Joined 07-06-07
Active 1 day ago
Posted on 05-12-11 09:32:55 PM Link | Quote
About time.

Looking good as ever. Good thinking, too, allowing it to change according to window size!

____________________
 1406 Days




8737 Posts




30628994 EXP




243861 EXP Next




5258 EXP per post




7.936 seconds Idle Time




Overall Ranking: 7
Girlydragon
3030
Possibly neither Girly nor Dragon.
Level: 105


Posts: 1770/3030
EXP: 12245388
For next: 16872

Since: 07-21-07

From: Sweden

Since last post: 273 days
Last activity: 8 hours
Posted on 05-12-11 10:23:15 PM Link | Quote
I don't have much to say except that I love this new layout with all of my heart!

The style is quite different and nice, and changing it according to window size is just AMAZING!

____________________
Rambly

Level: 106


Posts: 1533/3083
EXP: 12566283
For next: 105660

Since: 07-22-07

Pronouns: she/her

Since last post: 269 days
Last activity: 253 days
Posted on 05-12-11 10:26:42 PM Link | Quote
Dammit Lain your layouts are always the best ones. I'm jealous.

Also, this is unrelated, but your avatar is hella cute.

____________________
Lunaria

Moon Bunny! :3
Level: 139


Posts: 3775/5751
EXP: 31998890
For next: 468555

Since: 07-28-07

Pronouns: she/her
From: pile of fluff

Since last post: 68 days
Last activity: 1 day
Posted on 05-13-11 12:59:37 PM Link | Quote




I think you need to get rid of the small white outline, it's very distracting. :<

____________________
— BlackRose —
Transforming cats into robots since 1989!
Posted on 05-13-11 01:29:08 PM Link | Quote
Originally posted by Karis
I think you need to get rid of the small white outline, it's very distracting. :<

What small white outline?

____________________
Lain.RustedLogic.net
 
Lunaria

Moon Bunny! :3
Level: 139


Posts: 3776/5751
EXP: 31998890
For next: 468555

Since: 07-28-07

Pronouns: she/her
From: pile of fluff

Since last post: 68 days
Last activity: 1 day
Posted on 05-13-11 01:31:14 PM (last edited by Karis at 05-13-11 10:31 AM) Link | Quote







This one on the image.

____________________
— BlackRose —
Transforming cats into robots since 1989!
Posted on 05-13-11 02:12:27 PM Link | Quote
Oh.

Fixed, I hope. (ctrl+r/F5) if you don't get the new version.)

____________________
Lain.RustedLogic.net
 
Lunaria

Moon Bunny! :3
Level: 139


Posts: 3777/5751
EXP: 31998890
For next: 468555

Since: 07-28-07

Pronouns: she/her
From: pile of fluff

Since last post: 68 days
Last activity: 1 day
Posted on 05-13-11 02:50:32 PM Link | Quote




Much better, but I can still see it slightly. :p

____________________
— BlackRose —
Transforming cats into robots since 1989!
Posted on 05-13-11 06:27:15 PM Link | Quote
Originally posted by Karis
Much better, but I can still see it slightly. :p

And updated again.

____________________
Lain.RustedLogic.net
 
Next newer thread | Next older thread
Jul - Projects and Creations - Catgirl layout redux! New poll - New thread - New reply


Rusted Logic
Acmlmboard - commit 47be4dc [2021-08-23]
©2000-2022 Acmlm, Xkeeper, Kaito Sinclaire, et al.

29 database queries.
Query execution time:  0.103111 seconds
Script execution time:  0.020194 seconds
Total render time:  0.123305 seconds


TidyHTML vomit below
line 1 column 1 - Warning: missing <!DOCTYPE> declaration
line 2 column 264 - Warning: unescaped & or unknown entity "&page"
line 119 column 11 - Warning: <form> isn't allowed in <table> elements
line 118 column 10 - Info: <table> previously mentioned
line 120 column 11 - Warning: missing <tr>
line 120 column 119 - Warning: missing </font> before </td>
line 124 column 16 - Warning: plain text isn't allowed in <tr> elements
line 120 column 11 - Info: <tr> previously mentioned
line 125 column 68 - Warning: missing </nobr> before </td>
line 141 column 68 - Warning: missing </nobr> before <tr>
line 147 column 35 - Warning: missing <tr>
line 147 column 50 - Warning: missing </font> before </td>
line 148 column 37 - Warning: unescaped & or unknown entity "&id"
line 147 column 192 - Warning: missing </font> before </table>
line 149 column 35 - Warning: missing <tr>
line 149 column 50 - Warning: missing </font> before </td>
line 149 column 91 - Warning: missing </font> before </table>
line 155 column 9 - Warning: <link> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 156 column 25 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 158 column 25 - Warning: missing <tr>
line 167 column 25 - Warning: missing <tr>
line 168 column 114 - Warning: unescaped & or unknown entity "&postid"
line 170 column 90 - Warning: <link> isn't allowed in <td> elements
line 170 column 25 - Info: <td> previously mentioned
line 187 column 39 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 188 column 25 - Warning: missing <tr>
line 190 column 33 - Warning: missing </font> before </td>
line 200 column 25 - Warning: plain text isn't allowed in <tr> elements
line 188 column 25 - Info: <tr> previously mentioned
line 202 column 33 - Warning: missing <tr>
line 203 column 122 - Warning: unescaped & or unknown entity "&postid"
line 203 column 47 - Warning: missing </nobr> before </table>
line 205 column 99 - Warning: <style> isn't allowed in <td> elements
line 205 column 25 - Info: <td> previously mentioned
line 207 column 1299 - Warning: replacing unexpected big with </big>
line 219 column 2285 - Warning: discarding unexpected </font>
line 219 column 2292 - Warning: discarding unexpected </font>
line 221 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 223 column 9 - Warning: missing <tr>
line 241 column 13 - Warning: missing <tr>
line 242 column 102 - Warning: unescaped & or unknown entity "&postid"
line 249 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 251 column 9 - Warning: missing <tr>
line 269 column 13 - Warning: missing <tr>
line 270 column 102 - Warning: unescaped & or unknown entity "&postid"
line 272 column 74 - Warning: <style> isn't allowed in <td> elements
line 272 column 9 - Info: <td> previously mentioned
line 277 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 279 column 9 - Warning: missing <tr>
line 281 column 147 - Warning: <font> unexpected or duplicate quote mark
line 281 column 147 - Warning: <font> attribute with missing trailing quote mark
line 297 column 13 - Warning: missing <tr>
line 298 column 102 - Warning: unescaped & or unknown entity "&postid"
line 300 column 74 - Warning: <style> isn't allowed in <td> elements
line 300 column 9 - Info: <td> previously mentioned
line 307 column 25 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 309 column 25 - Warning: missing <tr>
line 318 column 25 - Warning: missing <tr>
line 319 column 114 - Warning: unescaped & or unknown entity "&postid"
line 321 column 90 - Warning: <link> isn't allowed in <td> elements
line 321 column 25 - Info: <td> previously mentioned
line 324 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 326 column 9 - Warning: missing <tr>
line 328 column 147 - Warning: <font> unexpected or duplicate quote mark
line 328 column 147 - Warning: <font> attribute with missing trailing quote mark
line 344 column 13 - Warning: missing <tr>
line 345 column 102 - Warning: unescaped & or unknown entity "&postid"
line 347 column 74 - Warning: <style> isn't allowed in <td> elements
line 347 column 9 - Info: <td> previously mentioned
line 357 column 25 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 359 column 25 - Warning: missing <tr>
line 368 column 25 - Warning: missing <tr>
line 369 column 114 - Warning: unescaped & or unknown entity "&postid"
line 371 column 90 - Warning: <link> isn't allowed in <td> elements
line 371 column 25 - Info: <td> previously mentioned
line 375 column 9 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 377 column 9 - Warning: missing <tr>
line 379 column 147 - Warning: <font> unexpected or duplicate quote mark
line 379 column 147 - Warning: <font> attribute with missing trailing quote mark
line 395 column 13 - Warning: missing <tr>
line 396 column 102 - Warning: unescaped & or unknown entity "&postid"
line 398 column 74 - Warning: <style> isn't allowed in <td> elements
line 398 column 9 - Info: <td> previously mentioned
line 405 column 25 - Warning: <div> isn't allowed in <table> elements
line 152 column 17 - Info: <table> previously mentioned
line 407 column 25 - Warning: missing <tr>
line 416 column 25 - Warning: missing <tr>
line 417 column 114 - Warning: unescaped & or unknown entity "&postid"
line 419 column 90 - Warning: <link> isn't allowed in <td> elements
line 419 column 25 - Info: <td> previously mentioned
line 422 column 17 - Warning: missing <tr>
line 422 column 17 - Warning: discarding unexpected <table>
line 425 column 35 - Warning: missing <tr>
line 425 column 50 - Warning: missing </font> before </td>
line 425 column 91 - Warning: missing </font> before </table>
line 427 column 35 - Warning: missing <tr>
line 427 column 50 - Warning: missing </font> before </td>
line 428 column 37 - Warning: unescaped & or unknown entity "&id"
line 427 column 192 - Warning: missing </font> before </table>
line 429 column 17 - Warning: discarding unexpected </textarea>
line 429 column 28 - Warning: discarding unexpected </form>
line 429 column 35 - Warning: discarding unexpected </embed>
line 429 column 43 - Warning: discarding unexpected </noembed>
line 429 column 53 - Warning: discarding unexpected </noscript>
line 429 column 64 - Warning: discarding unexpected </noembed>
line 429 column 74 - Warning: discarding unexpected </embed>
line 429 column 82 - Warning: discarding unexpected </table>
line 429 column 90 - Warning: discarding unexpected </table>
line 431 column 9 - Warning: missing </font> before <table>
line 443 column 25 - Warning: discarding unexpected </font>
line 452 column 37 - Warning: discarding unexpected </font>
line 430 column 1 - Warning: missing </center>
line 120 column 63 - Warning: <img> lacks "alt" attribute
line 125 column 19 - Warning: <td> attribute "width" has invalid value "120px"
line 125 column 93 - Warning: <img> lacks "alt" attribute
line 141 column 19 - Warning: <td> attribute "width" has invalid value "120px"
line 141 column 98 - Warning: <img> lacks "alt" attribute
line 148 column 44 - Warning: <img> proprietary attribute value "absmiddle"
line 148 column 142 - Warning: <img> proprietary attribute value "absmiddle"
line 148 column 246 - Warning: <img> proprietary attribute value "absmiddle"
line 162 column 56 - Warning: <img> lacks "alt" attribute
line 184 column 2483 - Warning: <img> proprietary attribute value "absmiddle"
line 184 column 2483 - Warning: <img> lacks "alt" attribute
line 191 column 43 - Warning: <img> proprietary attribute value "absmiddle"
line 191 column 43 - Warning: <img> lacks "alt" attribute
line 191 column 86 - Warning: <img> proprietary attribute value "absmiddle"
line 191 column 86 - Warning: <img> lacks "alt" attribute
line 191 column 129 - Warning: <img> proprietary attribute value "absmiddle"
line 191 column 129 - Warning: <img> lacks "alt" attribute
line 191 column 172 - Warning: <img> proprietary attribute value "absmiddle"
line 191 column 172 - Warning: <img> lacks "alt" attribute
line 191 column 215 - Warning: <img> proprietary attribute value "absmiddle"
line 191 column 215 - Warning: <img> lacks "alt" attribute
line 191 column 258 - Warning: <img> proprietary attribute value "absmiddle"
line 191 column 258 - Warning: <img> lacks "alt" attribute
line 191 column 301 - Warning: <img> proprietary attribute value "absmiddle"
line 191 column 301 - Warning: <img> lacks "alt" attribute
line 193 column 33 - Warning: <img> lacks "alt" attribute
line 198 column 37 - Warning: <img> lacks "alt" attribute
line 205 column 1082 - Warning: <img> proprietary attribute value "absmiddle"
line 205 column 1082 - Warning: <img> lacks "alt" attribute
line 225 column 16 - Warning: <img> proprietary attribute value "absmiddle"
line 225 column 16 - Warning: <img> lacks "alt" attribute
line 225 column 59 - Warning: <img> proprietary attribute value "absmiddle"
line 225 column 59 - Warning: <img> lacks "alt" attribute
line 225 column 102 - Warning: <img> proprietary attribute value "absmiddle"
line 225 column 102 - Warning: <img> lacks "alt" attribute
line 225 column 145 - Warning: <img> proprietary attribute value "absmiddle"
line 225 column 145 - Warning: <img> lacks "alt" attribute
line 225 column 188 - Warning: <img> proprietary attribute value "absmiddle"
line 225 column 188 - Warning: <img> lacks "alt" attribute
line 225 column 231 - Warning: <img> proprietary attribute value "absmiddle"
line 225 column 231 - Warning: <img> lacks "alt" attribute
line 226 column 23 - Warning: <img> lacks "alt" attribute
line 226 column 64 - Warning: <img> lacks "alt" attribute
line 226 column 113 - Warning: <img> lacks "alt" attribute
line 226 column 162 - Warning: <img> lacks "alt" attribute
line 227 column 11 - Warning: <img> lacks "alt" attribute
line 237 column 15 - Warning: <img> lacks "alt" attribute
line 244 column 431 - Warning: <img> proprietary attribute value "absmiddle"
line 244 column 431 - Warning: <img> lacks "alt" attribute
line 253 column 11 - Warning: <img> lacks "alt" attribute
line 254 column 23 - Warning: <img> lacks "alt" attribute
line 254 column 64 - Warning: <img> lacks "alt" attribute
line 254 column 113 - Warning: <img> lacks "alt" attribute
line 254 column 163 - Warning: <img> lacks "alt" attribute
line 255 column 11 - Warning: <img> lacks "alt" attribute
line 265 column 15 - Warning: <img> lacks "alt" attribute
line 272 column 747 - Warning: <img> proprietary attribute value "absmiddle"
line 272 column 747 - Warning: <img> lacks "alt" attribute
line 281 column 11 - Warning: <img> lacks "alt" attribute
line 282 column 23 - Warning: <img> lacks "alt" attribute
line 282 column 64 - Warning: <img> lacks "alt" attribute
line 282 column 113 - Warning: <img> lacks "alt" attribute
line 282 column 163 - Warning: <img> lacks "alt" attribute
line 283 column 11 - Warning: <img> lacks "alt" attribute
line 293 column 15 - Warning: <img> lacks "alt" attribute
line 313 column 56 - Warning: <img> lacks "alt" attribute
line 328 column 11 - Warning: <img> lacks "alt" attribute
line 329 column 23 - Warning: <img> lacks "alt" attribute
line 329 column 64 - Warning: <img> lacks "alt" attribute
line 329 column 113 - Warning: <img> lacks "alt" attribute
line 329 column 163 - Warning: <img> lacks "alt" attribute
line 330 column 11 - Warning: <img> lacks "alt" attribute
line 340 column 15 - Warning: <img> lacks "alt" attribute
line 351 column 934 - Warning: <img> lacks "alt" attribute
line 363 column 56 - Warning: <img> lacks "alt" attribute
line 379 column 11 - Warning: <img> lacks "alt" attribute
line 380 column 23 - Warning: <img> lacks "alt" attribute
line 380 column 64 - Warning: <img> lacks "alt" attribute
line 380 column 113 - Warning: <img> lacks "alt" attribute
line 380 column 163 - Warning: <img> lacks "alt" attribute
line 381 column 11 - Warning: <img> lacks "alt" attribute
line 391 column 15 - Warning: <img> lacks "alt" attribute
line 411 column 56 - Warning: <img> lacks "alt" attribute
line 420 column 496 - Warning: <img> proprietary attribute value "absmiddle"
line 420 column 496 - Warning: <img> lacks "alt" attribute
line 428 column 44 - Warning: <img> proprietary attribute value "absmiddle"
line 428 column 142 - Warning: <img> proprietary attribute value "absmiddle"
line 428 column 246 - Warning: <img> proprietary attribute value "absmiddle"
line 437 column 25 - Warning: <img> lacks "alt" attribute
line 442 column 267 - Warning: <img> lacks "alt" attribute
line 149 column 50 - Warning: trimming empty <font>
line 422 column 17 - Warning: trimming empty <tr>
line 425 column 50 - Warning: trimming empty <font>
line 125 column 68 - Warning: <nobr> is not approved by W3C
line 141 column 68 - Warning: <nobr> is not approved by W3C
line 168 column 39 - Warning: <nobr> is not approved by W3C
line 203 column 47 - Warning: <nobr> is not approved by W3C
line 242 column 27 - Warning: <nobr> is not approved by W3C
line 244 column 74 - Warning: <table> proprietary attribute "height"
line 270 column 27 - Warning: <nobr> is not approved by W3C
line 298 column 27 - Warning: <nobr> is not approved by W3C
line 319 column 39 - Warning: <nobr> is not approved by W3C
line 345 column 27 - Warning: <nobr> is not approved by W3C
line 369 column 39 - Warning: <nobr> is not approved by W3C
line 396 column 27 - Warning: <nobr> is not approved by W3C
line 417 column 39 - Warning: <nobr> is not approved by W3C
Info: Document content looks like HTML5
Info: No system identifier in emitted doctype
Tidy found 205 warnings and 0 errors!


The alt attribute should be used to give a short description
of an image; longer descriptions should be given with the
longdesc attribute which takes a URL linked to the description.
These measures are needed for people using non-graphical browsers.

For further advice on how to make your pages accessible
see http://www.w3.org/WAI/GL.
You are recommended to use CSS to specify the font and
properties such as its size and color. This will reduce
the size of HTML files and make them easier to maintain
compared with using <FONT> elements.

You are recommended to use CSS to control line wrapping.
Use "white-space: nowrap" to inhibit wrapping in place
of inserting <NOBR>...</NOBR> into the markup.

About HTML Tidy: https://github.com/htacg/tidy-html5
Bug reports and comments: https://github.com/htacg/tidy-html5/issues
Official mailing list: https://lists.w3.org/Archives/Public/public-htacg/
Latest HTML specification: http://dev.w3.org/html5/spec-author-view/
Validate your HTML documents: http://validator.w3.org/nu/
Lobby your company to join the W3C: http://www.w3.org/Consortium

Do you speak a language other than English, or a different variant of
English? Consider helping us to localize HTML Tidy. For details please see
https://github.com/htacg/tidy-html5/blob/master/README/LOCALIZE.md