Need Help With CSS – Using Illustratr Theme

  • Unknown's avatar
    emehlen · Member ·

    I have a very specific question regarding spacing in the Illustratr theme, I’ve scoured the internet already looking for the topic and the answer but nothing has shown up that resolves my dilemma.

    As stated, I’m using the Illustratr theme and everything is really spaced out (it’s ridiculous), you have to scroll down to see the body of a page because the padding and margins are enormous. Out of all the themes that are provided it’s the one I like the best though, unfortunately. Sooo… I need to adjust the padding in certain areas to personalize it the way I want it but I just don’t know how to using CSS.

    Specifically, I have a page with an image left aligned with text wrapped and I want the padding on top of the image to be reduced so the text header above is not so far spaced away. the text that is wrapped on the right hand side is spaced differently so it will not align with the image. I want the image to move up basically.

    Also, there is too much space between the page titles and the menu above, I want to reduce the amount of blank space that exists between the two.

    It wouldn’t hurt too if I could find out how to reduce the leading between lines of text, like I said, whoever designed this template really liked spacing things out!!

    Please anyone help! Thanks in advance.

    The blog I need help with is: (visible only to logged in users)

  • staff-zinnia · Staff ·

    Howdy –

    I can see that you have some newly added CSS in the Customizer on the site. Do you still need help with any of the items you listed?

  • Unknown's avatar
    erikmehlen659871171 · Member ·

    Hi!

    Thanks for the reply! Yes I did find some code that helped me do what I wanted but I still haven’t figured out how to reduce the padding around images in the body of a page.

    Also, now when I try to get rid of the page titles it also gets rid of my blog titles… how do I just get rid of the page titles. Again, thanks in advance!

  • supernovia · Staff ·

    Hi there, looks like your theme includes a few different types of images.

    Could you link to a post or page that needs its image padding adjusted, or include links to all of those pages?

    For example, on this page the correct code would go something like this:

    .alignleft {
    display: inline;
    float: left;
    margin: 20px 20px 20px 0;
}

    … adjusting as you’d like of course. And those numbers are for top, right, bottom, and left.

    But if you’re adjusting padding on the front page images it gets a bit trickier. Let us know which pages, and how you’re trying to adjust the padding, and we’ll see how we can help.

    Also, do link to the page that has the page title and blog title disappearing, and let us know what code you were using there. Let us know which part you intended to hide, too. As long as it’s still within our scope of CSS support, and hiding a title often is, we should be able to come up with something.

    Thanks in advance!

  • Unknown's avatar
    emehlen · Member ·

    Hi,

    Thank you for replying, yes that is one of the pages I was having issue with the images but I just ended up using shift+enter to get the text and image better lined up together horizontally. After your reply I also used that code and it’s exactly what I needed so thank you for that!

    The other page was this one
    where I need to make the image padding less on the top but now it looks like the code is affecting its padding. The two seem different though if you go back between the pages and look at the padding on the bottom and sides…

    As for the page titles the code I used eliminated them but also undesirably eliminated my blog titles on this page
    as for the code I think it was this

    .entry-title {

    display: none;
    }

    Thanks

  • kokkieh · Staff ·

    The other page was this one
    where I need to make the image padding less on the top but now it looks like the code is affecting its padding. The two seem different though if you go back between the pages and look at the padding on the bottom and sides…

    The CSS @supernovia gave will affect all images set to .alignleft, yes, so it does affect the image on your About page as well.

    If you only want it to affect images on a specific page, your CSS needs to be more specific, targeting the id attribute unique to that page, so #post-446 .alingleft rather than just .alignleft

    The bigger bottom-padding you see there is because of where the paragraph break is positioned in this case. On your books page the next paragraph every time starts above the bottom edge of the image, but on the About page it only starts below, so the extra space you see there is the paragraph’s padding, not the image’s. I wouldn’t try changing that.

    As for the page titles the code I used eliminated them but also undesirably eliminated my blog titles on this page

    If you only want to hide the titles on pages, you need to specify that in your CSS. Just targeting .entry-title will hide all titles across the site. Instead, try:

    /* Hide titles on static pages */
.page .entry-title {
	display: none;
}
  • Unknown's avatar
    emehlen · Member ·

    Thank you so much kokkieh, and everyone else for helping me with this. Your suggestions worked as I wanted them to. I appreciate it.

    -E

  • The topic ‘Need Help With CSS – Using Illustratr Theme’ is closed to new replies.