forum.coppermine-gallery.net

Support => cpg1.5.x Support => cpg1.5 themes (visuals) => Topic started by: Deus on October 08, 2014, 01:44:04 pm

Title: Curve Dark Styling
Post by: Deus on October 08, 2014, 01:44:04 pm

I'm trying to add some little changes to my gallery, I'd like to style it like my forum and I'm nearly there.
I'd like to add a blue border and curves to the thumbnail, but for the life in me I can't find the correct place to add the code.
TIA
Deus.

Title: Re: Curve Dark Styling
Post by: ron4mac on October 08, 2014, 07:04:48 pm

You will need to incorporate $template_thumbnail_view and/or function theme_display_thumbnails into the theme.php file of your theme.
See themes/sample/theme.php for an example.

I would encapsulate the image in 3 nested div's then style the div's with border and radius values.

[edit]
Or 2 divs if you put a wide border on the outside one and a negative margin on the inside one.

Title: Re: Curve Dark Styling
Post by: allvip on December 03, 2014, 06:45:14 am

No need to edit $template_thumbnail_view function.
Just add to themes/your_theme/style.css:

Code: [Select]

.thumbnails a:link .image{
    border: 3px solid #282828;
    padding: 2px;
    background: #0097E9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

If you want the albums thumbnails to be diffrent add:

Code: [Select]

.tableb_alternate .thumbnails a:link .image{
    border: 1px solid #000000;
    padding: 0px;
    background: transparent;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
.tableb_alternate .thumbnails a:hover .image{
    border: 1px solid #FFFFFF;
}

or no borders for albums:

Code: [Select]

.tableb_alternate .thumbnails a:link .image{
    border: none;
    padding: 0px;
    background: transparent;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

More: read thread diffrent class for thumbnails http://forum.coppermine-gallery.net/index.php/topic,76662.0.html (http://forum.coppermine-gallery.net/index.php/topic,76662.0.html)

Title: Re: Curve Dark Styling
Post by: allvip on December 03, 2014, 07:01:46 am

You can also use ouline but only when you don't want boder radius because the radius applies to border and never to outline:

Code: [Select]

.thumbnails a:link .image{
    border: 2px solid #282828;
    outline: 3px solid #0097E9;
}