Logo size issues (still) and image issues

  • Resolved rascar

    (@rascar)


    11 years, 1 month ago

    Hi all,

    Really love this theme thanks for doing it!

    I’ve read THIS thread and THIS thread but still confused. I want a slighter larger logo (not much).

    If I use this code

    #branding img {
	width: 510px;
	height: 170px;
}

    Image gets distorted as has been reported. Then if I add something like this

    #site-title {
    width: 100%;
}

    …I can get the image at its full size. But now it seems the Tagline (regardless if it exists or not) creates unwanted extra vertical space between the logo and menu row. Something like that it is introducing a linebreak (note: amateur observation).

    1) Is there a remedy for this? Ie moving or removing the tagline (which I very well could add to the PNG image), but without adding the extra space between the logo area and menu row. Or is it not even related with the tagline?

    2) For the slider it is reported in this forum that the size should be set at 660×300 and 640×300. Probably one of these was a typo. However, the actual image displayed when using the theme is exactly 614×279. So it means some kind of size reduction takes place. I took a screenshot and checked in Photoshop. Is it supposed to be like this?, I like to create images exactly in the size they’re shown.

    Another (related?) issue seem to happen when e.g. using a small icon image which you want to insert in the text. Such as an English flag to link to English content. I have a flag 30×20, but when inserted in a post choosing “Full/Original Size” it gets reduced in size. A frame is added around that have the original size (30×20) but the actual flag gets to be 20×13.

    Here’s the prototype site, I am doing a proposal for updating an ancient site for a car club and this theme is by far the favorite:
    http://volvop1800club.se/00WP/

    I am using a child theme, thanks for providing that too!

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • Theme Author Sami Keijonen

    (@samikeijonen)

    11 years, 1 month ago

    It would have been better if you asked different questions in different topics. That way questions and answers are easier to find.

    1. Do as you have already done with width 100%. You also might want to hide site description

    #site-description {
    display: none;
}

    2. Slider image is 660 x 300 but the math is not simple because slider image needs to look good for whatever layout user choose (1, 2 or 3 columns).

    Calculations

    In body tag font size is 1em meaning the browser default, usually 16px. If I only talk about ‘desktop’ size, Slider container width is 60em for two column layout and 64em for three column layout. Slider image take 64% out of that, so image width is

    60 * 16px * 0.64 = 614.4px (this is shown in demo)

    or

    64 * 16px * 0.64 = 655.36px

    Naturally I had to take bigger width, if user uses three column layout and rounded it up to 660px to be extra safe.

    3. Link to your page where you have this situation. There must be too much padding in the image.

    Thread Starter rascar

    (@rascar)

    11 years, 1 month ago

    Kiitos Sami for prompt response.

    1) Solved, thanks!

    2) Aha, that explains it. No worries, reductions are done good. Solved.

    3) Just posted a post that shows it. Image is added to the post “Full size” (which is 30×20) but turns out 20×13 – while the frame is 30×20.

    Here’s the link to the post:
    http://volvop1800club.se/00WP/2013/03/something-happens-with-the-flag/
    Here’s the link to the original image (30×20):
    http://volvop1800club.se/00WP/wp-content/uploads/2013/02/british-flag-icon.jpg

    Theme Author Sami Keijonen

    (@samikeijonen)

    11 years, 1 month ago

    All images have 4px padding. You might want to add some class to images where you don’t want padding. Like this in child theme style.css.

    img.flag {
    padding: 0;
}

    This works for all images with class flag.

    Or remove padding for all images.

    img {
    padding: 0;
}
    Thread Starter rascar

    (@rascar)

    11 years, 1 month ago

    I am no coder I’m afraid. But if I add those lines (first set) in style.css, how can I add that property to a specific image?

    (Elsewhere the framing is fine, I think)

    Theme Author Sami Keijonen

    (@samikeijonen)

    11 years, 1 month ago

    You can add class to image when you edit post. Click Edit image >> Advanced settings and there is CSS Class text field.

    Thread Starter rascar

    (@rascar)

    11 years, 1 month ago

    Really appreciate this swift guidance Sami.

    All solved.

    Thread Starter rascar

    (@rascar)

    11 years, 1 month ago

    Oops. Exactly what am I supposed to write in that one-row CSS field under Edit Image >> Advanced Settings?

    Theme Author Sami Keijonen

    (@samikeijonen)

    11 years, 1 month ago

    If you use

    img.flag {
    padding: 0;
}

    you should add word flag in there.

    Thread Starter rascar

    (@rascar)

    11 years, 1 month ago

    Something is weird here. If I write “flag” in the CSS Class field and click “update” (under Advanced Settings), window is closed. But then when I open it again nothing has been saved (ie the word “flag” is gone). So image is still reduced in size and frame still there.

    The exact text:

    img.flag {
    padding: 0;
}

    ..has been entered and saved i Style.css.

    Theme Author Sami Keijonen

    (@samikeijonen)

    11 years, 1 month ago

    That’s weird. It works for me.

    Thread Starter rascar

    (@rascar)

    11 years, 1 month ago

    That’s strange. I’ve tried with two other browsers now to omit the possibility of cache issues. I now see that “flag” is kept in the original post I linked to, this post. Do you see the flags not-reduced there? I dont, they look like before.

    Or (warning: amateur guess) could it be that something should be added before these rows?:

    img.flag {
    padding: 0;
}

    For reference, this is now how my full style.css looks in the child theme (incl. the solved issues above) – below your @import url( ‘../path/style.css’ );

    #branding img {
	width: 420px;
	height: 140px;
}

#site-title {
    width: 100%;
}

#site-description {
    display: none;
}

img.flag {
    padding: 0;
}
    Theme Author Sami Keijonen

    (@samikeijonen)

    11 years, 1 month ago

    There is still no flag in the image class.

    Thread Starter rascar

    (@rascar)

    11 years, 1 month ago

    Really strange. The image has the word “flag” in the CSS Class Field under Advanced Settings. Code exactly as my previous post here.

    For me the actual image gets reduced, whereas the (unwanted) frame surrounding it gets the image size 30×20, this goes for Chrome, Safari & IE. Same post as before, THIS ONE.

    Theme Author Sami Keijonen

    (@samikeijonen)

    11 years, 1 month ago

    That image have classes alignleft wp-image-246. Do you have some caching plugin installed?

    Thread Starter rascar

    (@rascar)

    11 years, 1 month ago

    I have the default W3 Total Cache, but I empty it all the time when changing something. When it comes to images I have one widget to be able to post images in the right column simply called Image Widget and I also have a lightbox plugin called Lightbox Plus ColorBox.

Viewing 15 replies - 1 through 15 (of 18 total)
1 2
  • The topic ‘Logo size issues (still) and image issues’ is closed to new replies.