Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #268597

    Continuing my (now solved) question regarding image borders http://www.kriesi.at/support/topic/content-image-border/

    After fixing everything, the captions underneath the images are very off, no matter what you put in the margins.
    Example: http://www.polvetra.ru/news/3586/
    Look on the pictures on the right.
    Captions are off by 10px everywhere (aparently, the size of margin in CSS?), and on the images, which are aligned to the right, the text goes underneath the image. And the hover image is also off.

    Is there a way to fix all this?

    #268599

    Quick CSS now in place, so you won’t have to search:

    body {font-size: 14px;}
    .content img {
        border: 5px solid !important; border-color: #FFFFFF !important; boder-radius: 3px !important; left: -10px !important; top: -10px !important;
    margin: 10px;
        -webkit-box-shadow: 0px 0px 3px #B8B8B8 !important;  /* Saf3-4, iOS4, Android2.3+ */
        -moz-box-shadow: 0px 0px 3px #888888 !important;  /* Firefox 3.5-3.6 */
        box-shadow: 0px 0px 3px #888888 !important;  /* Opera 10.5, IE9, FF4+, Chrome6+, iOS5 */
        }
    span.iconbox_top_icon > img { 
    border: none!important; 
    margin: 0!important; 
    box-shadow: none!important; 
    }
    #268654

    And while at it:
    Same problem, as described previously: http://www.kriesi.at/support/topic/content-image-border/
    goes for partner logo’s: now with border: http://www.polvetra.ru/ (look below)
    How to remove it there also?

    .partner_list > img { 
    border: none!important; 
    margin: 0!important; 
    box-shadow: none!important; 
    }

    didn’t help. :(

    • This reply was modified 7 months ago by  ncux.
    #268791

    Hi!

    Try changing the code to:

    .content img[class*='wp-image'] {
    border: 5px solid !important;
    border-color: #FFFFFF !important;
    boder-radius: 3px !important;
    left: 4px !important;
    top: 0px !important;
    margin: 10px;
    -webkit-box-shadow: 0px 0px 3px #B8B8B8 !important;
    -moz-box-shadow: 0px 0px 3px #888888 !important;
    box-shadow: 0px 0px 3px #888888 !important;
    position: relative;
    }

    Cheers!
    Josue

    #269086

    Dear Josue,

    This did solve the partner list problem, thanx!
    But it has worsened the captions problem:

    with original code it looks like this:

    https://dl.dropboxusercontent.com/u/24300209/2014-05-23%2012.17.28%20pm.png

    with your code the images are off on the text, captions are also off:

    https://dl.dropboxusercontent.com/u/24300209/2014-05-23%2012.18.04%20pm.png

    I returned the code to the 1st state, as it leaves text readable.
    Any other additions to CSS to make it really work?

    #269414

    Hi!

    Thank you for the update.

    Please add this cs snippets to fix the image and caption alignment:

    .wp-caption a {
    left: 0 !important;
    padding: 0 10px;
    }
    
    #top .wp-caption img {
    margin: 0 0 0 -10px !important;
    }

    Regards,
    Ismael

    #269826

    Ismael, thanx, this did return captions to normal, but now somehow the margins on right-aligned images are off, because text is put snug right into the image: http://www.polvetra.ru/news/3586/
    And if you look on the front page, there are ‘recent posts’ on the right, their thumbnails are also off :)

    Sorry to bother you for all this, but there’s no frame shortcode or style with Choices, so I had to improvise with image frames sitewide. :(
    Thanx again!

    #269936

    Hi!

    You can add this to fix the left margin of the image:

    div .wp-caption {
    margin: 5px 15px 10px 15px;
    }

    Try to add this at the very bottom of Quick CSS to fix the latest widget thumbnails:

    #top .news-thumb img {
    border: 3px solid #ffffff !important;
    top: -3px ! important;
    left: -3px !important;
    position: relative;
    }

    Best regards,
    Ismael

    #270060

    Thanx, this did the trick!

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘wp-caption with altered image borders’ is closed to new replies.