Header height

  • Author
    Posts
  • #876211

    I was talking about the whole blog width…

    Your description was confusing to me. In the future, could you please use specific examples including text (i.e. the date text such as “April 24, 2012 ” doesn’t look right when I hover over posts on the home page) or screenshots are good too.

    #876212

    For the issue where the date and comments number falling outside the edges of the images when you hovered over them, try removing your current rules for “.lay1 > div .imgwrap” and “.lay1 > div img” and ad this instead:

    .lay1 > div .imgwrap {
    	width: 80%;
    	display: block;
    	margin: 0 auto;
    }
    .lay1 > div img {
    	width:100%;
    }
    #876213

    About the featured image, that’s not what’s happening hehe… Actually you do can have a content image and a featured image (I did that on several other posts)…

    You’re right. I think the duplicate is from an excerpt in this case.

    Open this link:
    https://danielkons1.wordpress.com/wp-admin/post.php?post=1092&action=edit

    Find the Excerpt box.

    Remove this code:
    <img src="http://danielkons1.files.wordpress.com/2012/04/upad-25-10_2011.jpg" alt="uPad 25" class="size-full wp-image-1091" />

    Save the post.

    Does that fix it?

    #876214

    danielconz
    Member

    Ok, sorry… forget that…
    http://danielkons1.files.wordpress.com/2012/05/untitled-1.jpg
    I’d want to decrease the width of the area between the red marks (i.e. the posts area, the container area).
    I can’t explain better…
    Thanks.

    #876215

    danielconz
    Member

    About the duplicated image, I can’t find this specific code…
    I’ve already tried taking out some parts of the code but didn’t work…

    Take a look what’s appearing, please:
    <p style=”text-align:center;”><img class=” wp-image-1091 aligncenter” src=”http://danielkons1.files.wordpress.com/2012/04/upad-25-10_2011.jpg” alt=”uPad 25″ width=”480″ height=”640″ /></p>

    #876216

    The duplicate image is definitely in the Excerpt area. Note that it’s a separate box and the boxes are configurable, so you need to look around on the edit page to find it. You can also hide some of the boxes. To check that, open the post for editing, click the “Screen Options” tab at the top right, and make sure “Excerpt” is checked:
    https://danielkons1.wordpress.com/wp-admin/post.php?post=1092&action=edit

    You can see what the Excerpts box looks like on this help page:
    http://en.support.wordpress.com/splitting-content/excerpts/#creating-excerpts

    #876217

    danielconz
    Member

    I took out the whole code and, despite the image is gone in the post, there’s still 2 images at the home page hehe

    #876218

    You took the post content out of the editor, but you should leave that and remove the content of the Excerpt box. It looks like this in your post right now:
    http://cl.ly/GTii/o

    #876219

    http://danielkons1.files.wordpress.com/2012/05/untitled-1.jpg
    I’d want to decrease the width of the area between the red marks (i.e. the posts area, the container area).

    Aha, now I see what you’re talking about!

    That’s a little more tricky. To adjust the container width for the post list on the home page of Triton Lite, you will probably also have to adjust the width for “.lay1 > div” since you added custom CSS for that before and it would be too wide. Try updating to this:

    .lay1 {
    	width: 760px;
    }
    .lay1 > div {
    	width: 360px;
    }
    #876220

    danielconz
    Member

    Oh, ok! How I’m dumb!
    It worked now, tahnk you very much!

    #876221

    Not at all! Sometimes it just takes a while to get on the same page. :) And.. as they say, a picture is worth a thousand words.

    #876222

    danielconz
    Member

    :]
    Almost there I guess!
    It got descentralized now hehehe…
    Is it possible to fix that or the theme doesn’t allow?

    #876223

    Yep, try this:

    .lay1 {
    	width: 640px;
    	float: none;
    	margin: 0 auto;
    }

    Note that I changed the width for “.lay1” to be smaller because you had changed the width of “.lay1 > div” to be 300px instead of 360px in my last example. When you change the width of one thing, it affects the other. After that, the float and margin properties will center the main column.

    #876224

    danielconz
    Member

    Got it…
    But when I put the exact half width, the page gets just 1 post per line…
    It return to 2 posts per line just with “.lay1” with width: 700px and “.lay1 > div” with width: 300px…

    But with this configuration the page stays descentralized…

    #876225

    danielconz
    Member

    Hello, I managed to fix the centering issue with this:
    .lay1 {
    width:800px;
    float:none;
    margin-left:165px;
    }

    But when I select a category the posts get wrong:
    http://danielkons1.wordpress.com/category/caricature/

    Can you help me again hehe?

    #876226

    danielconz
    Member

    Also, the width of the posts pages didn’t change… Is it possible to do that?
    http://danielkons1.wordpress.com/2012/04/24/upad-25/

    Thanks.

    #876227

    But when I put the exact half width, the page gets just 1 post per line…

    That’s probably because there is also padding or margins on some of the elements. Those things affect the overall width.

    Using margin-left to adjust the centering works but only if you always keep the exact same width. I usually set the margin value to “0 auto” and then adjust the container width to be just wide enough to fit the elements inside including all the margins and padding. You may just need to experiment with the widths until you get them looking how you want.

    #876228

    I didn’t think to look at the category pages before. I checked and they have a slightly different HTML structure, and so the CSS I used before for the home page didn’t work on category pages. I didn’t expect that. Also, individual posts have their width set in Triton Lite using several completely different selectors. Let’s start again.

    Try replacing all of the CSS you currently have with this:

    #header-image {
        background:url('http://danielkons1.files.wordpress.com/2012/04/header-transparente21.png') repeat-x;
    	height:130px;
    }
    .lay1 {
        width: 660px;
    }
    .container,
    #logo,
    .one-column #posts,
    .page-template-page-no-sidebar-php #posts,
    .attachment #posts,
    .one-column .single-page-post .post-wrap,
    .page-template-page-no-sidebar-php .post-wrap,
    .attachment .post-wrap,
    .one-column #posts .post-content,
    .page-template-page-no-sidebar-php #posts .post-content,
    .attachment #posts .post-content,
    #slider-wrapper {
        width: 630px;
    }
    #footer .container {
        width: 960px;
    }

    I didn’t check all types of pages, but I checked the home page, a category page, a post, and a page.

    To find which selectors to update, I looked at the original Triton Lite stylesheet and searched for everything which had a width of 990px or 960px, and then I made a new rule to set all of those things to a width of 630px instead (except the footer container which should still be wide).

    You may still find areas that don’t have the right width, but I think this should cover most of them. Also, note that galleries have a whole completely separate set of widths in Triton Lite. If you decide to use galleries, you may need to add additional CSS rules to replace the gallery-related ones in the “=Images” section in the original Triton Lite stylesheet.

    #876229

    danielconz
    Member

    Wow, you’re awesome! That should have been hard to find out hehe…
    I feel a bit awkward to keep asking you things, but I was wondering if the posts width could be not so narrow as the home page and categories… I guess now it decreases too much, it would be better something just a bit smaller, like 900px…
    Forget that if I’m being too annoying, the blog is already great!
    Thanks!

    #876230

    The post width is currently set to 630px using this rule in your Appearance → Custom Design → CSS page:

    .container,
    #logo,
    .one-column #posts,
    .page-template-page-no-sidebar-php #posts,
    .attachment #posts,
    .one-column .single-page-post .post-wrap,
    .page-template-page-no-sidebar-php .post-wrap,
    .attachment .post-wrap,
    .one-column #posts .post-content,
    .page-template-page-no-sidebar-php #posts .post-content,
    .attachment #posts .post-content,
    #slider-wrapper {
        width: 630px;
    }

    The trouble with making the width smaller for that whole block is that the content for the home page and archive pages wouldn’t fit without adjusting the margins between the images too, and making those margins smaller probably wouldn’t look good either. So, what I think you would want to do would be to adjust the width for posts and pages from 630px to 540px but leave the rest. Here is a start, but note that you will need to check various types of pages yourself to make sure the widths all work and still look okay.

    Try replacing the block shown above with this one instead:

    .container,
    .one-column #posts,
    .page-template-page-no-sidebar-php #posts,
    .attachment #posts,
    .one-column .single-page-post .post-wrap,
    .page-template-page-no-sidebar-php .post-wrap,
    .attachment .post-wrap,
    .one-column #posts .post-content,
    .page-template-page-no-sidebar-php #posts .post-content,
    .attachment #posts .post-content {
    	width:540px;
    }
    
    .home .container,
    .archive .container,
    #logo,
    #slider-wrapper {
    	width: 630px;
    }

    If you want to experiment changing more of those widths, may I recommend trying out Firebug for Firefox? It will allow you to make adjustments to the CSS temporarily to test out different things right in the browser.

The topic ‘Header height’ is closed to new replies.