A Few Custom CSS Questions:

andacar · 2017-01-30 15:07:24

Thanks to help I’ve received here I’m making steady progress on my gallery design. Just a few questions:
As you can see on the Galleries page of my site, the thumbnails are pushed to the top of their frames and don’t show the entire image. Would that be controlled by this css in the custom creepyhouse.css file?

.album-thumbnail img {
	border: 1px; /* Frame thickness of album thumbnail */
	border-color: #FFFACD; /* Color of the frame */
	box-sizing: border-box;
	border-style: solid !important;
	background-color: #191919 !important; /* Frame color directly to the thumbnail image */
	padding: 4px !important;
	align-content: center;
}

I also want the titles to be centered but the description to be left justified. Would that be here?

.album-title {
	font-size: 0.8125rem; /* Font size of the album title */
	font-weight: 700; /* Font weight */
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; /* Font */
	align-content: center;
}

.album-description {
	font-size: 0.6875rem; /* Font size of the album description of the album sets */
	line-height: 0.8rem; /* Distance between the lines of the album description of album sets */
	font-weight: 400;
	font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif; /* Font family */
}

Thanks!

Last edited by andacar (2017-01-30 15:09:51)

Rainer Goergen · 2017-01-30 16:22:44

For the thumbnails in your gallery:

.album-thumbnail {
  background-position: center top;
  background-repeat: no-repeat;
  background-size: contain;
  float: left;
  margin-right: 12px; /* Abstand Thumbnail nach rechts zum Text */
  margin-left: 6px; /* Abstand Thumbnail zum linken Rand */
  margin-top: 6px; /* Abstand Thumbnail zum oberen Rand */
}

For the other you are right, test it with different values. Look at my custom.css.

Rainer

Edit: These are my own settings. But my title is right of the thumbs and the description too. If you mean the words - The Latest - this is the page copy. I see, your gallery - J&R Car Museum -, there you have the description centered.

Last edited by Rainer Goergen (2017-01-30 16:32:24)

rod barbee · 2017-01-30 23:46:25

the reason your image is being pushed to the top of the cell is this rule in your custom css:

.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: 125px;
    margin: 0 15px 30px;
    padding: 9px;
    overflow: hidden;
    text-decoration: none;

It's that 30px of bottom margin.

rod barbee · 2017-01-31 01:37:19

I also want the titles to be centered but the description to be left justified. Would that be here?

try this:

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

andacar · 2017-01-31 07:51:06

Thanks for the additions, and they worked fine. Now I'm running into a weird unrelated problem. creepyhouse.css includes both the styles for my galleries plus the ones for the custom footer with social media icons Matt came up with. When I combine them, the styles in the footer get overridden somehow and I get a big ugly grey box around my icons and incorrect margins. These styles have completely different names, so I'm not sure how they are interfering with each other.

?

rod barbee · 2017-01-31 08:29:25

you've got some paragraph tags in the custom footer that you might not need. These add to the height of the footer

<p></p>

<p>

</p>

try messing with that html first and see if that helps. From what I can see in the inspector, the only css from creepyhous.css being applied to the custom footer has .custom_footer in the selector. There are some inherited rules, but none of them look to be adding to the height other than a body rule with a line-height property set at 1.5rem.

andacar · 2017-01-31 09:57:45

Huh.

Getting rid of all the paragraphs helped put the social media icons in the right place. But they're still surrounded by a grey box and too far over to the right. Is there a way to have two custom css files? Or what else might fix this? Something's getting inherited down the line here, because the code for the icons works fine when it's by itself.

rod barbee · 2017-01-31 10:07:14

By using the browser inspector (great tool by the way, if you're not already using it) I see that this is where the background color is coming from:

.custom_footer {
    background-color: #333;
    border: 0 solid #191919;
    border-width: 2px 0;
    color: #fff;

inside the div with the class "custom-footer" is another div with the class "content"
the "content" class has a max-width of 1140px. Your site, over all, is 1280px.
There is also this rule, which adds 24px of left and right padding:

.custom_footer > .content {
    font-size: 0.857rem;
    max-width: 1140px;
    padding: 0 24px;
}

try this:

.custom_footer .content {
	max-width: 1280px;
}

andacar · 2017-01-31 15:10:15

Thanks to your help, just about everything is working now. I have just one problem left I can find. As you can see (http://creepyhouse.net/galleries/) the thumbnails are repeating oddly. I tried adding a no-repeat line but it didn't help.

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

rod barbee · 2017-01-31 15:32:32

Did you happen to change the thumbnail column size in the template? If so, try republishing the images. Make sure that the " Push metadata..." option is not checked in Publisher settings (Lightroom)

And as this is getting long and the topic is drifting, if you find other issues can you separate them into new topics? That can really help if others are searching for solutions to similar problems.

Rainer Goergen · 2017-02-01 00:31:55

@Rod
In my custom.css I have the same values of .the__albumSet figure a. I have only deleted padding 9px. So the image does not push up. The rest of formating I have done under .album-thumbnail, margin-top 6px.

What is the difference between my formating and yours? Both have the same effect.

Rainer

Last edited by Rainer Goergen (2017-02-01 05:48:10)

rod barbee · 2017-02-01 00:56:07

I didn't post any CSS for that, just pointed out why the thumbnail was being pushed up. So I'm not sure what you're referring to.

Community @ The Turning Gate

#1 2017-01-30 15:07:24

A Few Custom CSS Questions:

#2 2017-01-30 16:22:44

Re: A Few Custom CSS Questions:

#3 2017-01-30 23:46:25

Re: A Few Custom CSS Questions:

#4 2017-01-31 01:37:19

Re: A Few Custom CSS Questions:

#5 2017-01-31 07:51:06

Re: A Few Custom CSS Questions:

#6 2017-01-31 08:29:25

Re: A Few Custom CSS Questions:

#7 2017-01-31 09:57:45

Re: A Few Custom CSS Questions:

#8 2017-01-31 10:07:14

Re: A Few Custom CSS Questions:

#9 2017-01-31 15:10:15

Re: A Few Custom CSS Questions:

#10 2017-01-31 15:32:32

Re: A Few Custom CSS Questions:

#11 2017-02-01 00:31:55

Re: A Few Custom CSS Questions:

#12 2017-02-01 00:56:07

Re: A Few Custom CSS Questions:

Board footer