Tip: Give a unique look to your photo gallery

[Bernard Lama]

Hi NCs,

Hope you will like my tip. 

How to do this?

Simply copy and paste the following code into advanced css. You are done.

Note: If you are looking for a person to customize your site, I'm available for hire. You may want to check my profile or you can directly contact me via my email id [e-mail]

Try Private Help Instant Full Support

The Code

.xg_widget_photo_index_index .xg_list ul li .ib a img {
border-width: 0px!important;
}

.xg_widget_photo_index_index .xg_list_photo ul li .ib a img {
width: 95%!important;
height: 70%!important;
-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}

.xg_widget_photo_index_index .xg_list_photo .tb {
background: white;
padding: 5px 5px 5px 5px;
width: 126px;
margin-left: 3px;
height: 35px;
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
box-shadow: inset 0 0 2px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .4);
}

Live Preview:Click here.

Preview:

[doone]

Nice, it works for me  I thank you for the interesting tip.

[Bernard Lama]

You are welcome Doone.

[Joao Fernandes]

Hello Bern, thank you for the code. It looks great. One little problem that you might be able to help with. How do you centre the four pics on the featured section left and right and top and bottom centred? 

Example below:

[Bernard Lama]

Hi Joao, how are you doing?
Try this code in advanced css box.

div.xg_list_photo ul li, div.xg_list_albums ul li {
margin-left: 9px;
margin-top: -9px;
margin-bottom: 8px;
}

[Joao Fernandes]

Hi Bern, it worked . I just played around with some numbers and all good. Than you. God Bless.

[Bernard Lama]

Cheers. Have a good day.

[Kos]

Awesome

[Bernard Lama]

Thanks Kos

[lorianne]

nice! I had to tweak the height # because the images on my site show the author and the title and some of the longer ones required a bit more space, but it looks great. thanks!

[Jelena]

Hello Bernard I saw some news from you. Woww very nice and Awesome Gallery Look,. I take this code of you :) Thank you to share it... I really like it. I would like to continue add some stuff to my site. please let me know if you have free time :)

[Bernard Lama]

Ohhh sure Jelena and thanks for liking it.

[Scott Bishop]

Love the idea. It would be a nice clean touch but unfortunately not all photo thumbnails are symmetrically even so your tip winds up squishing them.