McKinley CSS Modifications

Well I’ve spent a couple hours trying to figure this out on my own and I just don’t know what the hell to do so I’m back again.

JamesSeevers.com

I need images to display right aligned on the screen, with the year left aligned and a line between them. As you can see my images are overlapping? I’d like a little space between them. I eliminated the above css (“.entry-content”, etc) for now just to simplify things.

Additionally I would really like to have the imagees’ description show up under the enlarged image when you click on it, and also have the carousel function with the thumbnails of other images below the enlarged one.

Any thoughts?

I suggest you get something like Visual Composer.
https://vc.wpbakery.com/?utm_campaign=VCplugin_header

It’s a lot easier especially if you dont know how to code

I have a followup question: Is there a way to expand just the top (header area) to expand 100% but keep the body at a certain width. For example, uncrate.com

Thank you

@james, I’ve worked on the page off and on, and while it is relatively easy to get the spacing on the images corrected, the hard part is getting the line to resize itself based on how many images are present as well as the width of the viewport. That is, you want the line to shrink when the page is viewed on a tablet or smart phone, or if you add additional images, and you can’t do that with the way you’ve hard-coded the line. Plus, it looks like you will have different years to display, and a general solution would be the best.

@Ioges, uncrate.com isn’t the site you are trying to change, is it? Can you provide a link to your site? Are you running the McKinley theme as well?

@CrounchingBruin, No https://thisfeatured.com/ is the site.. Yes to McKinley. I would like for the header (and the footer) to span the entire width but the menu be confined to the body width. Also, if you could, I would like to have a picture in the header that is clickable and goes back to the homepage as the header text does now.. I tried inserting a header picture but that did not work. Lastly, I would like to have a thin border around each post/column. Where is the code where I can mess with that? All of this is similar to Uncrate.com

Thank you for your help!

@crouchingbruin,

Thanks again for your efforts. I think I would be happy for now just to get the images spaced correctly and deal with the line or possibly some other design element instead later. How are you getting the images to have a space around them instead of overlapping?

@Ioges, try adding this CSS using a CSS plugin or JetPack:

#page {
   margin: 0;
   padding: 0;
   max-width: none;
}

@james, add this to your custom CSS as a starting point:

.entry-content img.alignright {
   margin-right: 0;
}

@crouchingbruin great thank you.

Any advice on the other two things?

Also, When i click on a category page, the sub-header is very big, how do I reduce that height?

Also on the menu, can you make the hover span the entire height?

@Ioges:

.navbar {
   padding: 0;
}

.nav-menu li a {
    line-height: 30px;
    font-size: 20px;
}

.archive-title {
    padding: 10px 0;
}

The first rule takes out the padding that was creating the spacing between the menu item and the border of the nav bar.

The second rule then adjusts the height of the nav bar based on the height of the menu items. I also added a font-size property, in case you wanted to adjust the text size of the menu items (they looked a little small). If you want to revert back to the original size, then just take that line out.

The third line sets the spacing for the category title (in this case, 10px above and below). Adjust the value as you would like.

You should learn to use a web debugging tool like Firebug or Chrome Developer Tools. It will help you see what CSS rules are in effect for a particular element, so you can write your own rules to override them.

You, sir, are a godsend. Thank you. I will mess with the Chrome Dev Tools!

I do also want to put a very thin border around all of the posts like on Uncrate. I can’t seem to find how to do that

.hentry {
    border: 1px solid #ddd;
    max-width: 900px;
    margin: 30px auto;
}

The last value for border is the color (#ddd is a light gray). The max-width property will set the width of the boxes, the first value for margin will adjust the spacing (top & bottom) between the boxes. Play around with the values until you get something you like.

Awesome! Thanks

I have been messing with it for a while, but what controls the menu bg color?

I also want to put the meta data at the bottom of the posts.

Also, I changed the size of the post headers but now on the mobile site, the text is way too large. How can I get it to reduce like the Header does on mobile?

Thanks for all your help!

what controls the menu bg color?

These two rules will control the nav menu background color as well as the background color of the menu item that’s being hovered over (the color values below are what’s currently in effect):

.navbar {
   background: #323232;
}

li:hover > a,
.nav-menu li a:hover {
   background-color: #444;
}

I also want to put the meta data at the bottom of the posts.

That can’t be done using CSS. You’ll have to create a child theme, then edit a copy of the content.php file to move the entry-meta down to where you want it. The specifics are a bit too much for me to post here, but if you look at the code, you should be able to figure it out.

How can I get it to reduce like the Header does on mobile?

You need to add a media query that changes the font size at the same breakpoint as the header:

@media (max-width: 643px) {
   .entry-title a {
      font-size: 20px;
   }
}

You have been a great deal of help! I was wondering if there was a sidebar that I can’t seem to get working on this theme. I see the footer widget area but I would like to have one on the right side.