Boxed layout and image desc on hover

[dontpanic]

Hey ppl..
Made some UI fixes in my Chev platform..
http://lillipaint.com

1) Boxed layout (max-width). I think the boxed layout is better looking than a fluid full width one.. (flickr does the same...)
2) Image description on hover. I was trying to find a solution for image description to stay invisible by default and only on hover to appear and to be honest it was quite simple to do!
3) Image view fixes. Wider left column for about,comments and better styling for the share buttons.

Todo
4) I managed to put the view more button, when an image is part of an album, in a better position next to the title.. Im having some problems thought (appears in images which are not in albums etc..)

Let me know what you think..and ping me if you want help on this.
Thanks

 

[Clipperty]

i like the Frontpage very much 🙂

 

[Rodolfo]

You should tweak the #home-pics-feature-overlay gradient to fit your background color 😉

 

[dontpanic]

You should tweak the #home-pics-feature-overlay gradient to fit your background color 😉

You're right.
Thanks a lot Rodolfo..

 

[jimsweb]

this is fixed width - http://cellarpix.com
let me know if you need any assistance, happy to help.

 

[Craig]

Hello,

How did you fix the width?


Thanks in advance!

 

[jimsweb]

add this is custom css

@media (min-width: 992px) and (max-width: 1920px) {
.content-width {
max-width: 1208px;
}
}
@media (min-width: 1921px) and (max-width: 2560px) {
.content-width {
max-width: 1208px;
}
}
@media (min-width: 3840px) {
.content-width {
max-width: 1208px;
}
}

 

[Craig]

Thanks for your reply. I added the code to custom CSS in themes in the dashboard and nothing happened. I originally placed the following in custom CSS:

@media (min-width: 1250px) {
.content-width {
max-width: 1400px;
}
}

(with this code I was able to narrow my page)

I removed the code and replaced it with the code you wrote above and nothing happened. But Im still learning how to navigate the dashboard. maybe I'm making a stupid mistake.

Thanks.

 

[jimsweb]

you need add all three:

@media (min-width: 992px) and (max-width: 1920px) {
.content-width {
max-width: 1208px;
}
}
@media (min-width: 1921px) and (max-width: 2560px) {
.content-width {
max-width: 1208px;
}
}
@media (min-width: 3840px) {
.content-width {
max-width: 1208px;
}
}

add below on if you want top bar fixed...


.top-bar {
max-width: 1190px;
margin: auto;
}

 

[Craig]

got it to work this time. Thanks again!

btw, your website looks awesome.

I have a question, I was able to turn on the social settings in the dashboard. Was able to get all of them to work. I am trying to add more functionality like FB likes and shares, I have the JS SDK from the facebook app but I am not sure where to place the code. Does chevereto have this functionality? and if so, where should I place the code, in the dashboard or in overrides file?

Thanks