Gallery text font CSS and less white space :)

  • Resolved Bluelight

    (@bluelight)


    9 years ago

    Hello again,
    I’ve set up the regular WP gallery of images( with the link plugin) on a page with captions and I would like to change the caption fonts to match the rest of my site which I’ve changed to Open Sans with Google fonts.
    Would you be so kind as to share any CSS I can use to do this? I’ve looked through the style sheet and didn’t find anything about the gallery ??
    https://peace.cosmiclight.ca/kitchens/
    password to view: table

    I’m also wondering how to decrease the white space between the banner and the page title in the content area, as well as the white space at the bottom of the page text. Actually both top and bottom white spaces on my website seem to be more than on your demo site.

    Thanks in advance,
    Claire

Viewing 8 replies - 1 through 8 (of 8 total)
  • Thread Starter Bluelight

    (@bluelight)

    Yeah! I’ve figured out how to change the caption fonts in the gallery to the way I want them with CSS edit to
    .wp-caption-text {
    font-family: “Open Sans”, sans-serif;
    color: #26619c;
    font-style: normal;}

    Now for decreasing the white space above and below the content would be wonderful…any assistance appreciated.

    Thanks in advance,
    Claire

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Good morning!
    Let’s start with changing the font using some custom CSS. This is the theme’s own styling for the captions:

    .wp-caption-text {
    color: #646464;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 1rem;
    text-align: center;
    line-height: 1.5;
    padding: 0.5rem 0;
}

    You will want to change the font to that class of .wp-caption-text

    For the top and bottom spacing, the theme’s styling is this:

    #content {
    padding: 60px 0;
    background-color: #fff;
}

    So you will again want to create some custom CSS to change the padding. The 60px 0 you see as padding means, 60px at the top, 0 for the right and left sides, and then 60px for the bottom…in that order.

    Theme Author Shaped Pixels

    (@shaped-pixels)

    lol… looks like you got to your solution just before I posted mine. Good job!

    Thread Starter Bluelight

    (@bluelight)

    Thank you so much.
    Since the 60px is not repeated for the bottom padding, I gather that the top and bottom should adjust to be the same?

    I’ve changed the 60 down to 1px…
    #content {
    padding: 1px 0;
    background-color: #fff;
    }

    it has made the change I was looking for at the top but the the change is quite variable at the bottom from one page to another..as examples

    https://peace.cosmiclight.ca/wood-turnings/
    https://peace.cosmiclight.ca/wood-turnings/series-2009/
    https://peace.cosmiclight.ca/contact/
    https://peace.cosmiclight.ca/kitchens/
    https://peace.cosmiclight.ca/

    Did I miss something?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    Articles (the content) have a bottom margin of 8% like this:

    .hentry {
 margin-bottom: 8%;
}

    This might be what you are seeing as extra space at the bottom. Also, if you are setting up front pages that won’t have page content other than widgets, use the Template Sidebars Only as the page template so it doesn’t load the article containers, therefore, saving you a little more space.

    Thread Starter Bluelight

    (@bluelight)

    Once again thank you so much…there is so much to learn!

    I’ve set up the home page as you said with Sidebars only and it made a huge difference.
    ..and .hentry {
    margin-bottom: 3%;
    }
    Happy!

    Blessings of appreciation to you ??

    Theme Author Shaped Pixels

    (@shaped-pixels)

    You’re very welcome ??
    I am guessing we can set this topic as resolved?

    Thread Starter Bluelight

    (@bluelight)

    Yes Thank you again.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Gallery text font CSS and less white space :)’ is closed to new replies.