Need help? Check out our Support site, then


WordPress.com Forums » Support

CSS-theme name and info strips out

  1. amarkonmywall
    Member

    I'm working on a blog for a friend, she purchased the CSS upgrade. She is using the Ocean Mist theme. All I did was copy her stylesheet into TextPad, play around with some changes in the editor, but decided I didn't like them and wanted to put the original stylesheet back.

    But every time I try to copy/paste the code back into the editor, the theme info "disappears". It's this code section here:

    /*
    Theme Name: Ocean Mist
    Theme URI: http://www.edmerritt.com/
    Description: A blueish two-column theme with a large customizable header, visible post author, and category navigation at the bottom.
    Version: 1.2-wpcom
    Author: Ed Merritt
    Author URI: http://www.edmerritt.com/
    */

    /* layout */

    AND, I tried just going to Presentation-->Themes and re-clicking on the Ocean Mist theme again, but when I preview her blog, the header graphic is gone. What the heck am I doing wrong here, please?! The URL is http://amarkonmywall.wordpress.com Thank you!

  2. judyb12
    Member

    the CSS editor does that. It only takes out info that is within the comment markers (/* */), and this shouldn't affect the way the blog displays.

  3. judyb12
    Member

    Also, if you have customized your CSS then you cannot use the header image uploader. The header image must be called via the CSS.

  4. amarkonmywall
    Member

    Judy, thank you for the reply. Could you please help me further with this? I looked around the forums, and found this code, am I on the right track?

    #header_img { margin: 0 0 30px 0; border-bottom: 1px solid #000; float: left; clear: both; background: url('http://sunburntkamel.wordpress.com/files/2006/04/regulusbg.jpg'); }
    #header_img img { visibility: hidden; }

    except I assume I replace the URL with the URL for the blog?

  5. raincoaster
    Member

    No, you replace it with the URL of your uploaded header. If you haven't got the url, just upload it as if it were a regular image, then click Edit and get the URL from there. Then put it in the CSS.

  6. amarkonmywall
    Member

    Judy, raincoaster, thanks for the help so far, I'm getting closer! I uploaded the image into a post, clicked Code, and got the URL.

    In the blog itself, what I think is the header code now looks like this:

    header {
    position:relative;
    float:left;
    display:block;
    width:750px;
    background:url('http://amarkonmywall.wordpress.com/files/2007/08/mainpic012.jpg') top no-repeat;
    min-height:355px;
    padding:0;
    }

    * html #header {
    height:355px;
    }

    I've got the background for the header, but not the image part. If you look at the available themes, this is called Ocean Mist, and there's supposed to be a nice image of an ocean and some cliffs. That is the part that is missing on the blog. Any suggestions would be greatly appreciated!!

  7. raincoaster
    Member

    Did you not want a customized header? What I'd suggest then is going to another Ocean Mist blog and copying the URL of their header image. It's all hosted at WordPress, so it's okay to hotlink it.

  8. amarkonmywall
    Member

    raincoaster-No, I think she wants to keep the header that comes with the theme. I didn't even think to find another Ocean Mist blog, then I just do a View Source and copy their URL? Thanks!

  9. amarkonmywall
    Member

    raincoaster-thanks for that suggestion. I found this blog using Ocean Mist: http://digibirder.wordpress.com/
    I did a View Source and found two different URLs for the stylesheet:

    <link rel="stylesheet" href="http://s.wordpress.com/wp-content/themes/pub/ocean-mist/style.css?m=1184599358"
    <link rel='stylesheet' href='http://s.wordpress.com/wp-content/themes/h4/global.css?m=1180130669'

    I assume it's that first URL that calls the ocean mist graphic, so I did this:

    header {
    position:relative;
    float:left;
    display:block;
    width:750px;
    background:url('http://s.wordpress.com/wp-content/themes/pub/ocean-mist/style.css?m=1184599358') top no-repeat;
    min-height:355px;
    padding:0;
    }

    And, I'm still not seeing the ocean mist graphic on the blog! Gaaaahhhh! I feel like I'm so close, like the answer is right there! Please, what am I missing??

  10. devblog
    Member

    I assume it's that first URL that calls the ocean mist graphic, so I did this:
    ...
    ...
    href='http://s.wordpress.com/wp-content/themes/h4/global.css?m=1180130669'

    That's wrong. You're just calling the CSS file, not the image.

    I can see you're missing other images too...

    Try changing the #mainpic selector like so:

    #mainpic {position: absolute; bottom: 0; float: left; background: url(http://amarkonmywall.files.wordpress.com/2007/08/mainpic012.jpg) no-repeat; display: block; width: 736px; height: 229px; margin: 0 7px; border-top: 3px solid #67939B; border-bottom: 3px solid #67939B;}

    On a personal note, I really don't like the way the theme author (not you, amarkonmywall) wrote its CSS... but that's just me...

    Try that, and let me know.

    Edit: Are you trying to restore the CSS to what it originally was?

  11. amarkonmywall
    Member

    devblog, you are a genius, thanks! That restored the image. Can you help me figure out why the background of the whole theme changed? If you look at http://digibirder.wordpress.com/, you'll see that the post area should have a white background, and the sidebar should have a light blue background. Somehow that is missing here on http://amarkonmywall.wordpress.com. Also, the title and tagline should have a dark grey background. Could someone please help me get that back? Thanks so much!

    P.S. Yes, I wish I could just restore the CSS back to the original. I thought I had made a backup copy, but when I pasted it back in, I got what you see now.

  12. judyb12
    Member

    just delete everything out of the CSS editor, and make sure the "Add to existing stylesheet" radio button is selected. Then click Save.

  13. amarkonmywall
    Member

    Delete everything?? Seriously?? Judy, you're scaring me, but I'll trust you here. And I'll make a backup copy first :)

    Judy! Thank you! I can't believe it was that easy. I could have saved myself hours of futzing around with this editor.

    So, is it possible to even widen the post area and make the font darker and larger, or should I just try to find a different theme?

  14. judyb12
    Member

    definitely make a copy before deleting :)

  15. amarkonmywall
    Member

    unbvelievable. All that stress over thinking I had permanently screwed it up. The CSS editor says this:
    You can not edit the stylesheets of your theme. Your stylesheet will be loaded after the theme stylesheets, which means that your rules can take precedence and override the theme CSS rules. The Sandbox theme is recommended for those who would prefer to start from scratch.

    So does that mean I can't change the stylesheet to make the font darker and larger?

  16. judyb12
    Member

    Ummm, no.

    Did my suggestion work?

    And is changing your font all you want to do?

    If so, you just need to change the body text to something like this:

    body {
font-weight:bold;
font-size:large;
}

    If you just put that in the CSS editor, it will change the body text (you may need to tweak the values for whatever it is you're trying to do). You don't need to recreate the entire stylesheet in the editor (as long as the "Add to existing stylesheet" radio button is selected).

  17. judyb12
    Member

    I think you're making this way more difficult than you have to. Take a deep breath, step back for a little while, and come back with a clearer head. :)

  18. devblog
    Member

    just delete everything out of the CSS editor, and make sure the "Add to existing stylesheet" radio button is selected. Then click Save.

    Thanks, Judy. I too learned a new thing today.

    amarkonmywall,

    Of course it's possible, but you'd need to widen your background images too and replace the defult ones with the modified ones. Tweak your CSS here and there and you should have a customized version of Ocean Mist.

    Now, to make the font darker and larger, that should be even easier. How about this:

    /* layout */
* {font-size: 105%; color: #000; margin: 0; padding: 0; line-height: 1.4em;}

    And like Judy said, always make a backup.

    HTH

  19. amarkonmywall
    Member

    Judy, your suggestion worked! The blog is restored back to the original CSS and the original look of the theme, thank you!

    Yes, I have spent a day and a half stressing out over thinking I had "broken" her blog, so it helped to walk away for a while. She wants to make her font larger and darker, yes, but I put in font-size:large; and it's really TOO large, so I typed in font-size:medium; and HEY! It worked!

    She also wishes the post area was a little wider to accomodate slightly larger photos, but I don't see how that's possible without widening the entire blog, right?

  20. amarkonmywall
    Member

    Devblog-thanks for that info. I would have to widen everything that is set at 755, plus replace the header image with a wider one (yikes, that's what screwed it up in the first place). How much wider can it go? I read somewhere that anything bigger than 1000 will make the page scroll, right?

  21. judyb12
    Member

    Amarkonmywall, I'm glad my advice helped, and, Devblog, i will have to mark today on my calendar; i never thought i would be able to teach you anything ;)

  22. devblog
    Member

    If the screen resolution of the user is of 1024 width, then yes. On screen resolutions bigger than 1024, it should look okay.

    It would be better to make the layout to span over the whole screen, I mean that, instead of setting the width to a fixed width (i.e. 755px) set it to 100%.

    Did you try the code I posted too? just curious.

  23. amarkonmywall
    Member

    Devblog-I tried both your code and Judy's. Hers is more bold, but yours is a slightly smaller size, which I like. So is there a way to combine the two? Your font size, but more bold?

  24. devblog
    Member

    well, the solution would be to add the font-weight property like Judy told you, one think you'd need to consider, though... if your friend wants to make a word bold, it won't stand out because all text is bold.

    Imagine a paragraph like this where all text is bold. And in my editor I make the word 'paragraph' bold. You won't notice it.

    However, if you really want to have all your text like that, then do this:

    p {font-weight: bold;}

    HTH

  25. judyb12
    Member

    simultaneous typing...

  26. amarkonmywall
    Member

    No, I see what you mean. I posted a question to her readers, and they like it the way it is except they think it's just a tiny bit too big, so I put it down to 103%.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags