CSS formatting for posts

  • lisakaye

    (@lisakaye)


    7 years, 9 months ago

    I’ve posted this on the Goran support page but I don’t think it specifically applies to that theme… I am battling to work my way around the CSS used on the posts (News) page 🙁 I have 4 things I would love to do on this page.
    1. Change the H2 heading to H3 (which is lowercase and smaller) but I cannot find it referenced anywhere.
    2. Reduce spacing below the horizontal line in between posts
    3. Retain the page title (it’s positioned below the top slider and only disappears on this page)
    4. Keep a blurb of static text above the posts

    The page is at:
    http://www.keystonepark.co.za/devsite/?page_id=51

    I’d be so grateful for any assistance – been wasting days on this page trying 101 things that don’t work 🙁

Viewing 7 replies - 1 through 7 (of 7 total)
  • Kye

    (@gmax21)

    7 years, 9 months ago

    Hey there,

    1. 

    .entry-title, .page-title {
	text-transform: none;
	font-size:23px;
}

    2. The padding and margin are added in multiple places, you need to look at @media screen

    .hentry is adding a margin to the bottom like:

    .hentry {
    margin-bottom: 48px;
}

    And to the top with padding. Depends on whether you want to override for all areas using this class or just this one. If we use the theme CSS it can look like this:

    @media screen and (min-width: 1020px)
.archive:not(.post-type-archive-jetpack-testimonial) .hentry, .blog .hentry, .search .hentry, .content-area, .featured-page, .featured-page-area, .footer-widget-area, .front-page-testimonials-wrapper, .front-page-widget-area, .grid, .grid-wrapper, .widget, .widget-area {
    padding-top: 72px;
}

    3. I don’t get ya, can you please elaborate further?

    4. Don’t think I fully understand this one either, could you please explain further?

    Not sure if the theme has a custom CSS area, but if not you could either make a child theme or use a plugin like:

    https://wordpress.org/plugins/simple-custom-css/

    Cheers

    Thread Starter lisakaye

    (@lisakaye)

    7 years, 9 months ago

    Thanks so much for your response Timothy – it’s really appreciated. I have applied the code to customize the post headings – thank you!

    3. The spacing that I’m having issues with is above/below the horizontal rule in between posts. There is a lot of ‘wasted’ white space. I have managed to decrease the spacing between post title/date/content but can’t get rid of it between the actual posts themselves. The CSS for the HR (see below) is not working on this page. Or maybe it is and there’s something else (like the actual post content?) that is creating the additional space below it. I’ve tried using Firebug to determine what the ‘element’ is called but have not been successful.

    hr {
	margin-bottom: 1px;
	height: 1px;
}

    4. I’d like to add a line of text that remains above the posts – so just for example “This is the current news relating to the construction progress…” Not sure if this is possible. Was going to use it as an option to add the title “Latest News” if I wasn’t able to feature the header on the posts page like on all the other static pages. If you look below the slider image there is a black strip with the headings of all the pages (Welcome, About, Contact etc) but on the News page (which is where the posts go) it disappears for some reason.

    p.s. I have installed Custom CSS using Jetpack. Goran is already a child theme – only realised these limitations after I had started using it but will bear in mind for future.

    Kye

    (@gmax21)

    7 years, 9 months ago

    Hey again.

    3. We’re talking about this space here:

    http://take.ms/Aw33G

    ?

    If so, your theme uses this CSS:

    .archive:not(.post-type-archive-jetpack-testimonial) .hentry,
	.blog .hentry,
	.search .hentry,
	.content-area,
	.featured-page,
	.featured-page-area,
	.footer-widget-area,
	.front-page-testimonials-wrapper,
	.front-page-widget-area,
	.grid,
	.grid-wrapper,
	.widget,
	.widget-area {
		padding-top: 72px;
	}

    That targets a bunch of CSS classes, you want this one:

    .blog .hentry{
		padding-top: 0;
	}

    Between the title and date:

    h2 {
    margin: 0 auto 0;
	}

    That’s rather loose in that it will hit all H2 tags, we could get more specific like:

    .entry-header h2 {
    margin: 0 auto 0;
	}

    Or even further, perhaps you just want that on the blog:

    .blog .entry-header h2 {
    margin: 0 auto 0;
	}

    4. CSS has a content feature which could be handy:

    .blog .site-main:before {
   content: "Latest News: ";
   font-size:24px;
}

    This would be the result:

    http://take.ms/sWP2c

    You could also edit the child theme or look to see if theme provides some kind of hook/filter which you could use to manipulate the relevant page and area into showing the content that you desire.

    Is that what you were aiming for?

    Thread Starter lisakaye

    (@lisakaye)

    7 years, 9 months ago

    That all makes sense now, thanks so much – I really thought it was the space below the content, not the space above the header that needed changing 🙂

    Any ideas why the header/page title doesn’t appear on this page when it does on all the others?

    Kye

    (@gmax21)

    7 years, 9 months ago

    Any ideas why the header/page title doesn’t appear on this page when it does on all the others?

    I think I misunderstood that part before.

    I’m not sure, but the theme probably targets the blog archive page and does something different. You’d have to check the theme code, look for the title function:

    https://codex.wordpress.org/Function_Reference/the_title

    Cheers.

    Thread Starter lisakaye

    (@lisakaye)

    7 years, 9 months ago

    OK, will do, thanks. Although at least with the static text above I can put some kind of ‘heading’ on the page. To be honest I stumbled across that positioning of the header/page title when I was fiddling with the CSS so not quite sure how I did it 😉

    Thank you again for all your help.

    Thread Starter lisakaye

    (@lisakaye)

    7 years, 9 months ago

    Haven’t managed to find a solution to keep the page title which is called from header.php so not sure why it works on pages but not posts. Any suggestions welcome, please!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS formatting for posts’ is closed to new replies.