<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xml:base="https://mg.to" xmlns:dc="https://purl.org/dc/elements/1.1/">
<channel>
 <title>mg.to - FriendsLight theme with styled preview - Comments</title>
 <link>https://mg.to/2005/03/13/friendslight-theme-with-styled-preview</link>
 <description>Comments for &quot;FriendsLight theme with styled preview&quot;</description>
 <language>en</language>
<item>
 <title>Yes, that&#039;s in 4.6, but I don&#039;t really like it</title>
 <link>https://mg.to/2005/03/13/friendslight-theme-with-styled-preview#comment-83</link>
 <description>&lt;p&gt;theme_node_preview() is new in Drupal 4.6, and I originally wrote this code for 4.5.2.&lt;/p&gt;

&lt;p&gt;I don&amp;#8217;t like the way theme_node_preview() works, though. It wraps the entire preview area, both the excerpt and the full post, inside a single div with the preview class. If we apply my theme style to Drupal 4.6 using theme_node_preview(), this is the result:&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://mg.to/images/drupal-node-preview-46rc.png&quot;&gt;Preview using theme_node_preview()&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;By comparsion, the same preview using my code looks like this:&lt;/p&gt;

&lt;p&gt;&lt;a href=&quot;https://mg.to/images/drupal-node-preview-mg.png&quot;&gt;Preview using $node-&amp;gt;preview&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I think the latter looks better and is more clear.&lt;/p&gt;

&lt;p&gt;Also, theme_node_preview() doesn&amp;#8217;t help with comment previews, while my code with $comment-&amp;gt;preview does.&lt;/p&gt;

&lt;p&gt;There&amp;#8217;s some more discussion of the two preview approaches &lt;a href=&quot;https://drupal.org/node/18845&quot;&gt;here&lt;/a&gt;.&lt;/p&gt;</description>
 <pubDate>Thu, 12 May 2005 16:17:52 +0000</pubDate>
 <dc:creator>Michael Geary</dc:creator>
 <guid isPermaLink="false">comment 83 at https://mg.to</guid>
</item>
<item>
 <title>theme_node_preview</title>
 <link>https://mg.to/2005/03/13/friendslight-theme-with-styled-preview#comment-80</link>
 <description>&lt;p&gt;Are you aware of theme_node_preview()? It wraps the previewed nodes with a class &amp;#8220;preview&amp;#8221;.&lt;/p&gt;</description>
 <pubDate>Fri, 06 May 2005 18:04:39 +0000</pubDate>
 <dc:creator>Visitor</dc:creator>
 <guid isPermaLink="false">comment 80 at https://mg.to</guid>
</item>
<item>
 <title>FriendsLight theme with styled preview</title>
 <link>https://mg.to/2005/03/13/friendslight-theme-with-styled-preview</link>
 <description>&lt;p&gt;If you&amp;#8217;re like me, you&amp;#8217;ve lost your work in Drupal a few times when you&amp;#8217;ve previewed an edit and then forgotten to save it. Drupal&amp;#8217;s preview page hardly looks any different from a normal display page.&lt;/p&gt;

&lt;p&gt;When my boss lost &lt;em&gt;his&lt;/em&gt; work because of this preview page confusion, I figured I&amp;#8217;d better do something about it, so I updated the FriendsLight theme to highlight preview pages visually. I posted some screen shots on &lt;a href=&quot;https://mg.to/2005/03/13/drupal-preview-confusion&quot; title=&quot;Drupal preview confusion&quot;&gt;my blog&lt;/a&gt;. Or, you can try the new theme out by entering a comment to this post and previewing it.&lt;/p&gt;

&lt;p&gt;Unfortunately, Drupal does not provide any information to its themes to tell them they are rendering a preview and not a fully saved message. Fixing this requires changing the Drupal core modules &lt;strong&gt;&lt;code&gt;node.module&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;comment.module&lt;/code&gt;&lt;/strong&gt;, but it&amp;#8217;s a straightforward one-line change in each. The code simply adds &lt;code&gt;$node-&amp;gt;preview&lt;/code&gt; and &lt;code&gt;$comment-&amp;gt;preview&lt;/code&gt; flags which can be tested in a theme or theme engine.&lt;/p&gt;

&lt;!--break--&gt;

&lt;p&gt;For Drupal 4.5.2, here is the patch to &lt;code&gt;node.module&lt;/code&gt;:&lt;/p&gt;

