Tagged: 

Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • February 4, 2014 at 1:10 pm #219319
    simonac

    Hi,

    how can i add a boarder to images which i embedded with the “Image” Tab – in the Avia Layout Builder?

    Thanks!

    February 4, 2014 at 3:06 pm #219386
    Ismael

    Hi simonac!

    You can add this on Quick CSS:

    .avia-image-container img {
border: 1px solid gray;
padding: 5px;
}

    Regards,
    Ismael

    February 4, 2014 at 3:22 pm #219398
    simonac

    Perfekt!

    How can i make a custom color?

    Thanks Ismael!

    February 4, 2014 at 4:40 pm #219444
    Ismael

    Hey!

    What do you mean by “custom color”?

    Cheers!
    Ismael

    February 4, 2014 at 4:42 pm #219451
    simonac

    Let’s say i want a boarder in a special green: #719430

    February 4, 2014 at 11:46 pm #219700
    Yigit

    Hey!

    You can replace “gray” in Ismael’s code with #719430 or any other color you would like

    Regards,
    Yigit

    February 19, 2014 at 6:40 am #225962
    JoshMetz

    Hello,
    We would like to add an image border and drop shadow to the images here http://visiteldorado.wpengine.com/about/ (hosted on WPengine) (and similar images throughout the site). We tried the code above to no affect. Can you offer any additional suggestions?
    Thanks!
    J

    February 19, 2014 at 4:40 pm #226255
    Yigit

    Hi!

    “Coming Soon: A new website for
    El Dorado County Visitors”
    Please post a temporary login and point out the images so we can provide you custom CSS code accordingly

    Best regards,
    Yigit

    February 19, 2014 at 5:03 pm #226275
    JoshMetz

    Apologies. The site is now viewable. You can see an example of the images we want to add borders and drop shadows to here http://visiteldorado.wpengine.com/about/ (hosted on WPengine)

    Ideally we can apply the same styling to all site images input using the advanced editor image element.

    Thanks for the help
    J

    February 19, 2014 at 5:14 pm #226282
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .avia_image.avia-align-center img { 
border: solid 2px red;
box-shadow: 0 0 12px 1px rgba(0,0,0,0.3);
}

    Regards,
    Yigit

    February 19, 2014 at 6:13 pm #226339
    JoshMetz

    I’ve added the code and still see the same condition (no border, no drop shadow). Thoughts?

    J

    February 19, 2014 at 8:42 pm #226425
    Yigit

    Hey!

    Please flush browser cache and refresh your page a few times. It does work on my end. See screenshot here http://i.imgur.com/UH7hU8W.jpg

    Cheers!
    Yigit

    February 19, 2014 at 11:55 pm #226498
    JoshMetz

    Hi Yigit,

    Thanks for your support. I’ve flushed browser cache and viewed the site using Chrome, Explorer and Safari – none of which are displaying the styling you’re seeing. Any idea what could be the issue? Your screen shot shows just what we’re hoping to achieve.

    Best
    J

    February 20, 2014 at 5:28 am #226588
    Josue

    Hi J!

    I do see it too, have you tried seeing from another computer?

    Cheers!
    Josue

    February 21, 2014 at 6:29 pm #227600
    JoshMetz

    Hello.

    I’m sorry but I’ve viewed the site from multiple computers and devices and am still not seeing the styling in your screenshots. Wondering what if anything additional we could do? On the homepage, we are displaying recent blog posts. http://visiteldorado.wpengine.com/ (hosted on WPengine) We would also like the blog thumbnail to have the same styling we’ve applied to the images. Could you help us with the css to make that happen? Maybe focusing on this other area can help shed some light on the first one.

    Thanks
    J

    February 21, 2014 at 6:40 pm #227603
    Yigit

    Hi!

    I am still seeing the changes ( http://i.imgur.com/wJIzZzo.jpg ) and Josue confirmed that he is seeing as well. In this case there is nothing else we can do as code is being applied just fine and issue could be related with your browser, if you have flushed cache properly.
    Please add following code to Quick CSS as well

    .avia-content-slider .slide-image { border: solid 2px red;
box-shadow: 0 0 12px 1px rgba(0,0,0,0.3);
}

    Best regards,
    Yigit

    February 21, 2014 at 9:32 pm #227686
    JoshMetz

    Hi Yigit,

    How about css code that will give the border and dropshadow to the blog thumbnails and images?

    Thanks for your help
    J

    February 23, 2014 at 8:02 pm #228176
    Yigit

    Hey!

    Please add following code to Quick CSS as well

    .avia-content-slider .slide-image img { 
border: solid 2px red;
box-shadow: 0 0 12px 1px rgba(0,0,0,0.3);
}

    Cheers!
    Yigit

    March 3, 2014 at 7:12 pm #231756
    JoshMetz

    Hello. Wanted to get back and let you know that I was finally able to view the changes. Thanks for the help!

    One small item remains – When viewing the blog thumbnails on the homepage http://visiteldorado.wpengine.com/, (hosted on WPengine) I’m only seeing the dropshadow in the vertical plan. I haven’t been able to get it to show on the image sides. Can you suggest a solution for that?

    Many thanks!
    J

    March 4, 2014 at 4:04 am #231996
    Josue

    Hey!

    Try adding this code to the Quick CSS:

    .avia-content-slider .slide-entry {
    overflow: visible !important;
}

    Cheers! 
    Josue

    March 5, 2014 at 6:07 am #232536
    JoshMetz

    awesome! thanks for all the support. combined with the fantastic theme – a winning solution indeed!

    March 5, 2014 at 6:46 am #232543
    Josue

    You Are Welcome, Glad We Could Help :)

    Regards,
    
Josue

  • Author
    Posts
Viewing 22 posts - 1 through 22 (of 22 total)
  • The topic ‘How to add border to image’ is closed to new replies.