CHANGE PORTFOLIO TITLE AND PAGE APPEARANCE

• 

  theartofintegralbeing · Member · Apr 18, 2016 at 4:34 pm

  • Copy link
  • Add topic to favorites

  Hello!

  I would like to change the title of ‘Portfolio’ to ‘Inspiration’ or something like that, is it possible?

  I would also like to change a few other things regarding the portfolio.

  1. The background colour of the page (when I change it with CSS it changes the background colour on ALL pages!)
  2. The title background colour (to white) and title position (to central), when on the portfolio page.

  I look forward to your reply!

  Kind regards,
  Gabriella

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

• 

  thesacredpath · Member · Apr 18, 2016 at 11:45 pm

  • Copy link

  Hi Gabriella, let’s start with the following and then if need be we can go further.

  I would like to change the title of ‘Portfolio’ to ‘Inspiration’ or something like that, is it possible?

  This will do that for you and also changes the new title color to white (#2).

  .post-type-archive-jetpack-portfolio .page-title {
      font-size: 0 !important;
  }
  .post-type-archive-jetpack-portfolio .page-title:before {
      content: "Inspiration";
      font-size: 70px !important;
      color: #fff;
  }

  1. The background colour of the page (when I change it with CSS it changes the background colour on ALL pages!)

  What we can do is to use a CSS selector from the opening body HTML tag in the Portfolio page to target just that page, similar to what I have done above in the CSS for the title. I’m not entirely sure how far you want to go with this, so let’s start with this and see if this goes too far or not far enough.

  .post-type-archive-jetpack-portfolio .site-header, .post-type-archive-jetpack-portfolio #content.site-content, .post-type-archive-jetpack-portfolio #page-header.no-hero, .post-type-archive-jetpack-portfolio #tertiary.widget-area {
      background: #eebb22;
  }

• 

  theartofintegralbeing · Member · Apr 19, 2016 at 3:32 pm

  • Copy link

  Hello!

  Thank you so much for your prompt response! There is a little teeny tiny problem though. the ‘iNSPIRATION’ header only appears on the page once you click on it from the homepage, the square box ‘PORTFOLIO’ on the homepage is still the same.

  Also, the background colour is a little too much, I wanted the colour to frame the three items on the portfolio but not the title, logo and menu bar. I also wanted this same effect on the blog posts page. Is it possible?

  Kind regards,
  Gabriella

• 

  thesacredpath · Member · Apr 20, 2016 at 7:07 am

  • Copy link

  Hi, the front page of the site takes an entirely different approach on replacing the Portfolio text and is quite a bit trickier. Give this a try.

  #front-page-portfolio a.call-to-action {
      color: rgba(0, 0, 0, 0);
      font-size: 0;
  }
  #front-page-portfolio a.call-to-action:before {
      content: "Inspirations";
      font-size: 0.9rem;
      color: black;
      border: 2px solid;
      padding: 15px;
      font-size: 0.9em !important;
  }

  On the portfolio page, the following adds the background color to only the three portfolio projects.

  .post-type-archive-jetpack-portfolio .site-content .grid {
      background: #eebb22;
      padding-top: 30px;
  }

• 

  theartofintegralbeing · Member · Apr 20, 2016 at 7:31 am

  • Copy link

  Hello!

  This is great thank you! It all works now and looks lovely, the only teeny thing is the ‘portfolio’ text box on the homepage is not centre-aligned, I’ve tried with ‘align: centre-align’ but it doesn’t seem to work. Any thoughts?

  Kind regards,
  Gabriella

• 

  theartofintegralbeing · Member · Apr 20, 2016 at 7:35 am

  • Copy link

  I just figured it out my playing around! CSS is difficult but so so satisfying when you get it!

  Thanks again, you’ve been so helpful.

  Kind regards,
  Gabriella

• 

  thesacredpath · Member · Apr 20, 2016 at 9:04 am

  • Copy link

  Glad you got it figured out and you are welcome.