CHANGE FEATURED VIDEO APPEARANCE ON HOMEPAGE ONLY

• 

  theartofintegralbeing · Member · Jun 5, 2016 at 9:58 am

  • Copy link
  • Add topic to favorites

  Hello!

  I want the featured video to look different on the homepage. I would like to change it to a completely turquoise background and remove the white box and change the header font to white. When I do this using CSS, I changes the appearance of every post. I only want to change on the homepage.

  Thanks in advance!

  Kind regards,
  Gabriella

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

• 

  theartofintegralbeing · Member · Jun 5, 2016 at 10:00 am

  • Copy link

  P.S. If possible, I would also like the video to appear smaller on the homepage! Thanks

• 

  thesacredpath · Member · Jun 6, 2016 at 6:35 pm

  • Copy link

  Hi Gabriella, on the color changes, let’s start with this and see if this gets you close to what you are wanting.

  body.home.custom-background, .home .site-header, .home #page-header.no-hero, .home #front-page-blog, .home div#content.site-content, .home div.entry-content, div.sharedaddy h3.sd-title, .home #front-page-portfolio, .home #front-page-portfolio a, .home #site-callout, .home #tertiary.widget-area {
      background-color: #6fa39c;
  }
  .home h2, .home div.twelve.column h1 {
      color: #fff;
  }
  .home .main-navigation, .home .main-navigation ul, .home .main-navigation ul ul {
      background-color: rgba(0, 0, 0, 0);
  }

  On the video, add the following and adjust the 0.75 scale factor as desired.

  .home iframe {
      transform: scale(0.75);
  }
  .home div.sharedaddy h3.sd-title {
      color: #fff;
  }

• 

  thesacredpath · Member · Jun 6, 2016 at 6:36 pm

  • Copy link

  Oh and one thing I forgot to mention. Add the above at the very bottom of your custom CSS below all the rest.

• 

  theartofintegralbeing · Member · Jun 7, 2016 at 2:52 pm

  • Copy link

  Hello!

  I am sorry for not explaining myself well! The CSS for modifying the video size is perfect, but the CSS for the other things isn’t what I was after. I meant to only change the header to white and the background to turquoise on the featured video bit, the code you’ve shared changes it for everything. Is there CSS that only changes that isolated section without changing everything else?

  Thanks for your time!

  Kind regards,
  Gabriella

• 

  thesacredpath · Member · Jun 7, 2016 at 6:49 pm

  • Copy link

  Gabriella, thanks for the clarification. Add the following to make the featured video background turquoise and the text white.

  #featured-video div.entry-content {
      background: #6fa39c;
  }
  #featured-video div.entry-content h1 {
      color: #fff;
  }