Tilted Forum Project Discussion Community - Extracting TFP CSS (Hardwired) for local use

- Tilted Technology (https://thetfp.com/tfp/tilted-technology/)

- - Extracting TFP CSS (Hardwired) for local use (https://thetfp.com/tfp/tilted-technology/90448-extracting-tfp-css-hardwired-local-use.html)

Extracting TFP CSS (Hardwired) for local use

I'm sure everyone is familiar here w/ the ability to save PMs in 3 formats: XML, CSV, Text. I always choose XML b/c I hate CSV b/c it needs MS Excel and for that reason alone I couldn't imagine how the PMs would even display properly or be user-friendly to my eyes. And plain text I hate for the obvious reasons, that it's a little bit harder to read much less you need to focus harder if you don't want to miss certain details and bits of words while reading a message. Plain text puts a horrible strain on my eyes, anyone's eyes, when it comes in mass or a great clump. Might as well open up an executable in wordpard (A fairly large one over 2MB) and then have a gander around for "the needle in the haystack".

But anyway, I have a XML for my PMs and somehow found a utility to read them called priv_msgs.xsl accompanied by a file called private_message_viewer.hta. All I did was put my XML file in a folder with these two files and fire up priv_msgs.xsl. It does a great job of bringing up the PMs but they look as if I were in "View Source" hunting down code. What I'm meaning to say is the XML is not styled in anyway, and I was wondering if I could copy a replica environment of TFP's [CSS] Private Message section for local use and read my PMs in a user-friendly way. Only problem is I don't know the first thing about XML much less pulling a CSS from TFP. I've tried saving a copy of one of TFP's pages to the disk then seeing if a CSS was created in the folder corresponding with the HTML I saved, but no CSS was in there. Just a few javascripts and pics to fix opacity.

Also, I've found this code in a tutorial to Styling XML's:

Code:

<LINK href="mystyle.css" rel="style sheet" type="text/css">

<?xml-stylesheet href="mystyle.css" type="text/css"?>



<LINK href="mystyle.css" title="Compact" rel="stylesheet"

type="text/css">

<?xml-stylesheet href="mystyle.css" title="Compact" type="text/css"?>



<LINK href="mystyle.css" title="Medium" rel="alternate stylesheet"

type="text/css">

<?xml-stylesheet alternate="yes" href="mystyle.css" title="Medium"

type="text/css"?>

I would guess one line is needed and the others are just different variations you could use. Do one of these lines need to be inserted in the header of the XML? Assuming I ever find the proper CSS I'm wanting to use.

I'm trying to do this using the styles Hardwired and Dark Cloud.

I seem to recall writing a little HTA application like that for someone here awhile back. That may be the one you're referring to. If so, you need to launch the HTA file, not the XSL file, in order to view the formatted messages.

D'oh! You're right! Thanks! :D

But is there still hope for my local TFP PM hiearchy? I really would like to style it as if I were in the PM area for offline use.

oldtimer,

I already have a stylesheet that should work. I need you to send me the original HTA, XSL, and any other files in the original package at sinister_motives@cox.net as I no longer have them.

No problem. Sorry about the PM box as I see you had tried to PM me. If you were the man who created this utility, you are god. :D *As I can't remember where in the world I got this thing :o*

This is going to take a tad longer than I thought. I'll have to throw some regular expressions at the bbCode tags to make them behave. (Yeah, I have code for that too. Just gotta find it.)

Hey, whatever it takes. I'm sure it'll be that much sweeter when it's done. :D

Here you go. It's pretty choice, if I say so myself. :D

Copy and paste the two code sections into separate files and name them as shown below. Launch the HTA application and use as before.

private_message_viewer.hta

Code:

<html>

 <head>

  <title>vBulletin Private Message Viewer</title>

  <hta:application id="htaTag" applicationname="vBulletin Private Message Viewer" border="thick" borderstyle="normal" caption="yes" icon="chrome/app.ico" showintaskbar="yes" singleinstance="yes" sysmenu="yes" contextmenu="no" version="1.0" windowstate="maximize" selection="no" scroll="no" innerborder="yes" maximizebutton="no" minimizebutton="yes" />

  <script type="text/javascript">

   function unescapeXML(txt) {

    var lt = "&lt;";

    while (txt.indexOf(lt) > -1) {

     txt = txt.replace(lt,'<');

    }

    var gt = "&gt;";

    while (txt.indexOf(gt) > -1) {

     txt = txt.replace(gt,'>');

    }

    var amp = "&amp;";

    while (txt.indexOf(amp) > -1) {

     txt = txt.replace(amp,'&');

    }

    return txt;

   }



   function PrivMsgViewer() {

    this.document = new ActiveXObject('Microsoft.XMLDOM');

    this.document.async = "false";

    this.document.load(document.forms['console'].xml_file.value);

    var msgs = this.document.getElementsByTagName('message');

    for (i=0;i<msgs.length;i++) {

     var txt = msgs.item(i).text;

     txt = txt.replace(/\[QUOTE=([ \w]*)\]/g,'<div style="padding: 5px; border: 1px dotted #aaaaaa; margin-bottom: 5px;"><b>Quote:</b><br /><i>Originally posted by $1</i><br /><br />');

     txt = txt.replace(/\[\/QUOTE\]/g,'</div>');

     txt = this.document.createCDATASection(txt);

     this.document.getElementsByTagName('message').item(i).replaceChild(txt,this.document.getElementsByTagName('message').item(i).firstChild);

    }

    this.stylesheet = new ActiveXObject('Microsoft.XMLDOM');

    this.stylesheet.async = "false";

    this.stylesheet.load('priv_msgs.xsl');

    this.html = this.document.transformNode(this.stylesheet);

    // var privMsgWin = window.open('','privMsgWin','width=600,height=800,scrollbars=yes');

    privMsgWin.document.open('text/html','replace');

    privMsgWin.document.write(unescapeXML(this.html));

    privMsgWin.document.close();

   }

   function process() {

    var viewer = new PrivMsgViewer();

   }

  </script>

 </head>

 <body><h1>vBulletin Private Message Viewer</h1>

  <form name="console">

   XML File: <input type="file" name="xml_file">

   <button onclick="process()">View Messages</button>

  </form>

  <center><iframe name="privMsgWin" width="780" height="600" src=""></iframe></center>

 </body>

</html>

priv_msgs.xsl

Code:

<?xml version="1.0" ?>

 <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

  <xsl:output method="html"/>

  <xsl:template match="privatemessages">

   <html>

    <head>

     <title>Private Messages</title>

     <style type="text/css">

      body {

       font-family : century gothic, news gothic, sans-serif;

       color: #ffffff;

       background : #002B33;

       padding : 20px 10px 20px 10px;

       margin : 0px;

      }

      .t {

       letter-spacing : 0.5em;

       font-weight : bold;

       color : #728E9C;

      }

      .ti {

       letter-spacing : 0.5em;

       font-weight : bold;

       font-size : 48px;

       color : #ffffff;

      }

      .a, .b {

       font-size : 13px;

      }

      .a {

       font-weight: bold;

       color : #FF6666;

      }

      .pm {

       padding: 5px 0px 5px 0px;

      }

      .message {

       font-size: 13px;

       padding: 5px;

       background: #1D444D;

      }

     </style>

    </head>

    <body>

     <center><span style="font-size: 40px;"><span class="ti">P</span><span class="t">rivate </span><span class="ti">M</span><span class="t">essages</span></span></center>

     <xsl:apply-templates/>

    </body>

   </html>

  </xsl:template>

  <xsl:template match="folder">

   <h1 class="t" style="font-size: 24px;"><xsl:value-of select="@name"/></h1>

   <xsl:apply-templates/>

  </xsl:template>

  <xsl:template match="privatemessage">

   <div class="pm"><xsl:apply-templates/></div>

  </xsl:template>

  <xsl:template match="datestamp">

   <span class="a">Sent: </span><span class="b"><xsl:apply-templates/><br/></span>

  </xsl:template>

  <xsl:template match="title">

   <span class="a">Subject: </span><span class="b"><xsl:apply-templates/><br/></span>

  </xsl:template>

  <xsl:template match="fromuser">

   <span class="a">From: </span><span class="b"><xsl:apply-templates/><br/></span>

  </xsl:template>

  <xsl:template match="touser">

   <span class="a">To: </span><span class="b"><xsl:apply-templates/><br/><br/></span>

  </xsl:template>

  <xsl:template match="message">

   <div class="message"><xsl:apply-templates/></div>

  </xsl:template>

 </xsl:stylesheet>

Awesome! I'm bewildered! But one element remains askew: The style choice. It seems to have adopted the TFP v4.0 styleset instead of Dark Cloud or Hardwired as originally requested or was it made that way on purpose? Maybe you didn't see that part. :( Sorry to complicate things.

Also I was wondering whether you knew if the PM XML file saved by TFP also records the folder structure for the sake of organization. I believe it does not but I could be wrong. But if indeed the folder structure is not saved: Inbox, Sent Items & all Custom folders following are not going to be available when reviewing the PMs. If like I suspect, this is TFP's doing, could you write an routine to help TFP's PM archiving system save folder structures into an XML [assuming you know PHP and other associated code and submit that to Hal for implementation] and honor them when viewed by your application? For what I have right now is complete chaos amongst my PMs. On TFP, I had them branched off into folders and that seemed to help tons: Both in location time and next-to-none frustration isolating them for a one-by-one view. I'm sure this would be a worthwhile addition to your application and users archiving PMs on TFP.

Moreso, the URL BBCode doesn't seem to parse and remains plain-text leaving all links unlinkified and untitled, if titled. And in addition to the proposed improvements above, I was going off of the literal meaning of copying the PM area in the User CP, not just the style scheme. To elaborate, not the left column as it is unnecessary but the Folder Controls section shown in the User CP > Private Messages area. That way a automatic dropdown field will be available for all users using your application and load their corresponding folders into that list for quick jump. Then the way the PMs are shown could also be copied: Linkified Title that leads to individual read. I understand though that this could be by design. In that TFP structures the XML so that the PMs and their corresponding titles are shown at the same time. If that is the case, could your application manipulate the XML using some kind of rules to get the kind of view I'm talking about or must the PM archiving utility of TFP's be changed in the way it saves the XML? :crazy:

That way I'll have a true replica offline environment - organized and easy to read.

Thanks for all your hard work!!!! :thumbsup:

Quote:

Originally Posted by oldtimer

I must've missed that part. The v4.0 theme is the only one I've ever seen on TFP. I didn't realize there were others.

Quote:

Also I was wondering whether you knew if the PM XML file saved by TFP also records the folder structure for the sake of organization. I believe it does not but I could be wrong. But if indeed the folder structure is not saved: Inbox, Sent Items & all Custom folders following are not going to be available when reviewing the PMs. If like I suspect, this is TFP's doing, could you write an routine to help TFP's PM archiving system save folder structures into an XML [assuming you know PHP and other associated code and submit that to Hal for implementation] and honor them when viewed by your application? For what I have right now is complete chaos amongst my PMs. On TFP, I had them branched off into folders and that seemed to help tons: Both in location time and next-to-none frustration isolating them for a one-by-one view. I'm sure this would be a worthwhile addition to your application and users archiving PMs on TFP.

I really haven't played with the vBulletin archiving system, so I'm not sure what you mean. Do your custom folders not show up in the XML dump when you load it into the viewer?

Quote:

Moreso, the URL BBCode doesn't seem to parse and remains plain-text leaving all links unlinkified and untitled, if titled.

I didn't attempt to parse the full bbCode markup language, although I do have code for that as well. I'll post a revised HTA file here sometime.

Quote:

And in addition to the proposed improvements above, I was going off of the literal meaning of copying the PM area in the User CP, not just the style scheme. To elaborate, not the left column as it is unnecessary but the Folder Controls section shown in the User CP > Private Messages area. That way a automatic dropdown field will be available for all users using your application and load their corresponding folders into that list for quick jump. Then the way the PMs are shown could also be copied: Linkified Title that leads to individual read. I understand though that this could be by design. In that TFP structures the XML so that the PMs and their corresponding titles are shown at the same time. If that is the case, could your application manipulate the XML using some kind of rules to get the kind of view I'm talking about or must the PM archiving utility of TFP's be changed in the way it saves the XML? :crazy:

That way I'll have a true replica offline environment - organized and easy to read.

I really don't want to get into hacking vBulletin (or anyone else's code, for that matter), even if I could spare the $168 to obtain a copy. I fooled around with phpBB awhile back, and just looking at their shitty code gave me a headache. I found it much easier to write a full message board program from scratch than to install all the mods necessary to make phpBB useful. I am a good PHP programmer, but I'm pretty sure Halx knows way more about vBulletin than I'll ever care to learn.

Quote:

Thanks for all your hard work!!!! :thumbsup:

No problem! :)

Quote:

Originally Posted by SinisterMotives

I must've missed that part. The v4.0 theme is the only one I've ever seen on TFP. I didn't realize there were others.

It's alright. I had mentioned this at the bottom in the very first post of this thread. Along this note, would it be possible to add a Theme/Style button to the right of the "View Messages" button, then following a dropdown or pop-up box giving us a selection of TFP styles to choose from? If this requires making a Theme folder in the local directory along with where the private message viewer's hta and xsl are stored for the sake of application cleanliness, I'm all for it. This could help potential users from other forum systems [assuming your application spreads like I think it will] just place their own stylesheet files in there to get the look they're looking for, again, assuming they know how to make a stylesheet file corresponding from their forum.

Quote:

I really haven't played with the vBulletin archiving system, so I'm not sure what you mean. Do your custom folders not show up in the XML dump when you load it into the viewer?

Oh, on second thought they do! Sorry to confuse you. At first glance and scan, I didn't notice the Folder title headers. But this still leaves me weary and hard to find the things I'm looking for fast and orderly. Coupled with the fact there is no Search/Find feature: Out of curiosity is this doable within the confines of your application's world/coding or would it weigh down the filesize of the application nulling any benefits or is it fairly complicated to integrate? But to jump back on my original idea, could we make the initial viewing pane of your application display all the folders titles, if more than one folder other than 'Inbox' is detected, as an index w/clickable links to the actual separated source even if that includes additional loading?

This way I could have a hiearchy of:
• Inbox
• Sent Items
• Personals
• Support
etc.

displayed as so? And expanding upon request into a index of, corresponding by folder, PM titles that lead to individual views.

Quote:

I didn't attempt to parse the full bbCode markup language, although I do have code for that as well. I'll post a revised HTA file here sometime.

Appeciate it! On second look, it looked like as if all BBCode didn't render. I was initially fooled b/c one PM showed a word italicized. After a more indepth scan though, I realized that was not the entire case. I found Italics, Bold, URL, Email, Size & Quote not parsed. I'm not sure about the Underline tag. But even more astounding was that in intermittent PMs, some tags were parsing and a whole lot weren't. :crazy: Yes, they were correctly closed as I sense you're about to ask. Maybe a little tweaking is required in your app as something may have been askew? Or not completely implemented as you previously mentioned. But I would derive the former is a possibility b/c some tags of the same sort are being displayed and some aren't, so the "instructor" code could be a bit wacky.

If it helps isolate the problem - Working Intermittent code:
• Quote
• Bold
• Italic - *I think; Hard to tell using TFP v4.0 style

Smilies:
Also along these lines, would it possible to utilize a local directory for TFP's smilies [called maybe 'Smilies'] with actual copies contained and then have PMV [Private Mess. Viewer] display them? Trust me, I'm not trying to get you to get PMV to play DVDs. :lol: But I'm just trying to replicate the home and the feel of vBulletin PMs without being online or on the forum physically. Nothing more. My extravagant [if you can even call them that] ideas stop short of there. :D

To further elaborate on the idea, maybe an additional automatic creation process for a user wanting smilies. By selecting a 'Add Smilie Support' button or dropdown choice from a potential File menu > Options dropdown if you feel that would be more neater and less clutter on the other buttons already present. Then following, would be a pop-up for the user to enter manually the directory of the smilies for their corresponding forum, which your application would download and automatically create a 'Smilies' directory and place all gifs inside. Plus, any "identifying table" would have to be downloaded [if such a thing I'm proposing exists in vB forum coding] as well as most forums have symbols near impossible to document alone for proper conversion everytime. So PMV could be a ever-flexible application. In theory, it just goes with the flow.

Quote:

And by no means should you. I understand more than anyone the pains of a headache. Especially the more complicated the source is! :eek: But from what I've seen, visually, vB seems to look like it really has cleaned up it's act from it's past versions. But little do I know someone speaking from a developer/programmer's point of view might call it a code nightmare. But the previous notes lead me to believe there must be a organized structure as opposed to a complicated one for vB's DaVinchi's not to have a frustrating enough time to design and develop to their galore. I also believe there should a be a developer's or hacker's license available [for a cheaper price of course, since you don't plan on using it for its maximum use] if such a idea/practice has not already been thought of. Even though I'm not entirely sure vB is open source [b/c of the fact you have to pay for it], I've sure seen them welcome all hacks and mods and that's how they created such a success as v3.0.3.

So with that in mind, I'm about 100% sure Halx didn't design the PM archiving system. It came bundled with vB. I was thinkin', if possible, you might be able to improve upon the vB's PM archive hack or mod. Maybe you can add a HTML option? Which would save a PM replica environment according to what forum you're on, maybe get it to copy the current template style you have when selecting the Archive option, then you know have it save the PM area along with the messages in a "Save Webpage As" way. Or, even have it save XML outputs more cleanlier and organized as discussed above, if indeed there is a problem with the way they're saved?

Anyway, I'm droning. A lot of ideas here. Would you be willing to start a project on this? This could be the beginning of something very beautiful. ;)