WordPress.org

Ready to get started?Download WordPress

Forums

Path
[resolved] Logo size issues (still) and image issues (19 posts)

  1. rascar
    Member
    Posted 1 year 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 660x300 and 640x300. Probably one of these was a typo. However, the actual image displayed when using the theme is exactly 614x279. 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 30x20, 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 (30x20) but the actual flag gets to be 20x13.

    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!

  2. Sami Keijonen
    WordPress-asiantuntija
    Theme Author

    Posted 1 year 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.

  3. rascar
    Member
    Posted 1 year 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 30x20) but turns out 20x13 - while the frame is 30x20.

    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 (30x20):
    http://volvop1800club.se/00WP/wp-content/uploads/2013/02/british-flag-icon.jpg

  4. Sami Keijonen
    WordPress-asiantuntija
    Theme Author

    Posted 1 year 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;
    }
  5. rascar
    Member
    Posted 1 year 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)

  6. Sami Keijonen
    WordPress-asiantuntija
    Theme Author

    Posted 1 year ago #

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

  7. rascar
    Member
    Posted 1 year ago #

    Really appreciate this swift guidance Sami.

    All solved.

  8. rascar
    Member
    Posted 1 year ago #

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

  9. Sami Keijonen
    WordPress-asiantuntija
    Theme Author

    Posted 1 year ago #

    If you use

    img.flag {
        padding: 0;
    }

    you should add word flag in there.

  10. rascar
    Member
    Posted 1 year 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.

  11. Sami Keijonen
    WordPress-asiantuntija
    Theme Author

    Posted 1 year ago #

    That's weird. It works for me.

  12. rascar
    Member
    Posted 1 year 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;
    }
  13. Sami Keijonen
    WordPress-asiantuntija
    Theme Author

    Posted 1 year ago #

    There is still no flag in the image class.

  14. rascar
    Member
    Posted 1 year 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 30x20, this goes for Chrome, Safari & IE. Same post as before, THIS ONE.

  15. Sami Keijonen
    WordPress-asiantuntija
    Theme Author

    Posted 1 year ago #

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

  16. rascar
    Member
    Posted 1 year 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.

  17. Sami Keijonen
    WordPress-asiantuntija
    Theme Author

    Posted 1 year ago #

    I still think it's some kind of caching problem if you're absolutely sure you have flag class in CSS Class Field.

  18. rascar
    Member
    Posted 1 year ago #

    Ok, me = [Moderator disagrees]. There are two fields called CSS Class under Advanced Settings. Below is a link that shows my error, it's the advanced settings tab (sry in Swedish but you get the idea). Another class is entered in the correct field "alignleft wp-image-246", I have no idea where that came from.

    Thanks Sami for your patience and prompt responses. Now I just have to convince the old men at the club that this is the way to go, then we'll join that hybrid group :-)

    http://volvop1800club.se/00WP/tempImage/stupid_mistake_great_theme_support.jpg

  19. rascar
    Member
    Posted 1 year ago #

    BTW, when I'm done I'd be happy to send you the Swedish translation if you're interested. //

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic