Need help? Check out our Support site, then


Code to move down the start of my blog

  1. theeverydayannoyance
    Member

    How do I move down the beginning of my blog so that it is in line with the bottom of my title on the left hand side?

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

  2. The following puts the top edge of the white background for the first post in line with the bottom edge of the site title. You can adjust the 15.1rem value as you wish to move it up or down further.

    #primary {
    margin-top: 15.1rem;
    }

    Aside: unhappy little one on the right. :)

  3. theeverydayannoyance
    Member

    Worked like a charm. Many thanks!! And yea, he's seen better days

  4. You are welcome. Great thing about kids though, they normally get over it pretty quickly. :)

  5. theeverydayannoyance
    Member

    Also, — since you seem to know your stuff, do you know if there is code I can add to allow a thumbnail to appear beside each post title on the home page? The thumbnail would be the larger picture which appears when you click into each post.

  6. Hmmm, the only way you could do that would be to write an individual CSS rule for each and every post you created, which would very quickly bloat your CSS to the point your site would come to a standstill. The proper way to do that would be to code that functionality into the theme files and we cannot modify they theme files here at WordPress.com.

  7. theeverydayannoyance
    Member

    Ok. Is there a way that I can perhaps reduce the length and width of my feature images and blog post size so that it does not appear as big as it currently does on the homepage?

    Also, what is the code so that I can make specific words in my post title a different colour than the rest of it. ex. #500 Seeing a dog boner- I want #500 to be in black and the rest orange?

  8. The proportions of the image, and the image width determine the size of the image shown. The image sizes to the max width for the content area, which is 618px. You can reduce the size of the image with the following code, but long, portrait images are still going to look long. Add this and see what you think.

    .home .attachment-confit-thumbnail {
        max-width: 70%;
        margin-left: 15%;
        margin-right: 15%;
    }

    If you adjust the sizes, the total of the max-width, left and right margins has to add up to 100%.

    Aside: I'm surprised. It doesn't look too bad at 70%. I thought I wouldn't like it, but I could live with the whitespace to the left and right. It still looks nicer in my opinion with the full-width image.

    You might consider reworking and cropping portrait images so that they are not so long.

  9. theeverydayannoyance
    Member

    Yea I agree with your point that the 70% doesn't look bad, but the full-width looks nicer. I'll probably keep as is.

    Is there a way that I can increase the size of the title in the top left hand corner?

    Also is there a code so that I can change the font colour of specific words in the post title? For instance, I would like "#500" to be in black and "Seeing a dog boner" in orange. Is that possible?

    Your help is much appreciated

  10. There really isn't a way to change the color of certain words in a title.

    This will work for your logo, but I would suggest making a new image from the original artwork and saving it as a PNG (JPG is better for photographic images, PNG for graphic type images) image at 258px in width x 120px in height and crop it tight to the letters. Upload that image to your media library, get the URL of that image and then replace the image URL below between the double quote marks and it should look clean and crisp. You can try the following to get a general idea of what it will look like.

    .header-image {
    background: url("http://everydayannoyancesdotcom.files.wordpress.com/2013/08/cropped-whitebackground_adjustable1-1.jpg") no-repeat scroll -20px top / contain transparent;
    height: 122px;
    max-width: 260px;
    width: 260px;
    }
    
    .header-image img {
        display: none;
    }
  11. theeverydayannoyance
    Member

    Sweet! The header is a lot more recognizable now, thanks!
    One last question, is it possible to reduce the width of the blog post itself? My intent would be to bring the images down to 70% and then narrow the width of the blog to match so that more of the child's face is revealed - to see if that is more aesthetically pleasing.

  12. You would narrow the wrapper and then adjust the % width for #primary to give the spacing you desired between the sidebar and content areas. Take a look at the following. I included the original widths below.

    #wrapper {
    max-width: 954px;
    }
    
    #primary {
    width: 60.7799%;
    }

    #wrapper original max width: 954px
    #primary original width: 64.7799%;

  13. theeverydayannoyance
    Member

    Awesome thanks! I seem to have lost the hyperlink back to the homepage when I enlarged my header logo. Is there a way that I can get that back so that users can click on the header and it brings them back to the homepage?

  14. Let's make a small adjustment to the code I gave earlier and it will bring back the link for the logo.

    .header-image img {
    visibility: hidden;
    }
  15. theeverydayannoyance
    Member

    thanks! worked like a charm.

  16. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags