Penscratch Theme CSS Changes

• 

  yarnitup · Member · Oct 22, 2014 at 4:19 pm

  • Copy link
  • Add topic to favorites

  Hi, I’d like to change the spacing between all of the elements at the top of the page (the logo, border lines, header, etc.) – how can I do that?

  I’d also like to change the spacing between all the lines in between post previews and widgets.

  And lastly, is it possible to divide the area where the logo is to two (like a table) so that I have the logo and a small banner beside it?

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

• 

  designsimply · Member · Oct 22, 2014 at 9:03 pm

  • Copy link

  To adjust spacing, you’ll want to use your browser tools to figure out what CSS selectors the theme is already using for margins and padding in those areas. Here is a guide:
  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

  Then you can copy the selectors the theme is using and set the margins and padding to whatever value you want.

  Here is an example that reduces the margin and padding around the main header area and the main menu to zero:

  .site-header,
  .main-navigation {
    margin: 0px;
    padding: 0px;
  }

  Here’s a quick screencast showing how I found the CSS selectors that were needed using Firefox:
  https://cloudup.com/cl_WMZ4d1r5

  Other browsers have similar options when you right-click and choose “Inspect Element.”

• 

  yarnitup · Member · Oct 23, 2014 at 8:39 am

  • Copy link

  Thanks, I made the spacing changes

  Is it possible to have the logo on the same line as the menu, so that the logo is on the left of the menu? I couldn’t find how to do that in the template’s css

• 

  nizamilputra · Member · Oct 23, 2014 at 9:14 am

  • Copy link

  Let’s try with this css

  .site-branding{
  display: inline-block;
  float: left;
  }
  .main-navigation{
  display: inline-block;
  float: right;
  }

• 

  yarnitup · Member · Oct 23, 2014 at 9:42 am

  • Copy link

  Thanks for the help! It’s not quite right, that moved the menu to the left and the logo stayed put

• 

  nizamilputra · Member · Oct 23, 2014 at 10:00 am

  • Copy link

  I think you put the wrong code. It should be right.
  When I see with web inspector .main-navigation has float: left and .site-branding doesn’t has property display: inline-block; and float: left;
  Please check your css again. Or paste my css at the bottom line of css code.

• 

  yarnitup · Member · Oct 23, 2014 at 11:08 am

  • Copy link

  I copy-pasted it as is

• 

  nizamilputra · Member · Oct 23, 2014 at 12:28 pm

  • Copy link

  Please take a look what I’ve done with web inspector http://i.imgur.com/O0BsK1g.jpg.

• 

  yarnitup · Member · Oct 23, 2014 at 12:39 pm

  • Copy link

  Strange, it’s not working on my end. I copied the code exactly and you can see here what it looks like: http://i.imgur.com/7IWNAj0.png

• 

  nizamilputra · Member · Oct 23, 2014 at 12:48 pm

  • Copy link

  Hmm… It’s weird. Maybe we should wait WordPress staff to explain about this strange. I just can help by edit via web inspector.

• 

  thesacredpath · Member · Oct 23, 2014 at 3:43 pm

  • Copy link

  @karenhayoun, I just tried @nizamilputra’s solution directly in your customizer, and it works, but what I did see in your customizer is that the existing .main-navigation rule you have does not have a closing curly bracket ( } ). Once I added that closing bracket and then added the code above, everything worked just fine.

  I’ve added the closing curly bracket to your custom CSS and saved it, so try pasting in the code again and it should work.

• 

  yarnitup · Member · Oct 23, 2014 at 5:29 pm

  • Copy link

  Thanks! How do I move the menu down a bit?

• 

  thesacredpath · Member · Oct 23, 2014 at 5:37 pm

  • Copy link

  You can add a top margin declaration to .main-navigation, such as this. 30px seems to work pretty nicely.

  .main-navigation {
      display: inline-block;
      float: right;
      margin-top: 30px;
  }

• 

  yarnitup · Member · Oct 24, 2014 at 8:47 am

  • Copy link

  Thanks so much for all the help!

• 

  thesacredpath · Member · Oct 24, 2014 at 5:59 pm

  • Copy link

  You are welcome.

• 

  yarnitup · Member · Oct 28, 2014 at 10:30 am

  • Copy link

  Hey, one last request – can you tell me how to move the header so it’s on top of the logo and menu?
  Thanks for all the help so far, I really appreciate it

• 

  nizamilputra · Member · Oct 28, 2014 at 1:26 pm

  • Copy link

  Hey, let me help you again.;

  .site{
  position: relative;
  }
  
  .custom-header{
  position: absolute;
  top: 54px;
  }
  
  .site-header{
  margin: 100px 7px 40px 7px;
  }
  
  .main-navigation{
  margin-bottom: 10px;
  }

  I hope it will helps you. Don’t hesitate to ask here again if you need another help.

• 

  yarnitup · Member · Oct 28, 2014 at 9:12 pm

  • Copy link

  Thank you so much!

• 

  nizamilputra · Member · Oct 29, 2014 at 6:07 am

  • Copy link

  You are welcome!

• 

  yarnitup · Member · Oct 29, 2014 at 10:13 am

  • Copy link

  I don’t know if this requires CSS but I couldn’t find it in the dashboard. I want to change the link color (the color of links in text) in the entire blog. I have the premium account so I know I can edit fonts and colors but I don’t see any options for specific coloring like links, clicked links, etc.