Curve Dark Styling Curve Dark Styling
 

News:

CPG Release 1.6.27
change DB IP storage fields to accommodate IPv6 addresses
remove use of E_STRICT (PHP 8.4 deprecated)
update README to reflect new website
align code with new .com CPG website
correct deprecation in captcha

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;
}