Tagged: ,

Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • December 14, 2015 at 9:01 am #552023
    MarikaZoll

    Hi,
    I managed to place a border around images by using
    .avia-image-container img {
    border: 4px solid #d8a1ac;
    padding: 10px;
    }

    But how can I get a border around medial element “video”? Can’t find anything that works.

    Thanks!

    December 14, 2015 at 2:33 pm #552277
    Yigit

    Hi MarikaZoll!

    Please add following code to Quick CSS as well

    .avia-video {
    border: 4px solid #d8a1ac;
}

    Best regards,
    Yigit

    December 19, 2015 at 12:20 am #555264
    MarikaZoll

    Thanks Yigit. Still missing the border on 3 page types see below url examples. I hope you can help!
    Rgds!

    December 20, 2015 at 6:41 am #555548
    Rikard

    Hi,

    I think you forgot to post the URLs?

    Regards,
    Rikard

    December 20, 2015 at 8:44 pm #555650
    MarikaZoll

    Sorry, the 3 examples included below B Regards!

    December 23, 2015 at 8:36 pm #557202
    MarikaZoll

    Hi, before the holiday, any chance to help with these 3 links to make the borders unified?
    Thanks!!

    December 27, 2015 at 7:24 am #557561
    Rikard

    Hi,

    I couldn’t find any videos on your news page? On this page (private), could you try adding the video with the video element to see if that works better?

    Cheers!
    Rikard

    December 29, 2015 at 6:58 am #558014
    MarikaZoll

    Sorry I wasn’t clear.
    I got help getting borders around some images or video-images but 3 places are not having the needed borders.
    I have listed these 3 places in the private area below. I hope you can help with the needed css code to finally get these areas having borders as well.
    Thanks!

    January 3, 2016 at 2:57 am #558907
    Elliott

    Hey!

    Add this to your custom CSS.

    article a img, iframe { border: 3px solid; }

    Regards,
    Elliott

    January 6, 2016 at 9:11 am #560361
    MarikaZoll

    Almost there, see my comments in the private box. Hope you can help.
    Thanks!

    January 7, 2016 at 1:38 am #560875
    Josue

    Hey!

    Try this:

    img[class*='align'],
#top div .avia-gallery img,
.mfp-figure img {
    border: 3px solid blue;
}

#top div .avia-gallery img{
    padding: 0;
}

#top .mfp-figure img {
    padding: 0;
}

#top .mfp-bottom-bar {
    margin-top: 0;
}

#top .avia-popup .mfp-close {
    top: -35px;
}

    Modify the first code as needed.

    Regards,
    Josue

    January 7, 2016 at 2:16 am #560895
    MarikaZoll

    Can you help me with what to adjust in the CSS code. The code in the private box is all CSS code I currently have added. I think there is some conflicting code since I doesn’t seem to help.
    Thanks!

    January 7, 2016 at 2:23 am #560898
    Josue

    Try replacing that (all) with this:

    #top img[class*='align'],
#top div .avia-gallery img,
#top .mfp-figure img,
#top article a img, 
#top iframe,
#top .avia-video,
#top .avia-image-container img{
	border: 4px solid #d8a1ac;
}

#top .avia-image-container img {
	padding: 10px;
}

#top div .avia-gallery img{
	padding: 0;
}

#top .mfp-figure img {
	padding: 0;
}

#top .mfp-bottom-bar {
	margin-top: 0;
}

#top .avia-popup .mfp-close {
	top: -35px;
}

    If you want to change the border globally you’d just update this line:

    border: 4px solid #d8a1ac;

    Please make sure you don’t copy these codes from the email notification but from the actual forum reply.

    January 7, 2016 at 3:53 am #560950
    MarikaZoll

    Great! The only left now I believe, is the larger pictures on the page in the private box the rest is now working great!

    January 7, 2016 at 2:59 pm #561266
    Josue

    Hi!

    Try with this:

    .avia-slideshow li img {
    border: 3px solid #d8a1ac;
}

    Regards,
    Josue

    January 8, 2016 at 1:17 am #561699
    MarikaZoll

    Hm, no difference. Do you get the large pictures (3 of them) to have the same border as the thumbs? For me, they still are thin.
    Thx!!

    January 8, 2016 at 2:42 am #561743
    Josue

    Hey!

    The three images are actually one image, it’s not possible to modify the actual image with CSS so you’d need to split them and upload them separately (or edit the image and add the borders manually).

    Cheers!
    Josue

    January 8, 2016 at 2:52 am #561749
    MarikaZoll

    Thanks,
    Not sure we are talking about the same thing.
    Here is the image for the 3 images with the thin border: https://www.20vikings.com/the3borders.PNG
    The 3 images with thin border

    Hope you can get these image borders to get thicker!!

    January 8, 2016 at 10:57 am #561878
    Josue

    Ok, try adding this:

    #top div .avia-gallery .avia-gallery-big {
    border-width: 3px;
    padding: 0;
}

    Regards,
    Josue

    January 12, 2016 at 3:23 am #563641
    MarikaZoll

    Thanks! It worked, can you tell me also how I can justify all posts in a css command instead of writing
    <div style=”text-align: justify;”>
    </div>
    in every post!

    Thanks!!

    January 12, 2016 at 11:46 pm #564223
    Josue

    Hm, try with this:

    article p{
text-align: justify;
}

    Regards,
    Josue

    January 20, 2016 at 9:11 pm #568876
    MarikaZoll

    Sorry for late reply, just wanted to thank you, such great support!

    January 20, 2016 at 10:43 pm #568913
    Josue

    You are welcome, glad to help :)

    Regards,
    Josue

  • Author
    Posts
Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Border around media element "video"’ is closed to new replies.