[resolved] Position of description (6 posts)

  1. TimothyDalton
    Posted 3 years ago #

    Hi there Stefan,

    I guess I have a rather simple question. Basically I would like to change the position of the description text and locate it outside of the specific picture, not inside. Is this anyhow possible without messing up too much in the stylesheets?

    Thanks for your time,



  2. TimothyDalton
    Posted 3 years ago #

  3. MissKitty9470
    Posted 3 years ago #

    Timothy, I needed to accomplish the same thing and was able to compromise using CSS...not sure if it would work for you.

    1. I disabled pagination
    2. I edited CSS of description div

    .slideshow_container_style-light .slideshow_transparent {padding-bottom:0;}

    3. I edited vertical spacing of description h2 and p tags

    .slideshow_description h2 {padding-bottom: 0; padding-top: 5px;}
    .slideshow_description p {padding-top:0; margin-bottom: 0;}

    4. Most importantly, I changed the height in each slideshow setting.
    For example, I wanted move the description div 20px down.
    My images were all maximum height of 248px.
    So I changed the height in my slideshow settings to 268px. This allows the description div to overlap just a bit but still shows most of the image.

    This may or may not work for you.

  4. TimothyDalton
    Posted 3 years ago #

    Misskitty, thanks! I'm trying to figure out which CSS files you actually edited. Could you also tell me which version of Slideshow you are running? Cheerio, Tim

  5. MissKitty9470
    Posted 3 years ago #

    Hi Tim,
    Sorry for the delay!
    I'm using version 2.2.11

    As for the CSS, I used Firebug to get the elements that I needed to move/adjust, then I added new rules to the bottom of my THEME'S stylesheet (not the plugin css stylesheet). I added a the #sidebar div to each of the rules for specificity.

    #sidebar .SlideshowWidget {margin-bottom: 15px;}
    #sidebar .slideshow_container img {border: solid 2px #CDEFE5; margin-top: 10px;}
    #sidebar .slideshow_container_style-light .slideshow_controlPanel {background-color: transparent!important; margin-top: 10px;}
    #sidebar .slideshow_container .slideshow_controlPanel li {list-style-type: none;}
    #sidebar .slideshow_container_style-light .slideshow_next {background-position: -23px 0;}
    #sidebar .slideshow_container_style-light .slideshow_transparent,
    #sidebar .slideshow_container_style-light .slideshow_transparent:hover
    {padding-bottom:0;/* 10px; */opacity: 0.8!important;}
    #sidebar .slideshow_description h2 {padding-bottom: 0; padding-top: 5px;}
    #sidebar .slideshow_description h2 a {color: #3daaaa;}
    #sidebar .slideshow_description {width: 245px;}
    #sidebar .slideshow_description p {font-size: 12px; line-height: 1.25; padding-top:0; margin-bottom: 0;/*5px;*/}
    #sidebar .slideshow_description p,
    #sidebar .slideshow_description p a {color: #fff; text-decoration: none; }

  6. TimothyDalton
    Posted 3 years ago #

    MissKitty, this works perfectly. Thanks a bunch, big big help. Cheers from Australia, //Tim

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Slideshow
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic