Smaller font & transparent background for Description Boxes?

  • Resolved Prof Parks

    (@prof-parks)


    12 years, 3 months ago

    How can I make a smaller font & transparent background for the Description Boxes? See [shortcode] version on https://cn.profparks.com near the bottom of the page.

    Because the current large font and dark background of the descripton boxes to not go with the look and feel of this site, I tried them in “hide and pop-up when hover” mode. That makes them disappear.

    I would prefer, however, to show the titles, but in a smaller dark font on a transparent background. An alternate background would be a light color that matches the site’s color scheme.

    https://www.ads-software.com/extend/plugins/slideshow-jquery-image-gallery/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author Stefan Boonstra

    (@stefanboonstra)

    You can adapt the slideshow’s CSS by settings its style settings to ‘Custom’. The following lines of CSS are used to manipulate the description box:

    .slideshow_container .transparent {
	filter: alpha(opacity = 50); /* These two lines set the regular transparancy of the description boxes. */
	opacity: 0.5;
}

.slideshow_container .transparent:hover {
	filter: alpha(opacity = 80); /* These two lines set the transparancy of the description boxes when a mouse is hovered over them. */
	opacity: 0.8;
}

.slideshow_container .description {
	background: #000; /* This line sets the background of each description box. */
}

    Full transparancy would of course be 100 or 1.0.

    The fonts can be set like this:

    .slideshow_container h2 {
	margin: 5px;
	font-size: 25px; /* Add this line to adjust the font size to any number of pixels you'd like, this will adjust the title's size. */
}

.slideshow_container p {
	margin: 7px;
	font-size: 15px; /* The same goes for this line, but affects the paragraph (description). */
}
    Thread Starter Prof Parks

    (@prof-parks)

    I never ever thought I would do CSS, but you make it look almost understandable. Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Smaller font & transparent background for Description Boxes?’ is closed to new replies.