How to Style Blog Page

Support
#1

Hi, I’m working on a site and I’m using a plugin that uses the Blog page to display my clients projects. The problem is I need to change the CSS on the single pages, as the masthead needs to be lower down and I want the ‘Blog’ page title removing. I’ve tried to change the CSS already, but I don’t think I’ve got the correct tag for it as nothing happens! I hope you can help me out!

I’ll put the CSS code below and I’ll include a secure note with the admin login details, as I have a maintenance page up at the moment.

.single-post .masthead {
  position: static !important;
}
.single-post .x-header-landmark {
  display: none;
}

Thanks!

#2

Hi There,

Please update your custom CSS to this:

.single-projects .masthead {
  position: static !important;
}
.single-projects .x-header-landmark {
  display: none;
}

Hope it helps :slight_smile:

#3

Hi, that’s great, spot on, thank you so much!

Would you be able to help me out with one more thing pleeeeeeeeeeeeease?!! It’s the main projects page, I’m trying to restyle it and move the title up over the top of the thumbnail. When I change the CSS with the Google Inspect tool I get it to display exactly how I want it, but then when I add the CSS into the Global CSS, it doesn’t change a thing, and I have no idea what I’m doing wrong!

The code I’m using is:

.projects-item-instance .project-content {
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
margin-top: -100px;
width: 100%;
}

I’ll give you the page URL in a secure note.

I’ve attached a screen grab of how it should look after the CSS has been applied.

Thanks!

#4

Hi There,

Your custom CSS looks correct. I’m not sure what’s causing the error.

But I replaced with this CSS. Everything is working fine:

.projects-item .featured-image {
  margin-left: 0px;
}
.projects-item .project-content {
	position: absolute;
	background: rgba(0, 0, 0, 0.7) !important;
	margin-top: -100px;
	width : 100%;
}
div.project-content h3 {
  margin-top: 13px;
  margin-bottom: 13px;
  color: #fff;
}
div.project-content h3 a {
  color: #fff;
}
div.project-content h3 a:hover {
	color: #eee;
}

Cheers!

#5

Hi @thai

That’s great! Thank you sooooooooo much! I really appreciate your help and time with this.

Thank you!!!

#6

You’re most welcome.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.