• I’m sure I’m missing something basic, but I’ve been googling all over and trying to copy instructions as best as I can and can’t get it right.

    I want to have an image tiled down my sidebar
    image – https://hockeyphotography.com/testblog/wp-content/themes/journalist/images/sidebartile.gif

    on https://hockeyphotography.com/testblog

    I not only haven’t gotten the image to appear at all, but the footer has now moved into the sidebar position. Ugh.

    I’ll put the sidebar.php code first since it is much shorter than the stylesheet (originally I had the background code here, but it appeared as text so I just wiped everything I wasn’t using out:

    <div id="sidebar">
    <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    
    <?php endif; ?>
    
    <?php if (function_exists('wp_theme_switcher')) { ?>
    <h3>Themes</h3>
    <div class="themes">
    <?php wp_theme_switcher(); ?>
    </div>
    <?php } ?>
    
    </div>

    and the stylesheet code:

    /*
    Theme Name: Journalist
    Theme URI: https://lucianmarin.com/
    Description: Journalist is a smart, minimal theme designed for professional journalists.
    Version: 1.9
    Author: <a href="https://lucianmarin.com/">Lucian E. Marin</a>
    Tags: white, two columns, fixed width, light, minimal
    For the WordPress community (GPL), enjoy it guys.
    by Lucian E. Marin - lucianmarin.com
    */
    
    body {
    background:#fff url("images/top.gif") repeat-x;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, sans-serif;
    font-size:13px;
    color:#222;
    padding:0;
    margin:0;
    }
    
    * {
    padding:0;
    margin:0;
    }
    
    a {
    color:#047;
    text-decoration:underline;
    }
    
    a:hover {
    color:#c00;
    }
    
    #container {
    width:911px; /* this has nothing to do with the '911' event */
    margin:0 auto;
    position:relative;
    }
    
    #container h1 {
    font-size:30px;
    font-weight:normal;
    letter-spacing:-1px;
    width:600px;
    padding:32px 0 25px 0;
    }
    
    #container h1 a {
    color:#222;
    text-decoration:none;
    }
    
    #container h1 a:hover {
    color:#c00;
    }
    
    #bubble {
    top:40px;
    right:0;
    position:absolute;
    display:block;
    height:28px;
    background:url(images/bubble_right.gif) no-repeat right;
    }
    
    #bubble p {
    display:block;
    font-size:11px;
    color:#fff;
    height:28px;
    padding:4px 12px 0 10px;
    background:url(images/bubble_left.gif) no-repeat top left;
    }
    
    #content {
    float:left;
    width:700px;
    }
    
    #content h2 {
    font-size:20px;
    margin:5px 0 7px 0;
    }
    
    #content h2 a {
    color:#222;
    text-decoration:none;
    }
    
    #content h2 a:hover {
    color:#c00;
    }
    
    #content h2.archive {
    font-weight:normal;
    font-size:22px;
    color:#1c1c1c;
    padding:0;
    margin:5px 0 20px 0;
    border:none;
    text-align:left;
    }
    
    .comments {
    color:#333;
    margin:0 0 15px 0;
    border-bottom:#bbb 1px solid;
    }
    
    .comments a {
    background:#fff;
    padding:0 7px 5px 0;
    color:#333;
    text-decoration:none;
    }
    
    .comments a:hover {
    color:#c00;
    }
    
    .navigation {
    background:#f9f9f9;
    font-size:11px;
    padding:5px 10px;
    margin:0 0 20px 0;
    border-top:#bbb 1px solid;
    }
    
    .navigation a {
    color:#555;
    font-weight:bold;
    text-decoration:none;
    }
    
    .navigation a:hover {
    color:#333;
    text-decoration:none;
    }
    
    .main h3 {
    font-size:16px;
    font-weight:normal;
    margin:0 0 15px 0;
    }
    
    .main img {
    padding:2px;
    border:#ddd 2px solid;
    }
    
    .main a img {
    padding:2px;
    border:#0085b5 2px solid;
    }
    
    .main a:hover img {
    padding:2px;
    border:#ca0002 2px solid;
    }
    
    .main p {
    line-height:18px;
    margin:0 0 15px 0;
    }
    
    .main ol {
    line-height:18px;
    margin:0 0 15px 30px;
    }
    
    .main ul {
    line-height:18px;
    margin:0 0 15px 30px;
    }
    
    .main li {
    margin:0 0 5px 0;
    }
    
    .meta {
    background:#f3f3f3;
    font-size:11px;
    line-height:15px;
    color:#333;
    padding:5px 10px;
    margin:0 0 30px 0;
    border-top:#bbb 1px solid;
    }
    
    .signature {
    float:left;
    padding:0 15px 0 0;
    border-right:#bbb 1px solid;
    width:200px;
    }
    
    .tags {
    float:left;
    padding:0 0 0 15px;
    width:440px;
    }
    
    #sidebar {
    font-size:12px;
    float:right;
    width:180px;
    border-left:#999 1px solid;
    padding:0 0 0px 0px;
    margin:0 0 0px 0;
    body {background-image: url(images/sidebartile.gif);
    background-repeat: repeat;
    }
    
    #sidebar h3 {
    font-size:14px;
    margin:20px 0 5px 0;
    }
    
    #sidebar ul {
    list-style:none;
    }
    
    #sidebar ul ul {
    margin:5px 0 0 10px;
    }
    
    #sidebar ul ul ul {
    margin:5px 0 0 10px;
    }
    
    #sidebar ul li {
    padding:0 0 5px 0;
    }
    
    #author h3 {
    margin:5px 0 5px 0;
    }
    
    #searchform {
    margin:15px 0 0 0;
    }
    
    #searchform input {
    background:#222;
    font-size:11px;
    margin:2px 0;
    padding:1px 4px 2px 4px;
    border:#888 1px solid;
    color:#eee;
    }
    
    #searchform input:hover {
    background:#333;
    border:#999 1px solid;
    color:#fff;
    cursor:pointer;
    }
    
    #searchform #s {
    background:#f6f6f6;
    font-size:11px;
    margin:2px 0;
    padding:2px 4px;
    border:#aaa 1px solid;
    color:#222;
    }
    
    #searchform #s:hover {
    border:#c00 1px solid;
    cursor:text;
    }
    
    input.searchfield {
    background:#f6f6f6;
    font-size:11px;
    display:block;
    margin:5px 0 8px 0;
    padding:2px 4px;
    border:#aaa 1px solid;
    color:#222;
    }
    
    input.searchfield:hover {
    background:#eee;
    color:#222;
    }
    
    input.submit {
    background:#222;
    font-size:11px;
    display:block;
    margin:0 0 10px 0;
    padding:1px 4px 2px 4px;
    border:#888 1px solid;
    color:#eee;
    }
    
    input.submit:hover {
    background:#333;
    cursor:pointer;
    border:#999 1px solid;
    color:#fff;
    }
    
    input.subcom {
    background:#eee;
    font-size:11px;
    margin:0 0 10px 0;
    padding:1px 4px 2px 4px;
    border:#888 1px solid;
    color:#222;
    }
    
    input.subcom:hover {
    background:#222;
    cursor:pointer;
    border:#888 1px solid;
    color:#eee;
    }
    
    input.comment {
    background:#f6f6f6;
    font-size:11px;
    padding:2px 4px;
    border:#aaa 1px solid;
    color:#222;
    }
    
    input.comment:hover {
    border:#c00 1px solid;
    }
    
    textarea {
    background:#f6f6f6;
    font-size:12px;
    width:400px;
    padding:2px 4px;
    border:#aaa 1px solid;
    color:#222;
    }
    
    textarea:hover {
    border:#c00 1px solid;
    }
    
    .postinput small {
    font-size:11px;
    margin:0 0 0 5px;
    }
    
    p.logged {
    font-size:12px;
    }
    
    h3.reply {
    font-size:15px;
    margin:0 0 10px 0;
    }
    
    .nocomments {
    margin:0 0 30px 0;
    }
    
    ol.commentlist {
    font-size:12px;
    list-style:none;
    margin:10px 0 30px 0;
    border-bottom:#bbb 1px solid;
    }
    
    .commentlist li {
    border-top:#bbb 1px solid;
    padding:0 0 10px 0;
    }
    
    .commentlist li.bypostauthor {
    border-top:#bbb 5px solid;
    background-color:#f3f3f3;
    }
    
    .comment_mod {
    margin:10px 0 0 10px;
    }
    
    .comment_mod em {
    background-color:#fff897;
    padding:1px 3px;
    }
    
    .comment_author {
    margin:10px 0;
    float:right;
    width:190px;
    }
    
    .comment_author img {
    float:left;
    margin:5px 12px 0 0;
    }
    
    .comment_author p {
    line-height:20px;
    }
    
    .comment_author small {
    font-size:11px;
    }
    
    .comment_text {
    float:left;
    width:470px;
    margin:0 0 0 10px;
    }
    
    .comment_text p {
    line-height:18px;
    margin:7px 0;
    }
    
    .comment_meta {
    font-size:12px;
    }
    
    #commentform p {
    line-height:18px;
    margin:0 0 15px 0;
    }
    
    blockquote {
    background:url(images/quote.gif) no-repeat top left;
    padding:0 0 0 60px;
    min-height:50px;
    }
    
    #footer {
    background:#eee;
    font-size:11px;
    color:#555;
    margin:0 auto;
    padding:10px 0;
    text-align:center;
    position:relative;
    border-top:#bbb 1px solid;
    border-bottom:#222 6px solid;
    }
    
    #footer a {
    color:#555;
    font-weight:bold;
    text-decoration:none;
    }
    
    #footer a:hover {
    color:#333;
    text-decoration:none;
    }
    
    .clear {
    clear:both;
    }
    
    .warning p {
    background:url(images/warning.gif) no-repeat left;
    height:160px;
    padding:20px 0 0 90px;
    font-size:20px;
    margin:0 0 0 10px;
    }
    
    #wp-calendar {
    padding:10px 0 0 0;
    font-size:12px;
    }
    
    #wp-calendar caption {
    text-align:left;
    padding:0 0 5px 0;
    }
    
    #wp-calendar tr th,
    #wp-calendar tr td {
    padding:0 6px 0 0 ;
    text-align:right;
    }
    
    #wp-calendar td a {
    font-weight:bold;
    }
    
    #wp-calendar td a:hover {
    font-weight:bold;
    }
    
    img.wp-smiley {
    padding:0;
    border:none;
    }
    
    input:focus, textarea:focus{
    background-color:#ffc;
    }
    
    abbr {
    border:none;
    }
    
    .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    
    .alignleft {
    float:left;
    }
    
    .alignright {
    float:right;
    }
    
    .wp-caption {
    border:1px solid #ddd;
    text-align:center;
    background-color:#f3f3f3;
    padding-top:4px;
    margin:10px;
    -moz-border-radius:3px;
    -khtml-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    }
    
    .wp-caption img {
    margin:0;
    padding:0;
    border:0 none;
    }
    
    .wp-caption-dd {
    font-size:11px;
    line-height:17px;
    padding:0 4px 5px;
    margin:0;
    }
    
    /* self-clear floats */
    
    .group:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
    
    /* IE Hacks */
    
    *html #bubble {
    display:none;
    }
    
    *html #bubble p {
    display:none;
    }
    
    * html .group,
    * html #nav ul li a {
    height: 1%;
    }
    
    *:first-child+html .group {
    min-height: 1px;
    }
    
    * html #nav ul li a {
    display: inline;
    }

    Thanks for any help.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Your css doesn’t validate.

    For instance, this is not a valid property in #sidebar:

    body {background-image: url(images/sidebartile.gif);

    change this to:

    background-image: url(images/sidebartile.gif);

    I suspect more is wrong with your css, but this is why your background image doesn’t show.

    You should clear your floats in footer, btw (clear: both;)

    Peter

    Thread Starter melissa-wade

    (@melissa-wade)

    Thanks. That put the footer back in its place, but the sidebar image is still not showing.

    But since I thought I might be misunderstanding you I went and put that line in sidebar.php as well and I have discovered the second problem – just don’t know the solution.

    The sidebar is only as long as its content rather than content of the page so with nothing there – there is no space for the image to appear. I’d like the sidebar to tile as far down as there is content – different pages using this “look” will be different lengths. Is there a command for that?

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to tile an image in the Sidebar’ is closed to new replies.