Edin them – Homepage CSS

• 

  ybaileche · Member · Nov 7, 2015 at 9:24 am

  • Copy link
  • Add topic to favorites

  Hello,

  I’m using the Edin theme and struggling to change the following:

  – Move the titles of the featured pages of the homepage above the images.
  – Add space between the featured image and the featured pages on the homepage

  Thank you

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

• 

  nizamilputra · Member · Nov 9, 2015 at 9:03 am

  • Copy link

  Hi there, let me try to help you.

  – Move the titles of the featured pages of the homepage above the images.

  .featured-page-area .hentry{
      position: relative;
      padding-top: 50px;
  }
  
  .featured-page-area .entry-header{
      position: absolute;
      top: 0;
      width: 100%;
      white-space: nowrap;
  }
  
  .featured-page-area .entry-header .entry-title{
       text-overflow: ellipsis;
      overflow: hidden;
  }

  – Add space between the featured image and the featured pages on the homepage

  I’m not sure about this. You mean “featured page” is section which contain facebook video?

• 

  ybaileche · Member · Nov 13, 2015 at 7:11 pm

  • Copy link

  Hello,
  Thanks a lot for you help. I found how to do this.

• 

  andreakrenn1 · Member · Nov 23, 2015 at 11:01 am

  • Copy link

  Hi @nizamilputra @ybaileche @thesacredpath

  Could I please ask you guys for help with a different issue related to the Edin Homepage CSS?
  The theme automatically adds a grey layer over the main image on the homepage. Is there a way to remove that layer or change its colour?
  Thanks!
  Andrea

• 

  milonrahman · Member · Nov 23, 2015 at 1:05 pm

  • Copy link

  .featured-page-area .hentry{
  position: relative;
  padding-top: 50px;
  }

  .featured-page-area .entry-header{
  position: absolute;
  top: 0;
  width: 100%;
  white-space: nowrap;
  }

  .featured-page-area .entry-header .entry-title{
  text-overflow: ellipsis;
  overflow: hidden;
  }

• 

  thesacredpath · Member · Nov 27, 2015 at 6:45 pm

  • Copy link

  @andreakrenn1, are you talking about when you hover one of the images in Abstract, Coastal Impressions, etc? If so, that fade of the image is done by setting a lower opacity on the image when hovered. You can change that with the following CSS.

  a.post-thumbnail:hover, a.post-thumbnail:focus, a.post-thumbnail:active {
      opacity: 0.7;
  }

  The closer to 1, the more opaque it will be on hover. If you do not want the opacity change, set 0.7 to 1.