Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

reddle help - blockquote, image padding, ...

  1. almostartist
    Member

    almostartist.com

    Hello - I feel bad having to ask all these things but I tried a bunch of different options for all these things and am not able to figure it out. Also havent gotten to learn how to add images - i think I can see how to swatch when there is already code in place but not add into the flow where there is nothing

    1. Page content left- was trying to have the main column static towards the left but when I added a float: right to #page in css it did shift it all the way to left of the screen but too far I need some padding

    2. Is there a way to get quoted items in the post content to be styled? I was looking in the html and not sure there is a specific entry for post quotes - like the meow in quote would have an image on top right and possibly also be in a color block

    3. Trying to get more padding between the image and its border but what I did it seems to not have worked all the way around

    4. Is there a way to insert a image at the bottom of all posts? it would be a flourish image same one all the time

    Thanks I have a few more in mind but need to try to see if I can figure them out first (like moving the/a menu area (about catergories) below the header

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

  2. designsimply
    Happiness Engineer

    Also havent gotten to learn how to add images

    Check out this help page for a walk through showing how to add images: http://en.support.wordpress.com/images/

  3. designsimply
    Happiness Engineer

    1. Page content left- was trying to have the main column static towards the left but when I added a float: right to #page in css it did shift it all the way to left of the screen but too far I need some padding

    Not sure what you mean. Do you mean you wan to make the content inside the #page area shift left or make that part of the theme wider. Here's the original stylesheet for Reddle: https://s-ssl.wordpress.com/wp-content/themes/pub/reddle/style.css?m=1325843858g&minify=false

    See how it has pretty wide margins for the content area?

    #content {
margin: 0 9.464285714286%;
}

    You can make those smaller by adjusting that percentage: 

    #content {
margin: 0 3%;
}

    If you did that, you may also want to adjust the placement of the kitty icon that replaced the date bubble. You could use this CSS to adjust the left margin of that icon:

    footer .permalink,
.post-edit-link,
.image-attachment #content footer .permalink,
.image-attachment #content .post-edit-link {
	margin: 0 0 0 -35px;
}

  4. designsimply
    Happiness Engineer

    2. Is there a way to get quoted items in the post content to be styled? I was looking in the html and not sure there is a specific entry for post quotes - like the meow in quote would have an image on top right and possibly also be in a color block

    You could style quotes with CSS if you added some HTML around them to target them. For example, you could use the blockquote tag for that. Many themes have styles built in for blockquotes. Looks like Reddle makes them gray and indents the left margins. If you setup the quotes as blockquotes in your content, then you could use CSS to change the look of the blockquote styling built in to Reddle.

  5. designsimply
    Happiness Engineer

    3. Trying to get more padding between the image and its border but what I did it seems to not have worked all the way around

    To adjust the padding inside captioned images, try this:

    .wp-caption {
  padding: 35px;
}

  6. designsimply
    Happiness Engineer

    4. Is there a way to insert a image at the bottom of all posts? it would be a flourish image same one all the time

    There are a ton of different ways to do this. Here is an example to start you out:

    .hentry {
  background: url(http://almostartist.files.wordpress.com/2012/01/small_kit_sil.png) no-repeat center bottom;
  padding-bottom: 58px;
}

    I used the kitty image as an example since you didn't provide a different image. You would need to adjust the url() value as well as the bottom padding if you used that CSS. Also, this example makes the image appear below the sharing list on individual posts, and you may not want that in which case you'd need to figure out different styling.

  7. designsimply
    Happiness Engineer

    Thanks I have a few more in mind but need to try to see if I can figure them out first (like moving the/a menu area (about catergories) below the header

    Generally, posting each request in a separate thread is a good idea, compared to a big long list in one thread.

  8. almostartist
    Member

    Thanks so much!

    I think I have a difficult time determine which "class" or "id" i need to be making the css changes to - maybe itll come in more time

    Sorry I don't explain myself too well when I have too many thoughts :)

    by inserting image i mean with how you showed me how to put in the scroll at the end of the posts - is it a matter of determining the 'container' it is going in and then adding it as a background image with defined positioning?

    the one you gave worked great but like you said appears below the sharing the invidual posts which Im not sure how I like - Ill have to play with other ways

    Oh thank you I understand about the blockquote - duh I had to actually use html for the quote and not just my keyboard LOL

    Oh i was trying the get the padding on wp-image i guess thats where I was going wrong - thank you!

    you guys are all so nice helpful and knowledgeable!

  9. almostartist
    Member

    Apologizes

    to try and clarify what I meant about the page - left

    I was meaning the entire page div - the header - the content area - it all is now centered

    i was trying to make it more towards the left of the screen if that makes sense - so not the content inside the page but the entire page that sits on the background

  10. designsimply
    Happiness Engineer

    I think I have a difficult time determine which "class" or "id" i need to be making the css changes to - maybe itll come in more time

    You should totally try out Firebug. :) http://getfirebug.com/

  11. designsimply
    Happiness Engineer

    by inserting image i mean with how you showed me how to put in the scroll at the end of the posts - is it a matter of determining the 'container' it is going in and then adding it as a background image with defined positioning?

    Ah, I misunderstood the first request. Sorry!

    Yes, in that case, where you want a flourish at the bottom of every post for example, then it's just a matter of determining what element might be best to stick it on and try adding it as a background image and make sure to give it enough space so it's visible.

  12. designsimply
    Happiness Engineer

    I was meaning the entire page div - the header - the content area - it all is now centered

    i was trying to make it more towards the left of the screen if that makes sense - so not the content inside the page but the entire page that sits on the background

    Aha. Okay, this is the CSS that controls how #page is centered right now: 

    #page {
  margin: 0 auto;
}

    Basically, it sets the top and bottom margin to "0" and the left and right to "auto" which works to center the thing. You could change the left margin to a percentage instead, like this:

    #page {
margin: 0 20% 0 -20%;
}

    Keep in mind that people view a blog from all sorts of different screen sizes. Try adjusting your browser window to be smaller to see how it might look differently to some people.

  13. almostartist
    Member

    thanks again designsimply

    I think i figured out a couple of things - I put the image for every post in the div.sharedaddy and that seemed to work for now

    figured out the blockquote a little more but have to tweek it

    thanks

  14. designsimply
    Happiness Engineer

    Cheers. :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags