SNAP THEME Customization

• 

  betoprado · Member · Aug 24, 2015 at 8:44 am

  • Copy link
  • Add topic to favorites

  Hi There!

  I am building a site (not a blog) using snaps theme on wordpress.com. There are a few little things that I would like to change, but I am finding really hard to do.

  01. Background Colour

  Firstly, I would like to change the background colour to a dark grey and font colours to white. Although I have an option to change the background colour, it looks like there is an semi-transparent white layer between the background and the page content (videos, thumbnails, etc..). So when I choose a different background colour it changes mainly the frame of the page, alway keeping a milky white(ish) background.

  02. Font Colour

  There are no options to change fonts colour.

  03. Menu Colour.

  I could be interesting if I could also change the menu bar colour.

  Most of the CSS I want to edit are in regards to elements in the project pages (http://robprado.com/portfolio/’name-of-the-project’/)

  04. I would like to hide the links/text ‘previous’ and ‘next’ projects.

  05. I would like to hide the text ‘comments are closed.’

  06. I would also like to hide the grey line bellow the video.

  07. Alignment

  The video is not aligned properly (compared to the main menu), it should be at the centre of the page. I guess there is a empty column/field (probably a side bar/menu) where it should have the project type links. I do not wish to use this side field, but even empty it affects the composition/alignment.

  Sorry about the silly question. I am really bad with codes and stuff. I hope those changes are possible!

  I would really appreciate if you guys could help me with those issues!

  Thanks a lot

  Cheers

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

• 

  g471n · Member · Aug 24, 2015 at 9:18 am

  • Copy link

  Hi betoprado

  Try the following custom CSS.

  Select Appearance > Customize > CSS from your Admin Dashboard and enter the custom CSS there.

  NOTE: You need to be on the WordPress.com Premium Plan for custom CSS to save. You can only preview custom CSS on the free plan.

• 

  g471n · Member · Aug 24, 2015 at 9:19 am

  • Copy link

  01. Background Colour

  #main {
      background: #797979;
      color: #ffffff;
  }

• 

  g471n · Member · Aug 24, 2015 at 9:26 am

  • Copy link

  02. Font Colour

  That would also have changed the page font colour to white.

• 

  betoprado · Member · Aug 24, 2015 at 9:59 am

  • Copy link

  Thanks Gavin!!!

  That fixed the background and font colour!

  Cheers matte

• 

  g471n · Member · Aug 24, 2015 at 10:55 am

  • Copy link

  04. I would like to hide the links/text ‘previous’ and ‘next’ projects.

  05. I would like to hide the text ‘comments are closed.’

  06. I would also like to hide the grey line bellow the video.

  .post-navigation {
      display: none;
  }
  .nocomments {
      display: none;
  }

• 

  betoprado · Member · Aug 24, 2015 at 12:01 pm

  • Copy link

  Thanks again Gavin!!!

  It looking much better already!

  Thanks a lot!

• 

  g471n · Member · Aug 24, 2015 at 12:31 pm

  • Copy link

  03. Menu Colour.

  I could be interesting if I could also change the menu bar colour.

  .main-navigation {
      background: rgba(35, 134, 166, 0.88);
  }

• 

  g471n · Member · Aug 25, 2015 at 6:53 am

  • Copy link

  Centring the video is still bothering me. I’ll let you know when I find a solution.

• 

  g471n · Member · Aug 25, 2015 at 8:05 am

  • Copy link

  This should do it :)

  .single .entry-content-wrap {
      float: none;
      margin-left: auto;
      margin-right: auto;
  }

• 

  betoprado · Member · Aug 25, 2015 at 8:53 am

  • Copy link

  Thanks so much Gavin!

  That fixed the video alignment. However, the title (above the video/content) is still not aligned properly.

  The solution might be something similar to the above code.

• 

  betoprado · Member · Aug 25, 2015 at 9:05 am

  • Copy link

  .single .entry-header {
      float: none;
      margin-left: auto;
      margin-right: auto;
  
  }

• 

  betoprado · Member · Aug 25, 2015 at 9:11 am

  • Copy link

  Hey Gavin,

  I tried the code above, based on the one you sent and that made the title aligned to the left with the video, but I could not make the title centred as everything else. Any idea?

• 

  betoprado · Member · Aug 25, 2015 at 9:17 am

  • Copy link

  It is actually working quite well aligned to the left. I was just wondering if it would look better centred as everything else.

  Thanks again, Gavin! It is looking exactly as I wanted to be!!!

  Cheers

• 

  g471n · Member · Aug 25, 2015 at 10:42 am

  • Copy link

  Thanks for the feedback.

  This should do it.

  .single .entry-header {
      float: none;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
  }

• 

  betoprado · Member · Aug 26, 2015 at 12:24 pm

  • Copy link

  Thanks for all the help Gavin!!!

• 

  g471n · Member · Aug 26, 2015 at 1:07 pm

  • Copy link

  My pleasure.