Curve Dark Styling Curve Dark Styling
 

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Main Menu

Curve Dark Styling

Started by Deus, October 08, 2014, 01:44:04 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Deus

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.

https://daz-stuff.uk
DJ tutorials, E-Bikes, Movies and videogames.
(https://daz-stuff.uk/daz/signature.png)

ron4mac

#1
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.

allvip

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


.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:


.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:


.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

allvip

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


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