Twenty Seventeen styling Portfolio and Blog pages

• 

  mid0nz · Member · May 26, 2017 at 8:32 pm

  • Copy link
  • Add topic to favorites

  I’m trying to make the default /portfolio page (https://maryjowatts.com/portfolio) look like this page with the portfolio shortcode that I’ve styled. (https://maryjowatts.com/portfolio-2/)

  Essentially I want a box around each post but only on the Portfolio page (and perhaps the Blog page as well). I want to do this b/c the default styling is shapeless and confusing to read.

  The only element I can find to use is “article” but that’s global. I want it to look like this:

  {
  border: thin solid #482b84;
  padding: 25px
  margin-bottom: 30px
  -webkit-box-shadow: 0 8px 6px -6px black;
  -moz-box-shadow: 0 8px 6px -6px black;
  box-shadow: 0 8px 6px -6px black;
  }

  How do I restrict this style to just Portfolio and Blog and not the other pages?

  Thanks!

  The blog I need help with is maryjowatts.com.

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

• 

  thesacredpath · Member · May 26, 2017 at 10:32 pm

  • Copy link

  Hi there, for the portfolio page, give this a try.

  .jetpack-portfolio {
  	border:thin solid #482b84;
  	margin-bottom:3em;
  	-webkit-box-shadow:0 8px 6px -6px #000;
  	-moz-box-shadow:0 8px 6px -6px #000;
  	box-shadow:0 8px 6px -6px #000;
  	padding: 25px;
  }

  If you wish to do both the blog and the portfolio archive page, then do this instead.

  .jetpack-portfolio, .blog .hentry {
  	border:thin solid #482b84;
  	margin-bottom:3em;
  	-webkit-box-shadow:0 8px 6px -6px #000;
  	-moz-box-shadow:0 8px 6px -6px #000;
  	box-shadow:0 8px 6px -6px #000;
  	padding: 25px;
  }

• 

  mid0nz · Member · May 27, 2017 at 2:37 am

  • Copy link

  PERFECT! Thank you!!!

• 

  mid0nz · Member · May 27, 2017 at 2:38 am

  • Copy link

  PERFECT! Thank you!!!

• 

  mid0nz · Member · May 27, 2017 at 3:00 am

  • Copy link

  One last question– If you click on the blog page, the blog entries have the box-shadows but if you click on an entry, there’s no box-shadow. This is what I want. But if you click on Portfolio and click on an entry, that entry has a box-shadow. How do I keep the box-shadow on /portfolio and not on the individual posts?

• 

  thesacredpath · Member · May 27, 2017 at 4:26 am

  • Copy link

  Ah, we can do that. Replace what I had given before with the following.

  body:not(.single-jetpack-portfolio) .jetpack-portfolio,.blog .hentry {
  	border:thin solid #482b84;
  	margin-bottom:3em;
  	-webkit-box-shadow:0 8px 6px -6px #000;
  	-moz-box-shadow:0 8px 6px -6px #000;
  	box-shadow:0 8px 6px -6px #000;
  	padding:25px
  }

• 

  mid0nz · Member · May 27, 2017 at 7:09 pm

  • Copy link

  This code is exactly what I wanted to do and I so appreciate your help. There’s no way I would have figured that out on my own, but I would have wasted hours trying! THANKS!

• 

  thesacredpath · Member · May 28, 2017 at 6:43 am

  • Copy link

  You are welcome, and let us know if you have additional questions.