Michael (masterslacker) wrote in component_help,
Michael
masterslacker
component_help

Random Quote Component

This is an updated version of the original Random Quote code which can be found HERE. I have decided to update it to fix the corner colours, allow for titles, give a choice of all rounded component or normal component, and making adjustments to the style of the quote. Hopefully this would also make it much easier for others who wish to play with the way it prints.

If you already have your random quote working you don't need to change it. However if you are having problems with it and would like to change it somehow, I recommend you try the following.

The following code is not attached to any function. You must place it inside a function that prints components for it to work. You can use the Additional Components tutorial to add it as a free text component, or possibly the Editing the Profile tutorial to add it after the profile. It's up to you.

Text in green are comments and describe the segments of code after it. Generally they tell you what you can change, usually in red, to achieve different effects.

Code:
    # Determine the colouring for the rounded corners based on the actual page colours. Do not change.
    # You only need one copy of these four lines per function, so if you already have it in the function you place this code
    # in, then you can remove these four lines since the variable will already be defined. Make sure that the lines appear
    # before any code which uses the $corner_color variable.
    var Color header = $*header_bgcolor;
    var Color headerMinus5  = $header->darker(50);
    var Color headerPlus3   = $header->lighter(30);
    var string corner_color = "/p0"+$headerPlus3->substr(1,6)+"1"+$headerMinus5->substr(1,6)+"2"+$header->substr(1,6);

    # Set properties that will be used to determine how the component prints.
    # If you want the component to look like one of the other components, then set all_rounded to false.
    # If you want to change the title of the component, then change the value for random_quote_title by changing what is red.
    # If you don't want a title on the all rounded component, then just set random_quote_title to nothing, ie. ="";.
    var bool all_rounded = true;
    var string random_quote_title = "Random Quote";

    # Define the quotes array and add some sample quotes.
    # You can modify the quotes by replacing the ones below with whatever you like. You can also adding new lines by 
    # repeating the pattern and always making sure to increment each index by 1, starting from 0.
    # Note that you can use html in these values.
    var string[] quotes;
    $quotes[0]="""Dare to dance on the paths between the stars.""";
    $quotes[1]="""See in Ritual Vision""";
    $quotes[2]="""Dance to a symphony<br/>of Silent Laughter""";
    $quotes[3]="""All thought is Eternity""";
    $quotes[4]="""Forever is only a Whisper.""";
    $quotes[5]="""Death is a mad Lie.""";
    $quotes[6]="""Dream A Star out of Sacred Shadow.""";

    # Pick one of the quotes randomly.  
    var int randquote;
    $randquote = rand(0, ((size $quotes) - 1));

    # Print the Random Quote Component.
    if ($all_rounded) {
      """
      <tr>
        <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
        <td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
        <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-top-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
      </tr><tr>
        <td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
      </tr><tr>
        <td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
      """;
      if ($random_quote_title!="") {
        """
        </tr><tr>
          <td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
          <td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
          <td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
          <td class="tabBg" width="100%">
                  <span class="sideHeader">$random_quote_title</span>
          <td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
          <td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
          <td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
        </tr><tr>
          <td class="medLine" colspan="7"><img src="http://test.livejournal.org/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
        </tr><tr>
          <td class="dkLine" colspan="7"><img src="http://test.livejournal.org/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
        """;
      }
      """
      </tr><tr>
        <td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
        <td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
        <td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
        <td class="tabBg" width="100%">
                <span class="randomquote">$quotes[$randquote]</span>
        <td class="tabBg" width="3"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
        <td class="ltLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
        <td class="dkLine" width="1"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
      </tr><tr>
        <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-left.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
        <td class="tabBg"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
        <td valign="top" rowspan="3" colspan="3" width="5"><img src="http://www.livejournal.com/palimg/component/curve-bottom-right.gif$corner_color" width="5" height="5" alt="" border="0" /></td>
      </tr><tr>
        <td class="ltLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
      </tr><tr>
        <td class="dkLine"><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="1" alt="" border="0" /></td>
      </tr><tr>
        <td colspan=5><img src="http://www.livejournal.com/palimg/component/clear.gif" width="1" height="3" alt="" border="0" /></td>
      </tr>
    """;
    } else {
      print_comp_header($random_quote_title);
      """<span class="randomquote">$quotes[$randquote]</span>""";   
      print_comp_footer();  
    }
The quote is printed based on the definition of a new class called "randomquote". Since that class is not defined, it will print left-aligned, in a regular font. If you would like to adjust this, then you can use the Print Custom Head tutorial which shows how to define a new style. The following example will make it centered, bolded, and italicized.
    function Page::print_custom_head() {
      """
      <style type="text/css">
        .randomquote{
          text-align: center;
          font-weight: bold;
          font-style: italic;
        }
      </style>
      """;
    }
If you're already using the print_custom_head function then you just need to add the .randomquote{...} block into it. You can also remove any of the three lines in blue to change the effect of the printing, or also change the values that are assigned to them. A good reference for setting the CSS can be found HERE.

If you want some interesting quotes, I recommending using qotd.org. It's a site that allows you to search for quotes by author or contained words. There's also a daily mailing list if you want to receive about 5-6 every day on a given topic. I've been on it for a few years now and it's always interesting.

Have fun!

Mike.
Tags: admin: deprecated, user: masterslacker
Subscribe

  • Tutorials, etc.

    Since a prior maintainer of this community felt it necessary to delete all the entries about how to actually do things (ahem) help can be obtained by…

  • HOWTO: Fixing the Display of Mood Theme Images

    UPDATE: As of Release #68 on August 10th, 2010, this problem has been resolved and should no longer affect users using non-custom (i.e.…

  • Layout width problems in Internet Explorer 8

    Hi there, I recently noticed that my layout looks really messed up in IE 8 (Layer #15404192). The sidebar components width is way out of…

  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

  • 32 comments

  • Tutorials, etc.

    Since a prior maintainer of this community felt it necessary to delete all the entries about how to actually do things (ahem) help can be obtained by…

  • HOWTO: Fixing the Display of Mood Theme Images

    UPDATE: As of Release #68 on August 10th, 2010, this problem has been resolved and should no longer affect users using non-custom (i.e.…

  • Layout width problems in Internet Explorer 8

    Hi there, I recently noticed that my layout looks really messed up in IE 8 (Layer #15404192). The sidebar components width is way out of…