Removing black line that appears down right side of header

• 

  serealities · Member · Aug 25, 2015 at 2:48 pm

  • Copy link
  • Add topic to favorites

  Hi I have the elemin theme and have had help in the forum making changes to the original theme using CSS. In the header I’ve tried to make the page look less like the original theme because it looks so 90’s and it’s a pain to convert to a new theme. You can see the black line that runs down the right side of the header, is there CSS that will remove that line?

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

• 

  g471n · Member · Aug 25, 2015 at 5:30 pm

  • Copy link

  Hi serealities

  The black line actually runs around the edge of the whole page.

  Try this to remove it.

  #page {
      border: 0px;
  }

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

  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.

• 

  serealities · Member · Aug 25, 2015 at 6:46 pm

  • Copy link

  Thanks so much! Elemin is not a full width theme but I don’t suppose that there is any CSS that would make this a full width page??

• 

  g471n · Member · Aug 26, 2015 at 10:43 am

  • Copy link

  Yes, I’m sure we can do that. Try this and let me know what you think.

  #page {
      width: 100%;
  }
  
  #branding hgroup {
      margin-left: auto;
      margin-right: auto;
  }

• 

  serealities · Member · Aug 26, 2015 at 10:41 pm

  • Copy link

  wow! It works! Since I had the header image created in a graphic it does not move with the margin so in a full width text, I’m not sure how I would correct that or know what pixels to use for a new header.

  The the text stops where it already did, like not across the entire screen however, the CSS you sent does make it full width.

  If you have any suggestions to those issues, please let me know. Otherwise,
  Many many thanks!

• 

  thesacredpath · Member · Aug 26, 2015 at 11:13 pm

  • Copy link

  Hi, add the following to have the content centered below the header image.

  #primary {
      margin-left: auto;
      margin-right: auto;
      float: none;
  }

  One thing I will mention is that for readability, you don’t want the text to go full width on wide monitors. Although it is a bit more complicated, the best width for maximum readability is between 500 and 750px for content. Right now you maximum content width is 980px.

  See what you think with the above addition.

• 

  serealities · Member · Aug 27, 2015 at 1:27 am

  • Copy link

  Thanks so much! What I like is that it is still readable on my phone. I would need to work on the look of the header for a monitor but what do you think the header image would need to be in terms of pixels? if that’s even doable…

• 

  thesacredpath · Member · Aug 27, 2015 at 2:13 am

  • Copy link

  What are you wanting to accomplish with the header image? I see on phones it is rather small, and I’m not sure with the nature of your header image that we can do a lot about that. If you can explain what you are wanting, I’ll see what I can do, or suggest, to make that happen.

• 

  serealities · Member · Aug 27, 2015 at 4:38 am

  • Copy link

  thanks! so, where you see the header image on a laptop screen, the header is a png that is uploaded and now is centered in the full width page. If there is a way that the full width of the header only could be the background color of the header image rather than white, that’s what I would want to accomplish. It would look as though the banner across the top of the page was all the same color #615f8b and that the logo and the header text floated on that background color. I’m not sure I’m good at describing this :/

• 

  g471n · Member · Aug 27, 2015 at 5:55 am

  • Copy link

  This should do it.

  #branding {
      background-color: #615E8B;
  }
  
  #access {
      background-color: #FFFFFF;
      width: 100%;
  }

• 

  serealities · Member · Aug 27, 2015 at 12:59 pm

  • Copy link

  you guys are amazing! Since it reduced the size of the logo… and I promise this is my last challenge… What if you could take the purple extra space under the logo and move it to above the logo… ? ;-)

• 

  g471n · Member · Aug 27, 2015 at 1:33 pm

  • Copy link

  Here we go.

  #access {
      margin-top: -0.27em;
  }
  
  #branding {
      margin-top: .25em;
  }

• 

  serealities · Member · Aug 27, 2015 at 1:48 pm

  • Copy link

  You guys are amazing! Thanks so very much!

• 

  serealities · Member · Aug 27, 2015 at 1:48 pm

  • Copy link

  You guys are amazing! Thanks so very much!

• 

  serealities · Member · Aug 27, 2015 at 1:48 pm

  • Copy link

  You guys are amazing! Thanks so very much!

• 

  serealities · Member · Aug 27, 2015 at 1:48 pm

  • Copy link

  You guys are amazing! Thanks so very much!

• 

  g471n · Member · Aug 27, 2015 at 2:08 pm

  • Copy link

  Thank you. You are very welcome :)