How to tile an image in the Sidebar
-
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.gifon 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.
- The topic ‘How to tile an image in the Sidebar’ is closed to new replies.