WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] McKinley CSS Modifications (30 posts)

  1. JamesSeevers
    Member
    Posted 5 months ago #

    Hey folks,

    I'm a Visual Artist and Musician trying to build a portfolio site. I'm a novice trying to learn some CSS and HTML basics but I also need to get this thing done. I want to make some simple modifications to my site with CSS and after digging through the code for awhile unsuccessfully I thought I'd try my luck on a forum.

    Here's my site: JamesSeevers.com

    Can anyone suggest the CSS code to add in the CSS editor for the McKinley theme that will do the following:

    -Remove the date/time stamp of my "posts"
    -Remove the bottom gray footer completely ( the gray bar with "Customized McKinley theme" and "Blog at WordPress.com" on it)
    -Extend the grey header with name and pages listed all the way to the left and right of the site
    -Remove all the borders

    Basically just want a white blank page with the header and one central image. Thanks so much for any suggestions!

  2. YajYolid
    Member
    Posted 5 months ago #

    Hi JamesSeevers,

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

  3. JamesSeevers
    Member
    Posted 5 months ago #

    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.

  4. YajYolid
    Member
    Posted 5 months ago #

    #header {
    max-width: 100%;
    }

  5. JamesSeevers
    Member
    Posted 5 months ago #

    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!

  6. YajYolid
    Member
    Posted 5 months ago #

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

  7. CrouchingBruin
    Member
    Posted 5 months ago #

    Use this in your custom CSS instead:

    footer.entry-meta,
    #colophon {
       display: none;
    }
    #page {
       margin: 0;
       padding: 0;
       max-width: none;
    }
    body {
       padding: 0;
    }
  8. JamesSeevers
    Member
    Posted 5 months ago #

    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

  9. JamesSeevers
    Member
    Posted 5 months ago #

    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!!!!

  10. CrouchingBruin
    Member
    Posted 5 months ago #

    #jp-post-flair, #bit {
       display: none;
    }
  11. JamesSeevers
    Member
    Posted 5 months ago #

    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!

  12. JamesSeevers
    Member
    Posted 5 months ago #

    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

  13. CrouchingBruin
    Member
    Posted 5 months ago #

    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;
    }
  14. JamesSeevers
    Member
    Posted 5 months ago #

    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!

  15. JamesSeevers
    Member
    Posted 5 months ago #

    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

  16. CrouchingBruin
    Member
    Posted 5 months ago #

    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.

  17. JamesSeevers
    Member
    Posted 5 months ago #

    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?

  18. loges
    Member
    Posted 4 months ago #

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

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

  19. loges
    Member
    Posted 4 months ago #

    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

  20. CrouchingBruin
    Member
    Posted 4 months ago #

    @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?

  21. loges
    Member
    Posted 4 months ago #

    @CrounchingBruin, No http://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!

  22. JamesSeevers
    Member
    Posted 4 months ago #

    @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?

  23. CrouchingBruin
    Member
    Posted 4 months ago #

    @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;
    }
  24. loges
    Member
    Posted 4 months ago #

    @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?

  25. CrouchingBruin
    Member
    Posted 4 months ago #

    @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.

  26. loges
    Member
    Posted 4 months ago #

    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

  27. CrouchingBruin
    Member
    Posted 4 months ago #

    .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.

  28. loges
    Member
    Posted 4 months ago #

    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!

  29. CrouchingBruin
    Member
    Posted 4 months ago #

    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;
       }
    }
  30. loges
    Member
    Posted 4 months ago #

    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.

Reply

You must log in to post.

About this Topic