Need help? Check out our Support site, then


image in menu area of Fruit Shake theme

  1. Is there a way to have an image of my choice appear in the top menu area, beside the search tool? I see where I can build a menu, but an image is not one of the things I can add to the menu. My blog address is bodyspecialists.wordpress.com.

    Also, I'd like to change the colour scheme of the Leave A Reply area. The grey text on the black background is hard to read.

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

  2. Hi. Since it looks like you have the Custom Design upgrade, I tagged this thread so that it's moved to the right section (CSS Customization).

  3. moved to CSS forum~~

  4. I don't think the have the CSS upgrade. I can't see any evidence.

  5. @tsp: I assumed pstrapp had the Custom Design upgrade because 1- there are custom fonts yet no TypeKit logo on the bottom right corner and 2- there is a custom CSS code to change the font size of the tagline.

  6. Ah, I didn't look at the fonts, so you are right.

  7. (Now that this thread is in the right forum)

    Is there a way to have an image of my choice appear in the top menu area, beside the search tool? I see where I can build a menu, but an image is not one of the things I can add to the menu. My blog address is bodyspecialists.wordpress.com.

    Also, I'd like to change the colour scheme of the Leave A Reply area. The grey text on the black background is hard to read.

  8. It is a little tricky but it can probably be done, depending on the nature of the image and the size of it. You have a maximum width of around 340px and maximum height of about 90px.

    Make your image, upload it to the media library and then give use the URL of that image. There are a number of other adjustments that will be needed to make everything work.

  9. The image is http://bodyspecialists.files.wordpress.com/2011/08/ripples.jpg and if it's not an easy thing, please don't worry about it; it's only a "nice to do".

    My higher priority is getting the Reply text readable - either changing the black background, or making the text white instead of grey.

  10. On the image, perhaps crop it a little tighter on the top and then resize it so that it is about 80px tall. It isn't that big a deal to put it in, it is just that a number of things have to be shifted changed since there was no accommodation for an image in that area.

    On the comment text areas are you talking about in the contact form? This does the text lighter. I would not suggest going full white as the contrast would be a little too strong, but possibly just a tick to the grey off of full white.

    .highlander-dark #respond .comment-textarea label {
    color: #EEEEEE;
    }
  11. That's a start: it makes the "Enter Your Comment Here..." visible, but when I type, my message is still very dark.

    Re the image, I'm gathering that there are no options to resize it the way there are in HTML, and it must be used "raw". Thus, a smaller image is at http://bodyspecialists.files.wordpress.com/2011/08/ripples2.jpg per your suggestion.

  12. Ah, they have the color set in two places. Here is the one for when you enter text.

    .highlander-dark #respond #comment-form-comment textarea, .highlander-dark #comment-form-share-text-padder textarea {
    color: #EEEEEE;
    }

    On the image, it is not a good idea to resize it in the CSS because that throws the resizing off and onto the browser and browsers do a seriously lousy job of resizing images.

    I'll work on the code and then post it back here in a little bit.

  13. The top part sets a minimum width to keep the image from moving over and breaking the site title and such (since this is a semi-flexible width theme. Give this a try and see what you think.

    #page {
    min-width: 800px;
    }
    
    #branding #searchform {
    background: url("http://bodyspecialists.files.wordpress.com/2011/08/ripples2.jpg") no-repeat scroll 0 0 transparent;
    height: 90px;
    top: 0.5em;
    width: 300px;
    }
    
    #branding #s {
    margin-top: 30px;
    }
  14. Thanks for that bit of code. After seeing how it looks, I've decided I'd rather have it placed to the right of the site name. I've managed to place it there, but I don't know how to get the site name positioned to the left instead of being centred in the space. I tried #site-title a {text-align:left;} to no avail.

    Also, thanks for the color fix on the comments section; it's now functional Is there a way to change the background colour? The black background (in my opinion) really doesn't fit the color scheme.

  15. Give this a try. It aligns the text above the site description.

    #site-title a {
    padding-left: 40px;
    }
  16. Thanks! Now the heading looks just the way I wanted it to. :-)

    Any ideas about changing the colour scheme on the comments section from black to something else?

  17. The comment form is has about a billion selectors that control the look of it so you will just have to play with the stuff below (which may not be all of it) and figure out what each does and then go from there.

    .highlander-dark #respond form {
        background: none repeat scroll 0 0 rgba(255, 255, 255, 0.3);
    }
    
    .highlander-dark #respond #comment-form-identity {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
        border-top: 1px solid rgba(0, 0, 0, 0.9);
    }
    
    .highlander-dark #respond #comment-form-comment, .highlander-dark #comment-form-share-text-padder {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.13);
        box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.55) inset;
    }
    
    .highlander-dark #respond #comment-form-comment textarea, .highlander-dark #comment-form-share-text-padder textarea {
        color: #EEEEEE;
    }
    
    .highlander-dark #respond .comment-form-fields div.comment-form-input.active {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.37) !important;
        border: 1px solid rgba(255, 255, 255, 0.25);
        box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55) inset;
        color: rgba(255, 255, 255, 0.8) !important;
    }
    
    .highlander-dark #respond .comment-textarea label {
        color: rgba(255, 255, 255, 0.6);
    }

Topic Closed

This topic has been closed to new replies.

About this Topic