Need help? Check out our Support site, then


Archives and Category Listings don't follow suit

  1. The custom design works for the home page and on pages for individual posts. If I click on a month's archive or on a category listing, the theme's default text box comes back. (The custom sidebar is there, though.)

    I did "inspect element" for the category text box's background PNG's and found their new names. I then tried adding the same values in the various fields as I use for the home page. (These include min-height, position: relative, and the image URL's.) I also changed "post" to "page" in the commands for position and min-height because that seemed . Instead of replicating my home page, these revisions simply eliminated all of the background PNG images.

    So, how do I get my new text box settings to carry over to the entire blog? Here's the mess of CSS code I tried... with URL's and pixel counts eliminated:

    .content .page, .archive .post, .search .post {
    background: url(“URL.”) no-repeat scroll 0px 0px transparent;
    }

    .page-content {
    background: url(“URL.”) repeat-y scroll 0px 0px transparent;
    }

    .page-bottom {
    background: url(“URL”) no-repeat scroll 0px 0px transparent;
    }

    .content .page, .archive .post, .search .post {
    min-height: NUMBERpx;
    }
    .page-bottom {
    min-height: NUMBERpx;
    }

    .content .page, .archive .post, .search .post{
    position: relative;
    left: NUMBERpx;
    }

    .page-content {
    position: relative;
    left: NUMBERpx;
    }

    .page-bottom {
    position: relative;
    left: NUMBERpx;
    }

    For the URL-related code lines, I also tried "left center" and "left top" in place of "0px 0px" because that's how it was coded for the home page.

    Once again, thank you for the help.

    The blog I need help with is blacklightcandelabra.wordpress.com.

  2. I tried more things and there has been very little progress.

    If I nest the new pages into my original homepage command, I get this (for example):

    .content .page, .archive .post, .search .post {
    	background: url('//bumblepupppies.files.wordpress.com/2013/12/turqtx.png”') no-repeat scroll 0 0 transparent;
    }

    That causes the top part of my background text box graphic to appear in my archive and category listing pages. However, the image is cropped on the right side and I couldn't find a max-width line to change. The image doesn't un-crop when I change its relative position.

    With the sidebar, I could often prevent this cropping by editing the relative position first. When I try that technique now, it simply prevents the text box graphic from appearing at all.

    The original San Kloud theme has the same layout on the home page and in the archives (etc.) I know I'll have to enter new (and different) relative position data, but I'd love to know how I can load my full images like I could on the home page.

    Also, when I try to enter new min-height information, nothing changes. This is the case when I add new lines of code or try nesting with the old.

    I've now also left the code from my original post on the blog so the result can be assessed (if necessary).

  3. If I click on a month's archive or on a category listing, the theme's default text box comes back.

    Could you explain this in a bit more detail? What is the end goal? Is it to replace the background images behind all of the content areas such as the main content area, sidebar, and comments with different background images? If so, what I would do is start with the theme's original CSS, copy out the related parts, and replace the image URLs in the copy with yours. Here's a link to the CSS file for the default blue color scheme for the San Kloud theme:
    http://s1.wp.com/wp-content/themes/pub/san-kloud/colors/default/default.css?minify=false

    You'd probably want every rule that has a url() in it. Then when you replace the url() values, make sure to use a complete URL starting with http://

    If you're still having trouble and need help, copy out one rule as an example, fill in the URL, and paste it in a reply here as an example and I'll take a look.

    Watch out for typos in the URLs! I spotted a typo in your example above where you have "bumblepupppies" as the first part of the URL. See how it has an extra "p"? You can avoid that by checking the image URL by itself in a browser to make sure it works.

    So, how do I get my new text box settings to carry over to the entire blog?

    If you follow the theme's CSS and copy and adjust all the relevant rules, that should work!

  4. I'll start with my goal: I'd like the entire blog to display as the home page currently does.

    I can try the original copy again, without the typo. I hadn't noticed the typo and that could easily be why my original fix didn't work.

    To explain the quote in more detail: If you click on "Uncategorized" or "About" or "December 2013" (for example), nothing had originally changed. Later, when I pasted the URL's (without typos, because the images showed up) into the CSS copy, the images were cropped on the right side; you can still see that with the top text box image on the "About" page, and elsewhere. It's as though the container is a different size on the home page as elsewhere.

    I did attempt some other fixes and got as far as what I described here:

    http://en.forums.wordpress.com/topic/san-kloud-theme-different-coding-for-identical-pages?replies=1

    I'll check back in once I've tried the original fix again, minus the typo. I've saved snapshots the entire way, so I can easily restore to something earlier. (Great feature!)

    (Sorry if I'm creating too many threads. Since I'm the first to be asking about San Kloud, I figure a lengthy record doesn't hurt anyone.)

    And thanks for the help.

  5. Here's some sample code:

    .content .page, .archive .post, .search .post {
        background: url('http://bumblepuppies.files.wordpress.com/2013/12/pnct2.png') no-repeat scroll 0px 0px transparent;
    }

    And if I do this:

    .content .page, .archive .post, .search .post{
    position: relative;
    left: -40px;
    }

    The image shifts to the left, as it is supposed to. However, the right part remains clipped off. That problem is still on my most recent update, which I've reapplied and is visible now.

    The coding for this newest version is:

    .content .page, .archive .post, .search .post, .page-content, .page-bottom {
    	background: url('http://bumblepuppies.files.wordpress.com/2013/12/pnct2.png') no-repeat scroll 0 0 transparent;
    }
    
    .page-content {
    	background: url('http://bumblepuppies.files.wordpress.com/2013/12/pncm2.png') repeat-y scroll left top transparent;
    }
    
    .page-bottom {
    	background: url('http://bumblepuppies.files.wordpress.com/2013/12/pncb2.png') no-repeat scroll left bottom transparent;
    }
    
    .content .page, .archive .post, .search .post {
    	position: relative;
    	left: -47px;
    }
    
    .page-content {
    	position: relative;
    	left: -12px;
    	top: 140px;
    }
    
    .page-bottom {
    	position: relative;
    	left: -12px;
    	top: 140px;
    }
    
    .content .page, .archive .post, .search .post {
    	min-height: 138px;
    }
    
    .page-bottom {
    	min-height: 81px;
    }

    It took a little wrangling with min-height and position: relative to make the top and middle text box images fit together on the home page and I expect that to be the case again.

  6. Oh... just a reminder: the custom design attempt is visible at on my test blog at blacklightcandelabra.wordpress.com and not at bumblepuppies.

  7. This part of your original help request is a bit hard to follow:

    The custom design works for the home page and on pages for individual posts. If I click on a month's archive or on a category listing, the theme's default text box comes back. (The custom sidebar is there, though.)

    Instead of that, let's use a list of links to check. Here's a list I came up with:

    1. http://blacklightcandelabra.wordpress.com/
    2. http://blacklightcandelabra.wordpress.com/2013/07/06/test-post-for-viewing-themes/
    3. http://blacklightcandelabra.wordpress.com/2013/
    4. http://blacklightcandelabra.wordpress.com/about/
    5. http://blacklightcandelabra.wordpress.com/?s=test
  8. Next, because the dimensions of your images don't match the dimensions of the ones in the theme, that's why you need to adjust the numbers quite a bit. It can work, but will take time and effort to setup.

    Here are the images I found that you're using:

    http://bumblepuppies.files.wordpress.com/2013/12/pnct2.png
    http://bumblepuppies.files.wordpress.com/2013/12/pncm2.png
    http://bumblepuppies.files.wordpress.com/2013/12/pncb2.png

    The theme, however, uses those plus a few other types like these:

    http://s1.wp.com/wp-content/themes/pub/san-kloud/colors/default/images/post-bg-top-short.png
    http://s1.wp.com/wp-content/themes/pub/san-kloud/colors/default/images/page-bg-top-long.png

    And those are for specific post format types (like Asides) or page types (like attachment pages). If you don't use post formats or attachment pages on your blog, then you don't need to worry about those images.

    One alternate route to using the images you have now would be to check the theme's CSS, copy out each unique image URL, save copies of them, and make new images based on those exact same dimensions. Then you could cut/paste the theme CSS and swap out the images directly.

    Or, with your images, you just need to make lots of adjustments to the numbers. I started an example which should cover most cases (i.e. the list of URLs to check that I posted in my previous comment) that you can try out:

    .content .page,
    .archive .post,
    .search .post {
    	background: url("http://bumblepuppies.files.wordpress.com/2013/12/pnct2.png?w=604") 10px top no-repeat;
    	padding-top: 148px;
    }
    .post-top,
    .format-aside .post-top,
    .format-standard .post-top,
    .sticky .post-top {
    	background: url("http://bumblepuppies.files.wordpress.com/2013/12/pnct2.png?w=602") 46px bottom no-repeat;
    	min-height: 148px;
    }
    .post-title {
    	max-width: 475px;
    	margin-left: 35px;
    }
    .post-middle {
    	background: url("http://bumblepuppies.files.wordpress.com/2013/12/pncm2.png?w=625") 35px top repeat-y;
    }
    .page-content {
    	background: url("http://bumblepuppies.files.wordpress.com/2013/12/pncm2.png?w=625") 0 top repeat-y;
    	padding: 0 50px 20px 50px;
    }
    .post-bottom {
    	background: url("http://bumblepuppies.files.wordpress.com/2013/12/pncb2.png?w=608") 45px -3px no-repeat;
    	min-height: 86px;
    }
    .page-bottom {
    	background: url("http://bumblepuppies.files.wordpress.com/2013/12/pncb2.png?w=608") 10px -3px no-repeat;
    	min-height: 86px;
    }

    This example covers posts and pages only (not the sidebar or comments). To use it in your theme, you should remove all of the CSS you have already that relates to post or page background images and paste the example above to the bottom of your custom CSS. If you have trouble, try just using the example CSS with nothing else to avoid interference from past CSS you've written. (I wrote this example from scratch.) It should give you a really good start so you can continue tweaking it if you find new post or page types you need to adjust for.

  9. Thanks so much! That seems to have covered it more or less. I think I can reach my goal from here.

    (Oh, and the "duplicate" thread was an attempt to reflect an evolution in where I was before you had gotten back to me. I thought the underlying issues had changed. I'll remember if I have another support issue.)

  10. Sounds good!

  11. For now, I'd like to add one (hopefully) last detail for anyone who comes after me.

    On my test blog, my July archive worked fine at:

    http://blacklightcandelabra.wordpress.com/2013/07/

    But my July archive on my real blog didn't update. That URL is

    http://bumblepuppies.wordpress.com/2013/07/

    My test blog had clickable links to the archive pages while my real blog used a drop-down menu. When I switched from a drop-down to a list of links, the problem went away.

    (I haven't saved the whole thing to my main blog yet because there were still one or two things to work out. Hopefully tomorrow.)

Topic Closed

This topic has been closed to new replies.

About this Topic