&lt;div style=&quot;padding: 5px !important; border: 1px solid rgb(253,187,134) !important; background-color: rgb(255,253,245) !important; font-family: Verdana,sans-serif !important;&quot;&gt;&lt;div style=&quot;background-color: rgb(255,250,238) !important;&quot;&gt;&lt;div class=&quot;geshi-diff&quot;&gt;&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #228822;&quot;&gt;--- c:node.module&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;2004-12-23 22:44:01.000000000 -0800&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&lt;span style=&quot;color: #228822;&quot;&gt;+++ m:node.module&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;2005-03-12 17:52:19.000000000 -0800&lt;/span&gt;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #aaaa88;&quot;&gt;@@ -1299,6 +1299,7 @@&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&amp;nbsp;function node_preview&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt;$node&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&amp;nbsp; &amp;nbsp;// Convert the array to an object:&lt;br /&gt;&lt;/div&gt;
&amp;nbsp; &amp;nbsp;$node = array2object&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt;$node&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #00b000;&quot;&gt;+&amp;nbsp; $node-&amp;gt;preview = TRUE;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&amp;nbsp; &amp;nbsp;if &lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt;node_access&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt;&#039;create&#039;, $node&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#41;&lt;/span&gt; || node_access&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt;&#039;update&#039;, $node&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#41;&lt;/span&gt;&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp;// Load the user&#039;s name when needed:&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;And here&amp;#8217;s the patch to &lt;code&gt;comment.module&lt;/code&gt;:&lt;/p&gt;

&lt;div style=&quot;padding: 5px !important; border: 1px solid rgb(253,187,134) !important; background-color: rgb(255,253,245) !important; font-family: Verdana,sans-serif !important;&quot;&gt;&lt;div style=&quot;background-color: rgb(255,250,238) !important;&quot;&gt;&lt;div class=&quot;geshi-diff&quot;&gt;&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #228822;&quot;&gt;--- c:comment.module&amp;nbsp; &amp;nbsp; 2005-01-12 08:01:55.000000000 -0800&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&lt;span style=&quot;color: #228822;&quot;&gt;+++ m:comment.module&amp;nbsp; &amp;nbsp; 2005-03-12 17:51:11.000000000 -0800&lt;/span&gt;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #aaaa88;&quot;&gt;@@ -494,6 +494,8 @@&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&amp;nbsp; &amp;nbsp;$output = &#039;&#039;;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;br /&gt;&lt;/div&gt;
&amp;nbsp; &amp;nbsp;$comment = new StdClass&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #00b000;&quot;&gt;+&amp;nbsp; $comment-&amp;gt;preview = TRUE;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&lt;span style=&quot;color: #00b000;&quot;&gt;+&lt;/span&gt;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&amp;nbsp; &amp;nbsp;foreach &lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt;$edit as $key =&lt;span style=&quot;color: #00aaee;&quot;&gt;&amp;gt; $value) {&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&amp;nbsp; &amp;nbsp; &amp;nbsp;$comment&lt;span style=&quot;color: #991111;&quot;&gt;-&amp;gt;$key = $value;&lt;/span&gt;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&amp;nbsp; &amp;nbsp;&lt;span style=&quot;color: #0000FF;&quot;&gt;&amp;#125;&lt;/span&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;This code has not changed at all in the CVS Drupal 4.6.0, only the line numbers are different for the patches.&lt;/p&gt;

&lt;p&gt;It was simple to update FriendsLight to use the new flags. Just inside the outermost &lt;code&gt;&amp;lt;div&amp;gt;&lt;/code&gt; in both &lt;strong&gt;&lt;code&gt;node.tpl.php&lt;/code&gt;&lt;/strong&gt; and &lt;strong&gt;&lt;code&gt;comment.tpl.php&lt;/code&gt;&lt;/strong&gt;, I added this at the beginning:&lt;/p&gt;

&lt;div style=&quot;padding: 5px !important; border: 1px solid rgb(253,187,134) !important; background-color: rgb(255,253,245) !important; font-family: Verdana,sans-serif !important;&quot;&gt;&lt;div style=&quot;background-color: rgb(255,250,238) !important;&quot;&gt;&lt;div class=&quot;geshi-php&quot;&gt;&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #000000; font-weight: bold;&quot;&gt;&amp;lt;?php&lt;/span&gt; &lt;span style=&quot;color: #C00000;&quot;&gt;if&lt;/span&gt;&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt; &lt;span style=&quot;color: #0000ff;&quot;&gt;$node&lt;/span&gt;-&amp;gt;&lt;span style=&quot;color: #006600;&quot;&gt;preview&lt;/span&gt; &lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;a href=&quot;https://www.php.net/print&quot;&gt;&lt;span style=&quot;color: #000066;&quot;&gt;print&lt;/span&gt;&lt;/a&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;&#039;&amp;lt;div class=&amp;quot;preview&amp;quot;&amp;gt;&#039;&lt;/span&gt;; &lt;span style=&quot;color: #000000; font-weight: bold;&quot;&gt;?&amp;gt;&lt;/span&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;and this at the end:&lt;/p&gt;

