WordPress.org

Ready to get started?Download WordPress

Forums

Lots of little issues - content margins, line spacing, sidebar for blog only (24 posts)

  1. broomhandle
    Member
    Posted 6 months ago #

    I've got a site here: http://peterchamberlaincann.wordpress.com that I've copied over to here: http://www.peterchamberlaincann.co.uk and there's lots of changes I want to make. I've used Firebug to identify a lot of them, but there's still some I don't know how to fix.

    I'm using Minimalizine and all my edits are in a child theme.

    -Increasing the line spacing between images on the Portfolio page

    -Change all the galleries so when an image is clicked, it loads on the same page with the background darkened out (not sure what the name of that is called, but it's the way it's set up on my .com site)

    -Edit the footer text to "2013-2014" and make it so there is less of a gap above and below the text - not the 3.6em margin but the paragraph margins. I used

    p {
        margin-bottom: 5px;
        margin-top: 5px;
    }

    which worked, but obviously that affects every paragraph, not just the footer.

    -Add some social network link buttons to the footer.

    -In the Leave a Reply box, the two "Notify me" sentences are positioned in the wrong place, separate from the checkboxes, but I'm not sure where they're meant to go. http://www.peterchamberlaincann.co.uk/blog/pendulum-rig/

    -On the Portfolio page and in the WP dashboard when I'm editing a post, the text and images are stuck to the old 520px "margins". In Safari, it displays Portfolio correctly (http://s3.postimg.org/y9z3bcxqr/wp1.png) but not in Firefox (http://s3.postimg.org/mjl5tz4yb/wp2.png) or IE. This is how it looks in the dashboard (http://s3.postimg.org/bmju57i6r/wp3.png).

    -I want to keep the left sidebar for the Blog so it can display the post information etc. so how can I do this, do I need to set up a child for the child or what?

    Then once I've done all that, I need to fix it so it displays properly on mobiles/tablets, I guess because I extended the main column from 520px to 720px, it's thrown the readability stuff off.

  2. stephencottontail
    Member
    Posted 6 months ago #

    -Increasing the line spacing between images on the Portfolio page

    Something like .entry-content.wide img { margin-bottom: 10px; } should do the trick.

    -Change all the galleries so when an image is clicked, it loads on the same page with the background darkened out (not sure what the name of that is called, but it's the way it's set up on my .com site)

    This was probably done via a lightbox plugin, though I'm not sure which one exactly. Try a plugin search for "lightbox" and see if any of them look right.

    -Edit the footer text to "2013-2014" and make it so there is less of a gap above and below the text - not the 3.6em margin but the paragraph margins.

    Try being a bit more specific with your CSS. Something like #colophon p { margin-top: 5px; margin-top: 5px; } would only target any <p> tags within the footer.

    -Add some social network link buttons to the footer.

    These would be pretty easy to add with a list, optionally styled with display: inline-block;. Look around for some social media icon sets; I like Genericons.

  3. broomhandle
    Member
    Posted 6 months ago #

    Thanks, I'll try those in a bit.

    I am not sure how to fix the footer text. While the WordPress etc. text that went on the right was in the footer.php for me to delete, in here:

    <div class="credits">
    
    		</div><!-- end .credits -->

    the text on the left is just this:

    <div class="site-info">
    			<?php do_action( 'minimalizine_footer' ); ?>
    		</div><!-- .site-info -->
  4. broomhandle
    Member
    Posted 6 months ago #

    The line spacing for images worked great!

    For the footer, it has worked, but there's still a gap underneath the text. And I just realised why, you wrote "margin-top" twice. :P

  5. broomhandle
    Member
    Posted 6 months ago #

    Is it possible to set

    .entry-content.wide img { margin-bottom: 10px; }

    for just images that are within a paragraph? So that it excludes images that end a paragraph?

  6. broomhandle
    Member
    Posted 6 months ago #

    Ty for the lightbox tip, I've used Simple Lightbox, it looks a lot better than before.

    Does a lightbox plugin override all the attachment page links etc? I don't need to worry about changing the image hyperlinks or anything?

  7. broomhandle
    Member
    Posted 6 months ago #

    I really like Genericons. I'd like to put four of them along the right hand of the footer, like they are on your link, as rollovers that change to blue when you hover over them.

    Not sure how to do it though, I tried installing the Genericon'd plugin, but that seems to just do still images.

  8. stephencottontail
    Member
    Posted 6 months ago #

    The neat thing about Genericons is that you can style them any way you want with CSS and they still look good. Try something like:

    .genericon {
        font-size: 16px;
    }
    
    .genericon:hover {
        color: blue;
    };

    Obviously, substitute whatever values you'd like to use.

  9. broomhandle
    Member
    Posted 6 months ago #

    I have Genericon'd installed, and put this in the footer:

    <div class="credits">
    
    <div class="genericon genericon-facebook"></div>
    <div class="genericon genericon-twitter"></div>
    <div class="genericon genericon-youtube"></div>
    <div class="genericon genericon-vimeo"></div>
    
    		</div><!-- end .credits -->

    It's put the icons there, but your css hasn't done anything. I put it in the Minamalizine child style.css.

  10. stephencottontail
    Member
    Posted 6 months ago #

    I can see the hover effect, but the reason the font sizing isn't working is because the Genericons plugin has its own CSS file which is getting loaded after your main style.css, so any styles defined in the plugin's CSS files "win", so to speak. A dirty fix would be to use !important like this:

    .genericon {
        font-size: 20px !important;
        font-style: normal;
        font-weight: normal;
        height: 20px;
    	width: 20px !important;
        line-height: 1em;
    }

    But a better solution would be to make sure your main style.css gets loaded after any plugins. I'm not 100% sure how to do that, but I am researching it.

  11. broomhandle
    Member
    Posted 6 months ago #

    Thanks. This was the CSS I wanted to put in to override the Genericons style.css:

    .genericon {
        font-size: 20px;
        font-style: normal;
        font-weight: normal;
        height: 20px;
        width: 25px;
        line-height: 1em;
        margin-top: 7px;
        margin-bottom: 5px;
    }

    I'll try and merge that with yours.

    Are the links set up right? I just stuck some html into the footer.

    How can I get rid of the underline on the buttons when hovered? I want to keep it for text, but not those buttons. I also want to get rid of the hyperlink on my name on the left of the footer.

  12. broomhandle
    Member
    Posted 6 months ago #

    It turns out the buttons only get underlined in Firefox (probably IE as well) but not in Safari.

  13. broomhandle
    Member
    Posted 6 months ago #

    I don't know what's going on with the footer, I've set up the CSS like this cos I followed a guide that was about a similar problem.

    <footer id="colophon" class="site-footer">
    		<?php do_action( 'minimalizine_footer' ); ?>
    	<?php echo '© 2013-' . date("Y") . ' ' . get_bloginfo('name'); ?>
    		</div><!-- .site-info -->

    But it puts minimalizine_footer above the text that I want. It seems to be some kind of automated footer that you can't edit at all?

    It's also pushed all of the site credits (aka the Genericons) down onto a new line!

    When I get rid of that do_action line, it gets rid of the formatting top and bottom margins I had set up.

    ---

    Ah, now I've deleted the do-action line, and added p tags to php echo, it's given it the formatting I want. But the Genericons are still in the wrong place.

  14. stephencottontail
    Member
    Posted 6 months ago #

    Can you post your full footer.php somewhere like pastebin and link it here?

  15. broomhandle
    Member
    Posted 6 months ago #

    Here is the child footer: http://pastebin.com/vyFK2EuY

    And just in case, this is the parent footer: http://pastebin.com/t5gPBjWC

    I'm away for the week so I'll be back on Monday!

  16. stephencottontail
    Member
    Posted 6 months ago #

    Okay, check out this pastebin: http://pastebin.com/6ZJj8dWL

    Here's what I did. I deleted an extraneous </div> , so the credits and the copyright text should appear within the footer. In style.css, I floated both the copyright text and the credits section so they would appear on the same line. If you don't like the way they line up, go ahead and add margin-top and/or margin-bottom to the .credits section until it looks right.

  17. broomhandle
    Member
    Posted 5 months ago #

    I am back now, I shall try that thanks.

  18. broomhandle
    Member
    Posted 5 months ago #

    Ok, the footer code moved the icons into the footer, not quite where I want but think I could sort that.

    But the style code moved them out again, they're now on the opposite of before, on the far right! http://www.peterchamberlaincann.co.uk/

  19. stephencottontail
    Member
    Posted 5 months ago #

    When I look at your site's source code, I still see the extraneous </div> in your footer. Check out this pastebin that you posted earlier. Delete line 12 from your footer.php, leave your stylesheet the same, and everything should be good to go.

  20. broomhandle
    Member
    Posted 5 months ago #

    Ok yes, to an extent, it's sorted :D The spacing is off, but I should be able to fix that.

    Still getting the underlines when hovered in Firefox :S

  21. broomhandle
    Member
    Posted 5 months ago #

    It looks like the copyright text paragraph has had it's margins changed to fill the whole column, thereby pushing the icons onto the next line.

  22. stephencottontail
    Member
    Posted 5 months ago #

    That's right, I forgot about that. My fault. Since I floated the credits section to the right, you should float the copyright text to the left by adding float: left; to your #colophon p {} section in your stylesheet.

  23. broomhandle
    Member
    Posted 5 months ago #

    Perfect, it looks about right now, thanks :D Apart from the link underlines :P

  24. broomhandle
    Member
    Posted 5 months ago #

    Still looking for fixes for these:

    -The text and images are stuck to the old 520px "margins" on the Portfolio page, and in WP dashboard when I'm editing a post. It displays Portfolio correctly in Safari (http://s3.postimg.org/y9z3bcxqr/wp1.png) but not in Firefox (http://s3.postimg.org/mjl5tz4yb/wp2.png) or Internet Explorer. This is how it looks in the dashboard (http://s3.postimg.org/bmju57i6r/wp3.png).

    -I want to put the sidebar back in, but only on the Blog and all the pages related to that.

    -In the Leave a Reply box, the two "Notify me" sentences are positioned in the wrong place, separate from the checkboxes, but I'm not sure where they're meant to go. http://www.peterchamberlaincann.co.uk/blog/pendulum-rig/

    -I think because I extended the main column from 520px to 720px, it doesn't display correctly on my phone or tablets.

    -Remove the underline that appears on the footer buttons when hovered over.

Reply

You must log in to post.

About this Topic