WordPress.org

Ready to get started?Download WordPress

Forums

Slideshow
[resolved] Slideshow Text Customization in Description Box (8 posts)

  1. positiveproductivity
    Member
    Posted 7 months ago #

    Hi There.

    Love your plugin! Just want to ask if there is a way to customize the text such as the size, font and colors on the description box.

    Will be looking forward to your help. Thanks in advance!

    http://wordpress.org/plugins/slideshow-jquery-image-gallery/

  2. quailrunphotos
    Member
    Posted 7 months ago #

    This is a great plug in.

    I am also looking to customize the text size, font and colors.

  3. Stefan Boonstra
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    All styles such as font size and font colors can be adapted through a slideshow's custom stylesheet. A basic understanding of CSS would come in handy here.

    To create a custom stylesheet, go to "Slideshows" in your WordPress dashboard menu. In the "Slideshows" menu, you'll find a submenu called "General Settings". Click on this submenu. A page with a couple of tabs will open. One of these tabs is the "Custom Styles" tab, click on it to start customizing a stylesheet.

    On the "Custom Styles" tab you'll see the "Default stylesheets". These are the stylesheets that will always be available to start your customization from. Click "Customize" to edit a new custom stylesheet.

    If you would like to change the font, font size, and font color of your description boxes, you should do the following.

    Look for the ".slideshow_description" lines in the stylesheet:

    .slideshow_container .slideshow_description { background: #000; width: 100%; }
    .slideshow_container .slideshow_description h2 { font-size: 1.3em; text-align: center; }
    .slideshow_container .slideshow_description p { text-align: center; }
    .slideshow_container .slideshow_description h2 a,
    .slideshow_container .slideshow_description p a { color: #fff; }

    To change the font of the description boxes to "Times New Roman" (or any other font available on your website), add "font-family: "Times New Roman";" to the following line in the stylesheet:

    .slideshow_container .slideshow_description h2 a,
    .slideshow_container .slideshow_description p a { font-family: "Times new Roman"; color: #fff; }

    If you wanted to change the font size of the title and description in the description boxes, set "font-size" to a bigger value:

    .slideshow_container .slideshow_description h2 { font-size: 2.0em; text-align: center; }
    .slideshow_container .slideshow_description p { font-size: 1.5em; text-align: center; }

    To set the font color of the description to another color, red for instance, change the "color" to the red color hexadecimal:

    .slideshow_container .slideshow_description h2 a,
    .slideshow_container .slideshow_description p a { font-family: "Times New Roman"; color: #ff0000; }

    The same goes for setting the background color of the description boxes. Look for the "background" attribute and set it to a different color, white for instance:

    .slideshow_container .slideshow_description { background: #ffffff; width: 100%; }

    The resulting block of CSS code would look something like this:

    .slideshow_container .slideshow_description { background: #ffffff; width: 100%; }
    .slideshow_container .slideshow_description h2 { font-size: 2.0em; text-align: center; }
    .slideshow_container .slideshow_description p { font-size: 1.5em; text-align: center; }
    .slideshow_container .slideshow_description h2 a,
    .slideshow_container .slideshow_description p a { font-family: "Times New Roman"; color: #ff0000; }

    Best regards,
    Stefan

  4. quailrunphotos
    Member
    Posted 7 months ago #

    Thanks for the quick response. Just the information I was looking for and I appreciate the level of detail and explanation.

  5. WP-Spezialist
    Member
    Posted 7 months ago #

    Hi Stefan,

    really a great plugin!

    Customizing the description is difficult because the line-breaks are missing. Is there any way to add a nl2br for the description-output without touching the plugin-code?

    Thanks a lot!

  6. Stefan Boonstra
    Member
    Plugin Author

    Posted 7 months ago #

    Hi,

    You can use line breaks by putting <br /> in your descriptions.

    Automatic line breaks will be added in an upcoming release.

    Best regards,
    Stefan

  7. WP-Spezialist
    Member
    Posted 7 months ago #

    Thanks a lot!

  8. bbrannigan
    Member
    Posted 6 months ago #

    Hi Stefan, I managed to change the opacity, but when I input your font changing code it has no effect. Have you been notified of any problems or restrictions with the Simplepress theme? Is there anything else I should be overriding to ensure your code will take effect?
    Thanks
    Billy

Reply

You must log in to post.

About this Plugin

About this Topic