&lt;div style=&quot;padding: 5px !important; border: 1px solid rgb(253,187,134) !important; background-color: rgb(255,253,245) !important; font-family: Verdana,sans-serif !important;&quot;&gt;&lt;div style=&quot;background-color: rgb(255,250,238) !important;&quot;&gt;&lt;div class=&quot;geshi-php&quot;&gt;&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #000000; font-weight: bold;&quot;&gt;&amp;lt;?php&lt;/span&gt; &lt;span style=&quot;color: #C00000;&quot;&gt;if&lt;/span&gt;&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt; &lt;span style=&quot;color: #0000ff;&quot;&gt;$node&lt;/span&gt;-&amp;gt;&lt;span style=&quot;color: #006600;&quot;&gt;preview&lt;/span&gt; &lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#41;&lt;/span&gt; &lt;a href=&quot;https://www.php.net/print&quot;&gt;&lt;span style=&quot;color: #000066;&quot;&gt;print&lt;/span&gt;&lt;/a&gt; &lt;span style=&quot;color: #ff0000;&quot;&gt;&#039;&amp;lt;/div&amp;gt;&#039;&lt;/span&gt;; &lt;span style=&quot;color: #000000; font-weight: bold;&quot;&gt;?&amp;gt;&lt;/span&gt; &lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;And I added these new styles to &lt;strong&gt;&lt;code&gt;style.css&lt;/code&gt;&lt;/strong&gt;:&lt;/p&gt;

&lt;div style=&quot;padding: 5px !important; border: 1px solid rgb(253,187,134) !important; background-color: rgb(255,253,245) !important; font-family: Verdana,sans-serif !important;&quot;&gt;&lt;div style=&quot;background-color: rgb(255,250,238) !important;&quot;&gt;&lt;div class=&quot;geshi-css&quot;&gt;&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #808080; font-style: italic;&quot;&gt;/* Preview */&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&lt;span style=&quot;color: #6666ff;&quot;&gt;.preview &lt;/span&gt;&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&amp;nbsp; &lt;span style=&quot;color: #C00000;&quot;&gt;background&lt;/span&gt;: &lt;span style=&quot;color: #993333;&quot;&gt;rgb&lt;/span&gt;&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #cc66cc;&quot;&gt;255&lt;/span&gt;,&lt;span style=&quot;color: #cc66cc;&quot;&gt;240&lt;/span&gt;,&lt;span style=&quot;color: #cc66cc;&quot;&gt;230&lt;/span&gt;&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;&lt;/div&gt;
&amp;nbsp; &lt;span style=&quot;color: #C00000;&quot;&gt;border&lt;/span&gt;: 2px &lt;span style=&quot;color: #993333;&quot;&gt;dashed&lt;/span&gt; &lt;span style=&quot;color: #993333;&quot;&gt;rgb&lt;/span&gt;&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#40;&lt;/span&gt;&lt;span style=&quot;color: #cc66cc;&quot;&gt;204&lt;/span&gt;,&lt;span style=&quot;color: #cc66cc;&quot;&gt;82&lt;/span&gt;,&lt;span style=&quot;color: #cc66cc;&quot;&gt;0&lt;/span&gt;&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#41;&lt;/span&gt;;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&amp;nbsp; &lt;span style=&quot;color: #C00000;&quot;&gt;padding&lt;/span&gt;: 8px;&lt;br /&gt;&lt;/div&gt;
&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #6666ff;&quot;&gt;.node &lt;/span&gt;&lt;span style=&quot;color: #6666ff;&quot;&gt;.preview &lt;/span&gt;&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&amp;nbsp; &lt;span style=&quot;color: #C00000;&quot;&gt;padding-top&lt;/span&gt;: 0px;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&amp;nbsp; &lt;span style=&quot;color: #C00000;&quot;&gt;margin-top&lt;/span&gt;: 8px;&lt;br /&gt;&lt;/div&gt;
&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;br /&gt;
&lt;div style=&quot;background-color:rgb(255,234,216);&quot;&gt;&lt;span style=&quot;color: #6666ff;&quot;&gt;.comment &lt;/span&gt;&lt;span style=&quot;color: #6666ff;&quot;&gt;.preview &lt;/span&gt;&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#123;&lt;/span&gt;&lt;br /&gt;&lt;/div&gt;
&lt;span style=&quot;color: #66cc66;color: #0000FF;&quot;&gt;&amp;#125;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;

&lt;p&gt;Other themes would need to do this in their own way.&lt;/p&gt;

&lt;p&gt;Also new in this version of FriendsLight: For message excerpts, I moved the &lt;strong&gt;read more&lt;/strong&gt; links up above the other links so that they are more prominent. I also fixed a bug in the way categories are displayed.&lt;/p&gt;

&lt;p&gt;The new version of FriendsLight is &lt;a href=&quot;https://mg.to/files/friendslight-2005-03-13.tgz&quot;&gt;attached&lt;/a&gt; to this message. Enjoy!&lt;/p&gt;
</description>
 <comments>https://mg.to/2005/03/13/friendslight-theme-with-styled-preview#comments</comments>
 <category domain="https://mg.to/topics/software/drupal">Drupal</category>
 <enclosure url="https://mg.to/files/friendslight-2005-03-13.tgz" length="29534" type="application/binary" />
 <pubDate>Sun, 13 Mar 2005 08:05:54 +0000</pubDate>
 <dc:creator>Michael Geary</dc:creator>
 <guid isPermaLink="false">108 at https://mg.to</guid>
</item>
</channel>
</rss>
