Community @ The Turning Gate

Support community for TTG plugins and products.

NOTICE

The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.

This forum is now closed, and exists here as a read-only archive.

  • New user registrations are disabled.
  • Users cannot create new topics.
  • Users cannot reply to existing topics.

You are not logged in.

#1 2017-02-21 16:33:32

andacar
Member
From: Albuquerque, NM
Registered: 2014-09-03
Posts: 159
Website

Album Set and Album Thumbnail Questions

Hi folks! I'm trying to make some changes to the thumbnails and descriptions in my albums and album sets here. I have a few questions:

  1. I’d like to get rid of or modify the white borders around the text, leaving only the rounded grey border around the thumbnail itself, but I can’t find where to do this in the CSS.

  2. .album-description in the CSS is set to center, but the description on the page still justifies to the left.

  3. I also have the .album-description line-height set to 40%, but when there has been more than one line of text I haven’t seen any reduction in line height.

  4. Will these settings go down to the albums themselves, or is that done somewhere else?

Here is the CSS I’m using:

.the__albumSet figure a {
	background-color: rgb(75, 75, 75); 
	border: 0 solid rgb(110, 110, 110); 	
	border-width: 2px; 			
	border-radius: 10px; 		
	color: #212121; 				
	display: block;
	height: auto; 							
	width: auto;
	margin-top: 10px; 					
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	background-repeat: no-repeat;
	overflow: hidden;
	text-decoration: none;
	align-content: center;
	
}

.the__albumSet a:hover {
	background-color: #5a5a5a; 				
	border-color: #880000; 					
}

.album-thumbnail {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	float: left;
	margin-right: 0px; 					
	margin-left: 0px; 						
	margin-top: 0px; 						
	margin-bottom: 0px;
}

.album-title {
	font-size: 1rem; 					
	font-weight: 400; 						
	font-family: metamorphous; 				
	font-style: normal;
}

figcaption p.album-title {              	
	text-align: center;
}

.album-thumbnail img {
    border: 0px; 							
    border-color: #FFFACD; 					
    box-sizing: border-box;
    border-style: solid !important;
    background-color: #191919 !important; 
    padding: 4px !important;
}

.album-description {
	font-size: .95rem; 						
	line-height: 40%; 						
	font-weight: 400;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	text-align: center;
}

Thanks as always!

Last edited by andacar (2017-02-21 16:35:41)


Darrell Leland

"Never go creeping around old castles at night; you may find what you're looking for."
- Grimsley

Offline

#2 2017-02-21 23:05:03

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Album Set and Album Thumbnail Questions

for the first one, have you tried setting borders to 0 in the album set thumbnail settings?
Thumbnails > The Cells > Border


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#3 2017-02-21 23:22:55

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Album Set and Album Thumbnail Questions

.album-description in the CSS is set to center, but the description on the page still justifies to the left.

the description under the thumbnails is centered on the page you linked to.

are you referring to something else on the page?


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#4 2017-02-21 23:31:40

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Album Set and Album Thumbnail Questions

also have the .album-description line-height set to 40%, but when there has been more than one line of text I haven’t seen any reduction in line height.

your css is being overridden by more a more specific selector, as shown in the browser inspector:

.the__albumSet figcaption p

it sets the line-height to 1.5rem

try a more specific selector for that rule:

.the__albumSet figcaption p.album-description{
	font-size: .95rem; 						/* Font size of the album description of the album sets */
	line-height: 40%; 						/* Distance between the lines of the album description of album sets */
	font-weight: 400;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
	text-align: center;
}

Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#5 2017-02-21 23:34:29

rod barbee
Moderator
From: Port Ludlow, WA USA
Registered: 2012-09-24
Posts: 17,830
Website

Re: Album Set and Album Thumbnail Questions

Will these settings go down to the albums themselves, or is that done somewhere else?

the css you're showing is for album sets, you'll have to customize albums using selectors specific to albums. Just poke around with your browser's inspector to see what selectors affect which elements on the page.


Rod 
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site

Offline

#6 2017-02-22 04:56:20

andacar
Member
From: Albuquerque, NM
Registered: 2014-09-03
Posts: 159
Website

Re: Album Set and Album Thumbnail Questions

Thanks Rod. I'll have a look at it.


Darrell Leland

"Never go creeping around old castles at night; you may find what you're looking for."
- Grimsley

Offline

Board footer

Powered by FluxBB