News/Blog Tool - Customizing the Look

From HostBaby Wiki

Jump to: navigation, search

Changing the look of news.html

Admitadely, the news.html by default isn't terribly pretty, but the functionality is there and you can edit the news.html file with the instructions below to make it suit your tastes.


You can change all fonts, size, colors, and alignment with CSS stylesheets. There are links to resources at the bottom of this page. They're a great thing to get to know.


Changing the look and feel (fonts, size, colors, alignment) won't change the data in your news/blog/journal. They're kept in two different places. This is important to understand. The actual content, dates and anything else you entered before, is all kept as raw text in your own database. And now, to present it, you can choose any color scheme you want, and your news will be shown with that "theme".


It's a very cool way of working, and it's how XML and all future website technologies will work in the future, so you should learn a little something about it.


Here are some good links about CSS stylesheets:


Advanced edits

This section should hopefully answer most questions about how you can something more advanced than just making CSS changes on your news page. Some examples may be:

  • removing the date line completely
  • putting the info into table cells in a
  • just don't want to use CSS

    • Our optional template feature works in two steps:

    First, you create a *new* text file that will contain the template, which is just basically some PHP code. You can name this file whatever you want, although i suggest something easy like news.php or news-template.php (the .php extension isn't required though). In this file, you would put the code you want show_news() to use for every news entry. Our default code looks like this: Code: 

    <?php
  print '<div class="news_entry">' . "\n";
  if ($news_date != '0000-00-00 00:00:00') {
    print '<div class="news_date">' . date($dateformat, strtotime($news_date)) . "</div>\n";
  }
  if (!empty($news_title)) {
    print '<h2 class="news_title">' . nl2br(link_urls($news_title)) . "</h2>\n";
  }
  print '<div class="news_text">' . nl2br(link_urls($news_text)) . "</div>\n" .
         "</div>\n";
?>

    You'd upload this file into the same folder containing your news page (most likely /web/).

    Next, after you have your template, you need to edit your news page (FTP-downloading and editing in a text editor is described in the tutorial linked above), find the "show_news()" line and change it to: <? show_news("my-template-filename.php"); ?> Save the file and upload it, overwriting the old version.

    (For those of you using separate artist codes for your show_news, the template filename would be the *2nd* argument, i.e.: show_news("artistcode", "news.php"); )


    About template files

    One thing i've seen a few people do is make their template file as a regular html page by adding stuff like <html><head>..<body>, etc. You don't need that. All that does is cause your news page to big larger (thus slower to load) and possibly confuse some web browsers.

    The code in your template file will be used for every news entry you have. You can get a good idea how this works by comparing the news page as it looks on your computer vs. how it looks when you visit it on your site and View Page Source in your browser. You'll see that the "show_news()" line has been replaced by esentially that default template above (several divs), only with your info substituted in for each one.

    There are 4 variables that we're using: 

    $dateformat - comes from the Date Format you specify on your /hostbaby -> Options/Preferences page. It's a format specific to PHP's date() function, which is described in detail on php.net. The default dateformat (the first line of the dropdown) is: "l, F jS, Y g:i A T"

    $news_date - the plain text exact date of your entry, formatted as a string: "YYYY-MM-DD HH:MM:SS". It is automatically adjusted for the timezone specified on /hostbaby Options/Preferences page.

    $news_text - the raw text you typed into the news text box. We do two things to it by default (wrap it in two functions) before displaying it:

        nl2br will change your newlines/enters into <br>s
        link_urls() is a function we wrote to find unlinked URLs in the text and link them. You *can* use HTML when you type out your news, but in case you don't, this function will do it for you.

        $news_title - the "title" of the news entry (same $news_text rules above apply here as well)

    Template examples

    Removing the date line: Code: 

        <div class="news_entry">
    <h2 class="news_title"><?= nl2br(link_urls($news_title)) ?></h2>
    <div class="news_text"><?= nl2br(link_urls($news_text)) ?></div>
    </div>

    Table cells: Code: 

        <tr>
    <td><?= date($dateformat, strtotime($news_date)) ?></td>
    <td><b><?= nl2br(link_urls($news_text)) ?></b><br /><?= nl2br(link_urls($news_text)) ?></td>
    </tr>
    The <table> line would actually be in your news page.. something like:
    Code:
    <table border="0" cellpadding="1">
    <tr><th>Date</th><th>News</th></tr>
    <? show_news("news-template.php") ?>
    </table>

    Don't wanna use CSS: Code: 

        <font color="red"><?= date($dateformat, strtotime($news_date)) ?></font><br />
    <font size="4"><b><?= nl2br(link_urls($news_text)) ?></b></font><br />
    <font size="2"><?= nl2br(link_urls($news_text)) ?></font><br /><br />

    Whatever: Code: 

        <tr>
    <td valign="top" align="right" class="mydate">
    <?= date("F jS", strtotime($news_date)) ?>
    </td>
    <td>
    <b><?= date("j:ma", strtotime($news_date)) ?></b> -<br />
    <b><?= nl2br(link_urls($news_title)) ?></b> -<br />
    <?= nl2br(link_urls($news_text)) ?>
    </td>
    </tr>

    This will make it look something like: Code: 

        August 6th 8:01pm -
               title here -
               blah blah blah and,
               stuff.
    (this requires you surround the show_news() function call with a <table>, like i talked about above)
    Retrieved from "http://hostbaby.org/wiki/News/Blog_Tool_-_Customizing_the_Look"
Personal tools