McKinley CSS Modifications

Hi JamesSeevers,

I think you are using wordpress.com and not www.remarpro.com, if that’s the case, if I’m not mistaken, the customization in your theme is limited.

Hey Jay,

Thanks for the response. I upgraded and so I can use the css editor to change the css following after the theme css, which will give my directives priority. All I need to know is what exact css phrases to enter into the editor to change the header width to stretch all the way across the screen instead of having a border for example, etc. I’m having trouble locating the appropriate selector phrases for my theme’s css.

#header {
max-width: 100%;
}

Hey Jay,

Thanks for your quick response! So I inserted this code into the edior and nothing changed. I think what I really need to do is change the margins or borders or something else on the overall layout of the page because the width of the header is 100%, but that 100% seems to be contained within the layout directives for the whole site.

I guess the more accurate question I need answered is how do I eliminate all borders and margins on all pages of my site? Is there any over arching css I can enter that will give me a white page with a header and nothing else, no margins, no footer, no time stamp after posts? Possibly such as:

.site {
margin:0px
}

Thanks again!

You can use developer tools to play around with css. If you use firefox as your browser, try firebug to inspect elements.

Use this in your custom CSS instead:

footer.entry-meta,
#colophon {
   display: none;
}
#page {
   margin: 0;
   padding: 0;
   max-width: none;
}
body {
   padding: 0;
}

Thanks for your responses CrouchingBruin and Jay!

YES! CrouchingBruin that just solved everything I was trying to do! Thank you! Any thoughts on how I might be able to eliminate the “Share this:” buttons on the bottom of my individual pages so it’s blank like the home page?

Thanks again!

JamesSeevers.com

Additionally, there is a small tab with “follow” on the bottom right that pops up on the site, any ideas on how to get rid of that too?

Thanks!!!!

#jp-post-flair, #bit {
   display: none;
}

Yes! Once again CrouchingBruin you have come through with the solution. Thank you thank you thank you. You have resolved all of the issues I have for now and I will mark this thread resolved all thanks to YOU! Job well done sir!

Hey folks,

I’d like to try and make the navigation bar under my header a little bit thinner, any tips on the css to do that?

JamesSeevers.com

There are a couple of rules affecting the height of the nav bar. These are the current properties for the rules in question:

.navbar {
   padding: 15px 0;
}

.nav-menu li a {
   padding: 15px 20px;
}

Just copy & paste to the end of your custom CSS and adjust the values. The first rule is for the nav bar itself, the second rule is for the menu items within the nav bar. For the padding values, the first value (15px) is the amount of padding above & below (top & bottom) the element. That is the value that you want to change, for either or both rules (just play around with it). The second values (0 & 20px) are for the left & right padding. Don’t change those, unless you feel like changing the spacing of your menu items, in which case you can adjust the value for the second rule.

You can also change the font size of the menu items by adding a font-size property to the second rule. The current value is 1.5rem, but you can also use pixels (px) as the unit of measurement:

.nav-menu li a {
   padding: 15px 30px;
   font-size: 26px;
}

Thank you so much CrouchingBruin you have consistently provided the exact answers I need to modify my site. You are a fantastic person and should feel awesome about yourself!

Ok I’ve got another question,

I’d like to get the content of my pages to span the whole width of the screen rather than have margins. Any ideas on some css that might accomplish that?

JamesSeevers.com

Currently, the container which holds the page content, having a class of entry-content has the max-width property set to 700px. You can eliminate that by setting max-width to none, but your content will go butt-up against the side edges of the browser window, so I would suggest adding some padding to put some white space on both sides:

.entry-content {
   max-width: none;
   padding: 0 50px;
}

You can adjust the second value for padding depending upon how much white space you want.