question about feature image Sela Theme

• 

  musicdoc1 · Member · Feb 10, 2015 at 9:20 am

  • Copy link

  @ thedreamcatcherblog,

  So you mean for that I have to create blog post for that image.

  No. It’s a page. Posts and pages may each have featured images with the Sela theme. To create that Front Page template header the box in the middle, just assign the page to Front Page template, and put some content in the page. The title of the page (in caps, top) and the page content will display in the center of the featured image within a white box. The Sela demo suggests using the box for a “call to action” (whatever that may be), but you may include links, images, videos, all kinds of goodies in that white box if you wish.

• 

  musicdoc1 · Member · Feb 10, 2015 at 9:22 am

  • Copy link

  I meant, “To create that Front Page template header with the box in the middle…”

• 

  musicdoc1 · Member · Feb 10, 2015 at 9:35 am

  • Copy link

  @ thedreamcatcherblog,

  If you want that Front Page template with the featured image and the magical box in the middle on the front page (It doesn’t have to be.), you’ve got to assign a static front page at Settings > Reading, and then choose that page as the front page.

• 

  siebe03 · Member · Feb 17, 2015 at 8:18 pm

  • Copy link

  staff-happychia

  http://sarasiebert.com/web-2/

  I am trying to do the same for each sub-section of this page and will do the same on the Print page. The CSS you gave me works on the page “Site Web” , but not the “Newsletter” page. What would I have to change to get this to happen on every page of that section ?

  Thanks a lot for your support. You are very resourceful. It’s greatly appreciated !

• 

  siebe03 · Member · Feb 17, 2015 at 10:49 pm

  • Copy link

  staff-happychia

  good news, I figured it out ! http://sarasiebert.com/web-2/newsletter/

  Now I have an other one for you if you don’t mind…A bit with the same idea, could I get ride of the text that shows up below the image on the Web page and just have the photo and the title, “Newsletter”. http://sarasiebert.com/web-2/

  thank you,
  Sara

• 

  musicdoc1 · Member · Feb 18, 2015 at 5:22 am

  • Copy link

  @ siebe03,

  could I get ride of the text that shows up below the image on the Web page and just have the photo and the title, “Newsletter”. http://sarasiebert.com/web-2/

  I’ve a trick that doesn’t require CSS customization. An excerpt will replace the text part of the page content below the featured images on the grid page. Therefore, just create an invisible excerpt. One way to do this is to place an HTML tag (e.g.
  ) in the excerpt module and save.

• 

  staff-happychia · Staff · Feb 18, 2015 at 7:30 am

  • Copy link

  @siebe03

  Two things.

  [1]

  Glad that you figured how to hide the image on the Newsletter page. I see that you have this CSS to hide the featured image from pages 100, 102 and 172. (I don’t have to know which pages they are.):

  body.page-id-100 .site-content .hero .entry-thumbnail img {
      display: none
  }
  
  body.page-id-102 .site-content .hero .entry-thumbnail img {
      display: none
  }
  
  body.page-id-172 .site-content .hero .entry-thumbnail img {
      display: none
  }

  We can combine these rules as following:

  body.page-id-100 .site-content .hero .entry-thumbnail img ,
  body.page-id-102 .site-content .hero .entry-thumbnail img ,
  body.page-id-172 .site-content .hero .entry-thumbnail img {
      display: none
  }

  If you wish to hide the featured image from every page, current and future pages you may add.:

  body.page .site-content .hero .entry-thumbnail img {
      display: none
  }

  [2] Regarding your latest question.

  (a) You can do what @musicdoc1 suggested. Only downside is, it requires managing excerpt for each page.

  or

  (b) Use this CSS which tells browser to remove the summary from the grid on the “Web” page (page-id-46):

  .page-id-46 .grid .entry-summary {
      display:none;
  }

  We can make this rule generic to tell the browser to remove the summary from the every grid on your blog.

  div.grid .page .entry-summary {
      display:none;
  }

  Finally we can combine all the rules as following:

  body.page-id-100 .site-content .hero .entry-thumbnail img ,
  body.page-id-102 .site-content .hero .entry-thumbnail img ,
  body.page-id-172 .site-content .hero .entry-thumbnail img,
  .page-id-46 .grid .entry-summary {
      display: none
  }

  Sorry if this is overwhelming, but I want to provide various options and get the maximum effect with the minimal CSS so it will be easy for you to manage going forward.

• 

  siebe03 · Member · Feb 18, 2015 at 3:15 pm

  • Copy link

  Wooot woot !

  this is awesome, you just made my day, I really liked that template, but I am new at this and I didn’t realize these things would be problematic and I was a little bumped when I ran into those problems and kind of felt like I might have not picked the right layout for the type of page I want to do…

  I am doing a night class at the local community college on web design. I am a bit familiar with HTML and working with Dreamweaver, but CSS is a bit overwhelming at this point. Hopefully I am going to get better at it with the help of that class and I’ll be able to kick arse soon enought !

  Thank you again !