
* How to make your own theme (via css)


The simplest way of making your own theme is to copy an existing theme
and to modify its CSS file:


1) copy a (complete) theme directory, for instance themes/plain:
	cp -R themes/plain themes/my_theme

2) edit the ID file (themes/my_theme/id.txt) to give the theme a unique name

3) edit the style sheet file (themes/my_theme/style.css): 
   change styles for any division/class you like to change
   (look at the default structures described below)

Done!



What you have to know about the structure of pppBLOG pages:


<body>
  <div class="page">

    <!-- HERE YOU MAY HAVE THE HEADER-MENU/IMAGE  -->
    <div class="header">
      <!-- HERE IS THE HEADER WITH BLOG TITLE AND HEADER LINKS -->
    </div>

    <div class="main">

      <div class="left">
        <div class="sidebar">
          <!-- HERE IS THE LEFT-SIDE MENU WITH ALL ITS BLOCKS-->
        </div>
      </div>

      <div class="right">
        <div class="sidebar">
          <!-- HERE IS THE RIGHT-SIDE MENU WITH ALL ITS BLOCKS-->
        </div>
      </div>

      <div class="centercontent">
          <!-- HERE YOU HAVE ALL BLOG ENTRIES, STATIC PAGES, ETC -->
      </div>

    <!-- END OF MAIN -->
    </div>

    <div class="footer">
       <!-- HERE IS THE FOOTER -->
    </div>

  <!-- END OF PAGE -->
  </div>
</body>




A standard menu block has the following structure (same for left or right):
(some blocks are different, e.g. they may not have a title division)


<div class="menu_block">
  <div class="menu_title">
    <!-- TITLE/HEADER OF THE MENU BLOCK -->
  </div>
  <div class="menu_body">
    <!-- BODY/CONTENTS OF THE MENU BLOCK -->
  </div>
</div>
<br />



A standard blog entry looks like this:


<div class="blog_entry">
  <div class="blog_title">
    <div class="blog_categories">
      <!-- CATEGORY LIST -->
    </div>
    <!-- BLOG ENTRY SUBJECT LINE (+ PERMALINK-ADRESS) -->
  </div>
  <div class="blog_body">
    <div class="blog_author">
      <!-- BLOG ENTRY AUTHOR (USER NAME) -->
    </div>
    <div class="blog_translations">
      <!-- LINKS TO BLOG ENTRY TRANSLATIONS (IF EXISTING) -->
    </div>
    <!-- BLOG ENTRY BODY/CONTENTS -->
    <br clear="all">
  </div>
  <div class="blog_date">
    <!-- ENTRY DATE -->
  </div>
  <div class="blog_comment">
    <!-- LINKS FOR ADDING COMMENTS, RATING; VIEW COUNTERS -->
  </div>
</div>
<br />




This (or similar) is how the blog header looks like:

    <div class="header">
      <div class="search_box">
        <br />
        <form accept-charset="ISO-8859-1,iso-8859-1,utf-8" 
              method="get" action="search.php">
          <input type="text" size="14" name="q" />&nbsp;
          <input type="submit" value="Go" />
        </form>      
      </div>
      <div class="title">
	<a href="index.php">YOUR BLOG TITLE</a>
      </div>
      <span class="links">
         <a href="index.php">Home</a> / 
         <a href="stats.php">Stats</a> / 
         <a href="contact.php">Contact Me</a> / 
         <a href="login.php">Login</a>
      </span>    
    </div>




* How to make your own theme (php)


Another way of making your own theme is to make your own themes.php
file (and maybe also user_style.php). Here you can make even changes
to the general structure if you like. Here are some examples using the
files from the 'plain' theme to start with:


* You want to change the default colors used in the theme:
  Change the colors in [code]function theme_default_colors[/code] in
  [code]themes.php[/code]. You can define your own classes but make sure
  that they are used in the html produced by the blog and that they
  are provided by 'user_style.php'

* You don't like the general page layout:
  Change the [code]function theme_pagelayout[/code] in
  [code]themes.php[/code] that calls the function 
  [code]default_pagelayout()[/code] in [code]scripts/sb_theme.php[/code].
  You may copy the default_pagelayout function to the themes.php file into the 
  [code]theme_pagelayout[/code] function and then modify as you like.

* You don't like the popup layout:
  Change the [code]function theme_popuplayout[/code] in 
  [code]themes.php[/code] in the same way as the pagelayout function above.

* You don't like the blog entry layouts:
  Change the functions [code]theme_blogentry[/code], 
  [code]theme_staticentry[/code] or [code]theme_commententry[/code] in
  [code]themes.php[/code] as you like. Now they are calling all the same
  function [code]default_blogentry[/code] in [code]scripts/sb_theme.php[/code].

Let's look at the last problem in more detail with one little example:

The problem is that you don't like to have the blog date at the bottom
of your blog entries. To change this you can copy the contents of the
function [code]default_blogentry[/code] from
[code]scripts/sb_theme.php[/code] to the function
[code]theme_blogentry[/code] into the themes.php of your theme. Now,
move the line that is responsible for printing the blog data to the
place where you like to have it. For example to move it to the blog
entry title box move the lines

[code]
  // Display blogentry DATE
  $blog_content .= blogentry_date($entry_array);		
[/code]

into the the division [code]<div class="blog_title">[/code]. You maybe
have to adjust the styles in the style.css file to adjust it to your
theme.


