Advanced search  

News:

CPG Release 1.6.26
Correct PHP8.2 issues with user and language managers.
Additional fixes for PHP 8.2
Correct PHP8 error with SMF 2.0 bridge.
Correct IPTC supplimental category parsing.
Download and info HERE

Pages: [1]   Go Down

Author Topic: Curve Dark Styling  (Read 3599 times)

0 Members and 1 Guest are viewing this topic.

Deus

  • Contributor
  • Coppermine frequent poster
  • ***
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 153
    • DJ-Daz
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://daz-stuff.uk
DJ tutorials, E-Bikes, Movies and videogames.
(https://daz-stuff.uk/daz/signature.png)

ron4mac

  • Administrator
  • Coppermine addict
  • *****
  • Country: us
  • Offline Offline
  • Posts: 2026
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

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
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

  • Coppermine addict
  • ****
  • Country: 00
  • Offline Offline
  • Posts: 1362
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.018 seconds with 19 queries.