[resolved] Smaller font & transparent background for Description Boxes? (3 posts)

  1. Prof Parks
    Posted 3 years ago #

    How can I make a smaller font & transparent background for the Description Boxes? See [shortcode] version on http://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.


  2. Stefan Boonstra
    Plugin Author

    Posted 3 years ago #

    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). */
  3. Prof Parks
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Slideshow
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic