Harmonic Theme – Frontpage portfolio

• 

  marvavontheo · Member · Apr 20, 2017 at 10:19 am

  • Copy link
  • Add topic to favorites

  Hello! On my front page portfolio, I’m trying several css codes for the following issues and none of them worked:
  1) I want to change the distance between the portfolio thumbnails and the top of the subject slide
  2) I want the titles of the projects to be displayed. Not just when I hover over them.
  3) This is by default a four column portfolio template. Could I make it a three column so that my videos appear larger?

  Thank you in advance

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

• 

  thesacredpath · Member · Apr 20, 2017 at 9:31 pm

  • Copy link

  Hi there,

  1) I want to change the distance between the portfolio thumbnails and the top of the subject slide

  Are you talking about the space above the portfolio projects on the main page? If so, add the following and you can adjust the 10% value as desired.

  @media screen and (min-width: 64.063em) {
  	#para-template #slide-5 .hsContent #archive-container {
  		padding-top: 5%;
  	}
  }

  2) I want the titles of the projects to be displayed. Not just when I hover over them.

  Harmonic does not have include a Portfolio Project title div on the main page, and since that div is not there, we cannot show it. The title you see when you hover is actually put there by the browser. It is pulling the “title” from the image link code and displaying that in the popup that appears when you hover.

  We could add these manually with CSS using the “before” pseudo selector, but you would have to manually add it for each and every portfolio project that was displayed on the main page. This would be the code for the two you have there now.

  .home #post-98:before {
  	content: "Deranged | David Bowie Cover";
  	color: #fff;
  	display: block;
  	position: relative;
  	top: -20px;
  }
  .home #post-48:before {
  	content: "Live at Sofar, Athens";
  	color: #fff;
  	display: block;
  	position: relative;
  	top: -20px;
  }

  What you would need to do is to use the web inspector to find the unique post id number for the additional portfolio items you add, and then use the above two as a guide. This is an example of what you would be looking for (this is for the one on the right.
  <article id="post-48" class="post-48 jetpack-portfolio...
  CSS ids are preceded with a # when you write the CSS rules.

• 

  thesacredpath · Member · Apr 20, 2017 at 9:36 pm

  • Copy link

  3) This is by default a four column portfolio template. Could I make it a three column so that my videos appear larger?

  For the portfolio projects on the main page, we can make it so they are only 3 across with the following.

  @media screen and (min-width: 64.063em) {
  	.portfolio-projects .jetpack-portfolio {
  		width: 32%;
  	}
  }

• 

  marvavontheo · Member · Apr 22, 2017 at 5:08 pm

  • Copy link

  Thank you very much! All of them worked!

• 

  thesacredpath · Member · Apr 23, 2017 at 8:08 am

  • Copy link

  Hooray and you are welcome!