Sela theme and altering 'Front Page' template

• 

  uksherka · Member · May 3, 2016 at 5:26 pm

  • Copy link
  • Add topic to favorites

  hello. i have chosen Front Page as a static home page for my site using the Sela theme. However, i want to alter the large box in the centre. Ideally to move it lower, so it sits in the water of my featured image and doesn’t actually block out the heart of the image. Having it completely deleted is another option that would work for me. Thanks.

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

• 

  thesacredpath · Member · May 3, 2016 at 7:04 pm

  • Copy link

  Hi there, with the image you have I think the following is about the best we can do on getting more of the center of your image to show.

  .front-page-content-area .with-featured-image .entry-meta {
      display: none;
  }
  .front-page-content-area .with-featured-image .entry-header {
      margin-top: 0;
  }
  .front-page-content-area .with-featured-image .entry-content {
      margin-bottom: 0;
  }
  .front-page-content-area .with-featured-image .entry-header .entry-title {
      margin-bottom: 0;
  }
  .front-page-content-area .hero-container-inner {
      vertical-align: bottom;
  }
  .front-page-content-area .with-featured-image {
      margin-bottom: 20px;
      opacity: 0.75;
      padding: 1em;
      width: 400px;
  }
  .front-page-content-area .with-featured-image .entry-header .entry-title {
      font-size: 130%;
  }

  See what you think with that.

  Another option would be to hide the image in the white block and just have the title. This would be the CSS for that.

  .front-page-content-area .with-featured-image .entry-content {
      display: none;
  }
  .front-page-content-area .with-featured-image .entry-meta {
      display: none;
  }
  .front-page-content-area .hero-container-inner {
      vertical-align: bottom;
  }
  .front-page-content-area .with-featured-image {
      margin-bottom: 50px;
      opacity: 0.75;
      padding: 0.5em;
  }

  And this would hide it entirely.

  .front-page-content-area .with-featured-image {
      display: none;
  }

• 

  uksherka · Member · May 3, 2016 at 8:41 pm

  • Copy link

  hi there. Thanks for this. Except…um…. i have no idea what to do with it, what it means and how to take this info and use it in my website to change the template.

  where do i start with your info? thanks

• 

  thesacredpath · Member · May 3, 2016 at 10:04 pm

  • Copy link

  Hi, sorry. That is custom CSS. Go to Customize > CSS, delete all the informational text in that window, and copy/paste the above custom CSS into that window and then you can preview the change. Then save and visit your site to see how it looks on the live site. If something is wrong, you can let me know and just delete the CSS from Customize > CSS and save to return to the original design.

  Let me know how things go.

• 

  uksherka · Member · May 4, 2016 at 7:19 pm

  • Copy link

  thanks. i’ll give it a go!

• 

  uksherka · Member · May 4, 2016 at 7:25 pm

  • Copy link

  OMG that’s perfect! Thank you! This is the first time i’ve managed to do anything that looks decent with my site. Cheers!

• 

  thesacredpath · Member · May 4, 2016 at 7:47 pm

  • Copy link

  Hooray and you are welcome!