SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how to add css colored boxes to my blog entries

    I have put a div around the PHP below called box1. What I am trying to do is have a different colored box around every different blog entry. Right now all my entries appear in the same colored box which I dont want. I have tried closing the div after <hr class="hr3" /> because after that a new blog entry begins. When I close the div after h3 the first entry is in the colored box but the other entries are out of place. I have no idea how to do this. Please can someone help!?

    The code below is what I currently have on my index page to display my blog entries.

    Code:
    #box1 {
    width:570px;
    background-color:#aaa;
    }
    PHP Code:
    <div id="box1">
              <?php

    function showinweb($val) {

        
    $val nl2br($val);
    //return returns the value and ends execution of function, so any line below it is ignored    
        
    return($val);
        
    }


    $page = (!isset($_GET['page'])) ? 1$_GET['page'];

    // Define the number of results per page
    $max_results 3;

    // Figure out the limit for the query based
    // on the current page number.
    $from = (($page $max_results) - $max_results);

    // Perform MySQL query on only the current page number's results


    $sql "SELECT id,
                    DATE_FORMAT(timestamp, '%a.%b.%y') as dateAdded,
                    title,
                    entry,
                    password,
                    image
            FROM php_blog ORDER BY timestamp DESC LIMIT 
    $from$max_results";
            
    $result mysql_query($sql) or print ("Can't select entries from table php_blog.<br />" $sql "<br />" mysql_error());

    $i =1;
    while(
    $row mysql_fetch_assoc($result)) {

            echo 
    "<p class='blogtitle'> <span class='blogtit'>".showinweb($row['title'])."</span></p><br />";
            echo 
    "<br /><br />".smiley(showinweb($row['entry']));
            echo 
    "<img id='thisimage$i' onmouseover='showdiv(this.id);' onmouseout ='hidediv();' src='entry/blog_images/".showinweb($row['image'])."' alt='' /> ";
            echo 
    "<br />".showinweb($row['dateAdded']);

            
    //count number of comments for this post
            
    $result2 mysql_query ("SELECT id FROM php_blog_comments WHERE entry='".$row['id']."'");
            
    $num_rows mysql_num_rows($result2);
            if (
    $num_rows 0) {
              
              
    //if there's only 1 comment, use singular comment (comment)
              
    if($num_rows == 1){
                
    $word_comment " comment";
              }else{
              
    //use pluralize comment (comments)
                
    $word_comment " comments";
              }
                echo 
    " <a href=\"entry/journal.php?id=".$row['id']."\">".$num_rows.$word_comment."</a><br />";
            }
    else {
            echo 
    "<a href=\"entry/journal.php?id=" showinweb($row['id']) . "\"> Leave a comment</a>"; }
            echo 
    '<br /><hr class="hr3" /><br />';
           
       
    $i++;
    }

    // Figure out the total number of results in DB:
    $total_results mysql_result(mysql_query("SELECT COUNT(*) as Num FROM php_blog"),0);

    // Figure out the total number of pages. Always round up using ceil()
    $total_pages ceil($total_results $max_results);

    // Build Page Number Hyperlinks
    // echo "<center>Select a Page<br />";

    // Build Previous Link
    if($page 1){
        
    $prev = ($page 1);
        echo 
    "<a href=\"".$_SERVER['PHP_SELF']."?page=$prev\">&lt;&lt;Previous</a> ";
    }

    for(
    $i 1$i <= $total_pages$i++){
        if((
    $page) == $i){
            echo 
    "$i ";
            } else {
                echo 
    "<a href=\"".$_SERVER['PHP_SELF']."?page=$i\">$i</a> ";
        }
    }

    // Build Next Link
    if($page $total_pages){
        
    $next = ($page 1);
        echo 
    "<a href=\"".$_SERVER['PHP_SELF']."?page=$next\">Next&gt;&gt;</a>";
    }
    // echo "</center>";
    ?></div>
    How can I seperate blog entries with different colored css boxes?

  2. #2
    rajug.replace('Raju Gautam'); bronze trophy Raju Gautam's Avatar
    Join Date
    Oct 2006
    Location
    Kathmandu, Nepal
    Posts
    4,013
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please find the code below which may be helpful to you. This is what i have done already for my same purpose.
    PHP Code:
    $result mysql_query("select * from blogentries") or die(mysql_error());
    if(
    mysql_num_rows($result) >= 1){
        
    $colval dechex(mt_rand(016777215));
        
    $colval sprintf('%06s'$colval);
        while(
    $rows mysql_fetch_array($result)){
            
    $colval dechex(mt_rand(016777215));
            
    $colval sprintf('%06s'$colval);
            echo 
    '<div style="color:#000000;background-color:#' $colval ';">' $rows['blog_details'] . '</div>';
        }

    Mistakes are proof that you are trying.....
    ------------------------------------------------------------------------
    PSD to HTML - SlicingArt.com | Personal Blog | ZCE - PHP 5

  3. #3
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    Hi this my attempt putting your code into mine:
    PHP Code:
    $i =1;
    if(
    mysql_num_rows($result) >= 1){
    $colval dechex(mt_rand(016777215));
    $colval sprintf('%06s'$colval);

    while(
    $rows mysql_fetch_array($result)){
    $colval dechex(mt_rand(016777215));
    $colval sprintf('%06s'$colval);
            
            echo 
    "<p class='blogtitle'> <span class='blogtit'>".showinweb($row['title'])."</span></p><br />";
            echo 
    "<br /><br /><div style='color:#000000;background-color:# . $colval . '>" .smiley(showinweb($row['entry'] . '</div>'));
            echo 
    "<img id='thisimage$i' onmouseover='showdiv(this.id);' onmouseout ='hidediv();' src='entry/blog_images/".showinweb($row['image'])."' alt='' /> ";
            echo 
    "<br />".showinweb($row['dateAdded']);
        } 
    When I view my site in the browser I just see an empty div box with not entries inside. No errors either

  4. #4
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    up

  5. #5
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    upp

  6. #6
    SitePoint Evangelist superuser2's Avatar
    Join Date
    Aug 2006
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll need to echo a div tag from within your loop. Like this:

    PHP Code:
    <div id="box1">

              <?php



    function showinweb($val) {



        
    $val nl2br($val);

    //return returns the value and ends execution of function, so any line below it is ignored    

        
    return($val);

        

    }





    $page = (!isset($_GET['page'])) ? 1$_GET['page'];



    // Define the number of results per page

    $max_results 3;



    // Figure out the limit for the query based

    // on the current page number.

    $from = (($page $max_results) - $max_results);



    // Perform MySQL query on only the current page number's results





    $sql "SELECT id,

                    DATE_FORMAT(timestamp, '%a.%b.%y') as dateAdded,

                    title,

                    entry,

                    password,

                    image

            FROM php_blog ORDER BY timestamp DESC LIMIT 
    $from$max_results";

            

    $result mysql_query($sql) or print ("Can't select entries from table php_blog.<br />" $sql "<br />" mysql_error());



    $i =1;

    while(
    $row mysql_fetch_assoc($result)) {

           
    echo 
    "<div style='color: green;'";
            echo 
    "<p class='blogtitle'> <span class='blogtit'>".showinweb($row['title'])."</span></p><br />";

            echo 
    "<br /><br />".smiley(showinweb($row['entry']));

            echo 
    "<img id='thisimage$i' onmouseover='showdiv(this.id);' onmouseout ='hidediv();' src='entry/blog_images/".showinweb($row['image'])."' alt='' /> ";

            echo 
    "<br />".showinweb($row['dateAdded']);



            
    //count number of comments for this post

            
    $result2 mysql_query ("SELECT id FROM php_blog_comments WHERE entry='".$row['id']."'");

            
    $num_rows mysql_num_rows($result2);

            if (
    $num_rows 0) {

              

              
    //if there's only 1 comment, use singular comment (comment)

              
    if($num_rows == 1){

                
    $word_comment " comment";

              }else{

              
    //use pluralize comment (comments)

                
    $word_comment " comments";

              }

                echo 
    " <a href=\"entry/journal.php?id=".$row['id']."\">".$num_rows.$word_comment."</a><br />";

            }

    else {

            echo 
    "<a href=\"entry/journal.php?id=" showinweb($row['id']) . "\"> Leave a comment</a>"; }

            echo 
    '<br /><hr class="hr3" /><br />';

           
    echo 
    '</div>';
       
    $i++;

    }



    // Figure out the total number of results in DB:

    $total_results mysql_result(mysql_query("SELECT COUNT(*) as Num FROM php_blog"),0);



    // Figure out the total number of pages. Always round up using ceil()

    $total_pages ceil($total_results $max_results);



    // Build Page Number Hyperlinks

    // echo "<center>Select a Page<br />";



    // Build Previous Link

    if($page 1){

        
    $prev = ($page 1);

        echo 
    "<a href=\"".$_SERVER['PHP_SELF']."?page=$prev\">&lt;&lt;Previous</a> ";

    }



    for(
    $i 1$i <= $total_pages$i++){

        if((
    $page) == $i){

            echo 
    "$i ";

            } else {

                echo 
    "<a href=\"".$_SERVER['PHP_SELF']."?page=$i\">$i</a> ";

        }

    }



    // Build Next Link

    if($page $total_pages){

        
    $next = ($page 1);

        echo 
    "<a href=\"".$_SERVER['PHP_SELF']."?page=$next\">Next&gt;&gt;</a>";

    }

    // echo "</center>";

    ?></div>
    By adding the line "<div style='color: green;'>" inside the loop (and a "</div>" tag at the end) you put a green box around each post. Add any necessary seperation you wish or change the color to whatever you want.

  7. #7
    SitePoint Addict
    Join Date
    Dec 2006
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool thanks for that!
    The code currently adds the same color box around each entry but I would like to make the following entry to have a different colored box. I have posted how the code currently looks below.
    PHP Code:
    $i =1;
    while(
    $row mysql_fetch_assoc($result)) {
            echo 
    "<div id='box1'>";
            echo 
    "<p class='blogtitle'> <span class='blogtit'>".showinweb($row['title'])."</span></p><br />";
            echo 
    "<br /><br />".smiley(showinweb($row['entry']));
            echo 
    "<img id='thisimage$i' onmouseover='showdiv(this.id);' onmouseout ='hidediv();' src='entry/blog_images/".showinweb($row['image'])."' alt='' /> ";
            echo 
    "<br />".showinweb($row['dateAdded']);
        

            
    //count number of comments for this post
            
    $result2 mysql_query ("SELECT id FROM php_blog_comments WHERE entry='".$row['id']."'");
            
    $num_rows mysql_num_rows($result2);
            if (
    $num_rows 0) {
              
              
    //if there's only 1 comment, use singular comment (comment)
              
    if($num_rows == 1){
                
    $word_comment " comment";
              }else{
              
    //use pluralize comment (comments)
                
    $word_comment " comments";
              }
                echo 
    " <a href=\"entry/journal.php?id=".$row['id']."\">".$num_rows.$word_comment."</a><br />";
            }
    else {
            echo 
    "<a href=\"entry/journal.php?id=" showinweb($row['id']) . "\"> Leave a comment</a>"; }
            echo 
    "</div >";
            echo 
    '<br /><br />';
               
       
    $i++;

    As you can see at the top of the code I have echo "<div id='box1'>"; this refers to box1 in the main.css file and I have made a box2 with a different color background and I would like to know how to make a result2 for box2.

    Not sure how hard this is because I have thought about it and I have got myself confused. For example if a second colored box can be introduced what happens when you delete an entry? Can the box colors adjust so there isnt two of the same color boxes repeating?
    Last edited by shtoom; Jun 20, 2007 at 19:15.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •