HTML Help
HTML Help Central . com

» Online Users: 111

0 members and 111 guests
No Members online
Most users ever online was 695, 02-16-2011 at 07:01 AM.

» Site Navigation

 > FAQ

» Domains For Sale

Results 1 to 2 of 2
  1. #1
    Join Date
    Feb 2014
    Posts
    1

    Custom table image background for blogger posts

    Basically, I want to use this table/post background in place for the original blog post background:
    http://hibana.rgr.jp/sozai-table-white-balloons.shtml

    I'm using blogger, and am trying to modify the theme. I'm not experienced with html/xml/whatever, and I'm completely stuck on how to insert the "table"? in place of a background image or color.

    Here's the code the site gives you to use the images:
    Code:
    
    <table cellpadding="0" cellspacing="0" border="0">
    <tr>
            <td background="f_01.png" width="85" height="63"></td>
            <td background="f_02.png" height="63"></td>
            <td background="f_03.png" width="62" height="63"></td>
        </tr>
        <tr>
            <td background="f_04.png" width="85" style="vertical-align: top(上)かmiddle(真ん中)かbottom(下);"><img src="f_04+.png" border="0" alt="balloon (f_04+.png - 85x53)" title="" width="85" height="53" /></td>
            <td background="f_05.png">text here</p>
    </td>
            <td background="f_06.png" width="53"></td>
        </tr>
        <tr>
            <td background="f_07.png" width="85" height="59"></td>
            <td background="f_08.png" height="59"></td>
            <td background="f_09.png" width="62" height="59"></td>
        </tr>
    </table>
    
    I guess I can't purely use it because blogger doesn't use pure html? ;;

    I downloaded the images and uploaded them onto photobucket so I could replace the
    I'm guessing it goes somewhere in posts or body, and here's my code for those lines:
    Code:
    
    /* Main
    ----------------------------------------------- */
    
    .main-inner {
    padding: $(content.padding) 0;
    }
    
    .main-inner .column-center-inner {
    padding: $(content.posts.padding) 0;
    }
    
    .main-inner .column-center-inner .section {
    margin: 0 $(content.posts.padding);
    }
    
    .main-inner .column-right-inner {
    margin-left: $(content.padding);
    }
    
    .main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
    margin-left: $(content.padding);
    background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
    }
    
    .main-inner .column-left-inner {
    margin-right: $(content.padding);
    }
    
    .main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
    margin-right: $(content.padding);
    background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
    }
    
    .main-inner .column-left-inner,
    .main-inner .column-right-inner {
    padding: 15px 0;
    }
    
    /* Posts
    ----------------------------------------------- */
    h3.post-title {
    margin-top: 20px;
    }
    
    h3.post-title a {
    font: $(post.title.font);
    color: $(post.title.text.color);
    }
    
    h3.post-title a:hover {
    text-decoration: underline;
    }
    
    .main-inner .column-center-outer {
    background: $(post.background.color) $(post.background.url) repeat scroll top left;
    _background-image: none;
    }
    
    .post-body {
    line-height: 1.4;
    position: relative;
    
    }
    
    .post-header {
    margin: 0 0 1em;
    
    line-height: 1.6;
    }
    
    .post-footer {
    margin: .5em 0;
    line-height: 1.6;
    }
    
    #blog-pager {
    font-size: 140%;
    }
    
    #comments {
    background: $(comments.background);
    padding: 15px;
    }
    
    #comments .comment-author {
    padding-top: 1.5em;
    }
    
    #comments h4,
    #comments .comment-author a,
    #comments .comment-timestamp a {
    color: $(post.title.text.color);
    }
    
    #comments .comment-author:first-child {
    padding-top: 0;
    border-top: none;
    }
    
    .avatar-image-container {
    margin: .2em 0 0;
    }
    
    Last edited by coothead; 02-16-2014 at 12:52 PM. Reason: tidied up the code

  2. #2
    Join Date
    Sep 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    369
    Hi there amuletcross,

    and a warm welcome to these forums.

    Try it like this, with no images...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    body {
        background-color:#f0f0f0;
     }
    #box {
        position:relative;
        width:200px;
        padding:54px;
        margin:20px auto;
        border-radius:54px;
        background-color:#fff;
        box-shadow:5px 5px 5px rgba(0,0,0,0.5);
        font-size:12px;
        color:#999;
        text-align:justify;
     }
    #box span {
        position:absolute;
        top:86px;
        left:-60px;
        border:20px solid transparent;
        border-right:40px solid #fff;
     }
    </style>
    
    </head>
    <body>
    
    <div id="box">
    <span></span>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus.
    </div>
    
    </body>
    </html>
    http://www.htmlhelpcentral.com/messageboard/image.php?type=sigpic&userid=8698&dateline=1189772  724

Similar Threads

  1. CSS and table background image
    By bbsemail in forum Javascript / AJAX / VBScript
    Replies: 2
    Last Post: 06-24-2006, 11:11 PM
  2. Table Background Image
    By petro in forum HTML / XHTML / XML
    Replies: 7
    Last Post: 10-30-2003, 05:19 PM
  3. An image as the whole background of a table
    By TLC in forum HTML / XHTML / XML
    Replies: 1
    Last Post: 01-16-2003, 01:14 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Powered by vBadvanced CMPS v4.1.1