thebigcheese

I did, sorry. It’s been a slow week at work, so I’ve been fussing with it. I figured out the deal about lightboxes. It seems that what was happening is that the image link would get tied to the line the image was connected to. For example, if I put the image at the beginning of a bullet point that was two lines long, then I can only click the area of the image that lines up with those two lines of the bullet point even though the image is aligned right. This only happens in the Customizr theme for some reason. Ultimately, I didn’t like the image in that location anyway, so I moved it out of the list. Still, it was strange.

Great, thanks! I reduced it to 40×40 now. It’s working as you described, though it’s a little ugly having to have all that !important tags in there… Oh well. The mouse-over coloring is also not working the same as the others. Maybe it would be better to just petition them to add more icons…

So, as it stands, I have this entered in the stylesheet:

.social-links .fa-Twitch::before {
    content: url(https://www.noodohs.com/wp-content/uploads/2016/12/beam_ball_white.png);
}

But that doesn’t replace the Twitch icon. When I had content: “\f09a”; instead, it would basically remove the icon, but that’s it.

Attempting to follow the code you linked above, which does seem to allow me to replace existing icons, but I don’t understand how to replace it with a graphic I have uploaded.

That post just says “add an icon,” which is not terribly helpful. How would I go about adding an icon? That is what I am trying to find out.

So… Since I have updated the background box to be a percentage of the page height, it seems to be less of a problem. It was happening on all browsers, though I suspect you need at least a 1080 vertical resolution for it to be a problem. Since I do not have a 4k monitor, I have no way of testing it at higher resolutions. I can remove the padding if you would like to see it.

OH! I am dumb. It was because I was specifying a LINK color in one and not in the other. I have figured it out now. And someone in another thread helped with the background, so that is now also good. Can someone please elaborate on the footer aspect? That is the one remaining thing I don’t know how to deal with.

Oooooo! It does. I actually managed to figure out the background bit last night, but the padding bit is exactly the final touch I was looking for, thank you! So now I am using:

.page-content,
.entry-content,
.entry-summary {
	color: #ccc;
	padding: 30px;
	padding-bottom: 80px;
	background: rgba(255,255,255,0.1);
}

This gives me a little extra room on the bottom, which looks nice. I also tried it using a percentage there, thinking that this would give me more consistent results, but it seems to mostly make the page longer, so I will have to play with that some… I still ended up using a lighter font, but the background is a nice visual separater.

Actually, a quick update. I discovered that the .page-content, .entry-content, and .entry-overview classes are used to define, surprise, the content of their respective page types and thus can be used to define the background color and text color. However, when I define the background color here, it only fills a space big enough for the text on screen, which looks rather odd. Is there a way to extend it so that it is, say, a fixed percentage of the total page height? And perhaps has some extra padding around the text?

And I suppose I should have mentioned that the web site in question is gunbladex.com.

• This reply was modified 8 years, 6 months ago by thebigcheese.