Advanced search  

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]

Pages: [1]   Go Down

Author Topic: Curve Dark Styling  (Read 2042 times)

0 Members and 1 Guest are viewing this topic.

Deus

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: 00
  • Offline Offline
  • Gender: Male
  • Posts: 152
Curve Dark Styling
« 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.

Logged
https://the-bionic-cyclist.co.uk/
The Bionic Cyclist - Ebike and Technology Reviews
https://the-bionic-cyclist.co.uk/forum
For everything else.

ron4mac

  • Dev Team member
  • Coppermine addict
  • ****
  • Country: us
  • Offline Offline
  • Posts: 1188
Re: Curve Dark Styling
« Reply #1 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.
« Last Edit: October 08, 2014, 08:20:24 pm by ron4mac »
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Curve Dark Styling
« Reply #2 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
« Last Edit: December 03, 2014, 06:54:46 am by allvip »
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1290
Re: Curve Dark Styling
« Reply #3 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;
}

Logged
Pages: [1]   Go Up
 

Page created in 0.015 seconds with 20 queries.