New SM-How to add a frame around your galleries
ko04
Registered Users Posts: 370 Major grins
Hey everyone,
So I thought that the galleries on my page looked very flat and I thought they need something so I added a frame around my galleries(I am still in legacy). I thought I'd share with you guys the code and how I did it incase anyone is interested in doing the same thing. Please be aware that my knowledge of code is very limited so if there is anything you all think that needs to be taken out or added please feel free to let me know. So here is what I did and this might change from person to person but this is what worked for my website:
1)changed gallery page to customize "just this page"
2) added a CSS box
3) Added this code [HTML].sm-user-ui .sm-tiles .sm-tile-content, .sm-user-ui .sm-tiles-column-organic .sm-tile-content.sm-tile-content-empty, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-over .sm-tile-content, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-cover .sm-tile-content {
-webkit-box-shadow: 1px 1px 0px 5px rgba(0, 0, 0, 1);
box-shadow: 1px 1px 0px 5px rgba(0, 0, 0, 1);[/HTML]
I used http://css3generator.com/ to generate that code, if you want white it would be replace where it say "rgba(0,0,0,1) with "F,F,F" and so on with other color's. If it ends up being rounded which for me it isn't just add this in your code:[HTML]-webkit-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;[/HTML].
I hope this helps/works...I'd be more than happy to help in any way I can if you have questions but be aware my advice/knowledge will be limited. Though I am positive someone will chime in here to make it work.
Happy coding,
KO
www.k-ophotography.com
http://k-ophotography.blogspot.com/
So I thought that the galleries on my page looked very flat and I thought they need something so I added a frame around my galleries(I am still in legacy). I thought I'd share with you guys the code and how I did it incase anyone is interested in doing the same thing. Please be aware that my knowledge of code is very limited so if there is anything you all think that needs to be taken out or added please feel free to let me know. So here is what I did and this might change from person to person but this is what worked for my website:
1)changed gallery page to customize "just this page"
2) added a CSS box
3) Added this code [HTML].sm-user-ui .sm-tiles .sm-tile-content, .sm-user-ui .sm-tiles-column-organic .sm-tile-content.sm-tile-content-empty, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-over .sm-tile-content, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-cover .sm-tile-content {
-webkit-box-shadow: 1px 1px 0px 5px rgba(0, 0, 0, 1);
box-shadow: 1px 1px 0px 5px rgba(0, 0, 0, 1);[/HTML]
I used http://css3generator.com/ to generate that code, if you want white it would be replace where it say "rgba(0,0,0,1) with "F,F,F" and so on with other color's. If it ends up being rounded which for me it isn't just add this in your code:[HTML]-webkit-border-radius: 0px 0px 0px 5px;
border-radius: 0px 0px 0px 5px;[/HTML].
I hope this helps/works...I'd be more than happy to help in any way I can if you have questions but be aware my advice/knowledge will be limited. Though I am positive someone will chime in here to make it work.
Happy coding,
KO
www.k-ophotography.com
http://k-ophotography.blogspot.com/
KO Photography
http://www.k-ophotography.com/
http://www.k-ophotography.com/
0
Comments
Just found an even easier way than that code same thing but just put this in
.sm-user-ui .sm-tiles .sm-tile-content, .sm-user-ui .sm-tiles-column-organic .sm-tile-content.sm-tile-content-empty, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-over .sm-tile-content, .sm-user-ui .sm-tiles-column-organic.sm-tiles-info-cover .sm-tile-content { border: 5px solid #000000!important;So instead of having all that generated code it would be a lot easier for you to change the color.
http://www.k-ophotography.com/