Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

CSS not same as in test blog

  1. libramoon
    Member

    I'm not sure why my blog isn't composing correctly, plus I see some interesting things about my interface.

    I tested out my new template, Clean Home, with CSS revisions on a blog I have set up just to test out new templates and techniques, http://secondtestblog.wordpress.com/. Once it was pretty much the way I wanted, I changed the template in the blog named above and copied CSS from the revision box on secondtestblog and pasted it into portraitsof animals.

    But if you look at the two and compare, portraitsofanimals doesn't have the semi-transparent block behind the text area as secontestblog does--I added a screened block to the background artwork just so you could see the menu.

    Also, my footer copy is up under the end of my widgets in the right-hand column.

    I addition, the WordPress toolbar is looking pretty strange, as if it's picked up some of the coding from the CSS!

    I tried modifying the areas in the CSS that are affected, with no luck. I tried to go back to the original template for Clean Home and start over, but I can't seem to get back there.

    Can anyone help with this?

    Cam

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

  2. designsimply
    Happiness Engineer

    The semi-transparent block is actually built into the header image and your test blog and a blog have different header images.

    This one has the transparency built in: http://portraitsofanimals.files.wordpress.com/2011/08/warmwintersun-bkgnd-pawprints-final-ghosted.jpg

    This one doesn't: http://secondtestblog.files.wordpress.com/2011/08/warmwintersun-bkgnd-pawprints-final2.jpg

    I would recommend using the header image with the semi-transparency part built in and then removing the background from #wrapper completely: 

    #wrapper {
background: none;
}

  3. designsimply
    Happiness Engineer

    There's something strange going on with the widgets in the sidebar on the portraitsofanimals site which is causing problems and I think that's the source of the admin bar and other strange behavior on the site. I'm looking to see if I can verify that by going through each widget to check it for html mistakes.

  4. libramoon
    Member

    Thanks for looking--what you see in the background is just a workaround. portraitsofanimals is the "real" blog and I only built the semi-transparent area into the background because I needed it to see the menu. secondtestblog is correct. I don't use a header image, just a background, with either one. On secondtestblog the semi-transparent is set in the CSS as the background to the columns because it's part of Clean Home, but for some reason there are errors when I copied the CSS I'd built in secondtestblog into portraits of animals.

    What I'd like to be able to do is get back to the original CSS for Clean Home and start over. It wouldn't be that difficult, but I can't get to it. The original CSS that's available with a click is different from what I obtained from the CSS upgrade. Confusing!

  5. timethief
    Member

    To ‘reset’ a theme, you need to delete the CSS in the Editor, make sure the “add to existing CSS” radio button is checked, then save. Things should go back to normal.

    When you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:

    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/

  6. libramoon
    Member

    Designsimply, I actually found one error earlier from the Animal Rescue Site widget and changed the HTML in that one. portraitsofanimals had all these widgets prior to this template upgrade, but for all I know there was a problem then.

    I'm going to go right now and take out the widgets for Animal Rescue and the FDA pet food recall link.

    Never thought of that! Thanks!

  7. libramoon
    Member

    timetheif, when I got my CSS upgrade for that test blog, it actually gave me all the CSS, and I made minor changes to so much of the CSS that it became confusing to only include the ones I'd changed. If you look at secondtestblog, it works there, that's why I can't figure out why it wont work on portraitsofanimals. I'm thinking it may be the widgets.

    The next question is this: I use this blog for testing things out and finally got the CSS upgrade to work with this particular template. When go to the next template to "test it out" on this blog for another blog of mine or for a customer, will I be able to completely eliminate the CSS changes I've made so far and start over?

  8. designsimply
    Happiness Engineer

    The widget titled "Pet Health and Safety Widget" was causing the problem.

    Here is the html. Notice that there are two open divs and neither one is closed at the end. 

    <!-- ############################# --> <!-- WIDGET EMBED CODE STARTS HERE --> <div> <h3 id="start-widget-focus"><a href="http://www.fda.gov/AboutFDA/ContactFDA/StayInformed/RSSFeeds/PetHealth/rss.xml"></h3> <p><br /> <!--[if!IE]><!--> <div style="width:auto;"><img src="http://www.accessdata.fda.gov/widgets/pethealth/PetHealth.jpg" width="170" height="345"><br /><!-- WIDGET EMBED CODE ENDS HERE --><!-- ############################# -->

    That caused a cascading problem which affected the admin bar and the top navigation.

    I moved the "Pet Health and Safety Widget" widget to the Appearance → Widgets → Inactive Widgets area for you. Whatever code you tried pasting there isn't compatible with WordPress.co. If that site has an RSS feed, you could include updates from them by using the RSS widget or you could embed an image using the image widget and link out to their site if there is other functionality you want to provide access to.

  9. libramoon
    Member

    Yay! You're the best! I never would have thought of that, especially since I'd had it on my site for over a year. It actually has a script in it, which doesn't run on WP.com, of course, but people could still use it as a link to the FDA. I'll replace it with just a link.

    My site will be profiled on Cats.About.com tomorrow, so I'm all dressed up and ready to go!

  10. designsimply
    Happiness Engineer

    Next I'm looking at the transparency issue.

    To answer your question about how to start over with the CSS, you should actually just delete the custom CSS. Then, you should only add CSS rules for the things you want to change and you should not copy and paste the entire theme CSS page from the theme into the custom CSS editor. This section of the support documents explains why: http://en.support.wordpress.com/editing-css/#maintaining-your-custom-header

  11. libramoon
    Member

    Actually, that was what worked this time, and though I've played around with the CSS upgrade this is the first time I've actually purchased it and used it for real. There were actually other things I had wanted to change but couldn't, and I'm quite experienced with CSS outside of CMS and I just couldn't figure out why what I was doing wouldn't work, so I just pasted the whole darned thing in there and started randomly changing, though I kept a copy of the original in case I really screwed it up. I'm also more accustomed to interacting with CSS in Dreamweaver, and just working with the raw code can be a little confusing without that interface, so I pasted it into Dreamweaver; I had thought perhaps DW added its own proprietary coding, but didn't find anything.

    I'll be doing another site soon and it will be more familiar so I hope to get more experience with it the next time. Thanks so much for your help today! I love WordPress! I'm moving all my customers to this interface, one by one.

  12. designsimply
    Happiness Engineer

    @libramoon, I see the transparency working now. :) I think before I just hadn't refreshed the page after updating the sidebar.

    Cheers.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags