WordPress.org

Forums

Recent Posts FlexSlider
[resolved] Placing caption at top (4 posts)

  1. gordon.cunningham
    Member
    Posted 1 year ago #

    I can move the caption to the top of the flexslider div, but I can't find a way to move the image down below it. What am I missing? Unfortunately the site is in development and I don't have a public link for it. Here's the CSS (without the caption at top):

    /*
     * jQuery FlexSlider v2.2.0
     * http://www.woothemes.com/flexslider/
     *
     * Copyright 2012 WooThemes
     * Free to use under the GPLv2 license.
     * http://www.gnu.org/licenses/gpl-2.0.html
     *
     * Contributing author: Tyler Smith (@mbmufffin)
     */
    
    /* Browser Resets
    *********************************/
    .flex-container a:active,
    .flexslider a:active,
    .flex-container a:focus,
    .flexslider a:focus {outline: none;}
    .slides,
    .flex-control-nav,
    .flex-direction-nav {margin: 0; padding: 0; list-style: none;}
    
    /* FlexSlider Necessary Styles
    *********************************/
    .flexslider {margin: 0; padding: 0;}
    .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden; margin: auto;} /* Hide the slides before the JS is loaded. Avoids image jumping */
    .flexslider .slides img {width: 100%; height: auto; display: block;}
    .flex-pauseplay span {text-transform: capitalize;}
    
    /* Clearfix for the .slides element */
    .slides:after {content: "020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
    html[xmlns] .slides {display: block;}
    * html .slides {height: 1%;}
    
    /* No JavaScript Fallback */
    /* If you are not using another script, such as Modernizr, make sure you
     * include js that eliminates this class on page load */
    .no-js .slides > li:first-child {display: block;}
    
    /* FlexSlider Default Theme
    *********************************/
    .flexslider {margin: 0 0 60px; position: relative; zoom: 1;}
    .flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease;}
    .loading .flex-viewport {max-height: 300px;}
    .flexslider .slides {zoom: 1;}
    .carousel li {margin-right: 5px;}
    
    /* Direction Nav */
    .flex-direction-nav {*height: 0;}
    .flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url('../images/bg_direction_nav.png') no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;}
    .flex-direction-nav .flex-next {background-position: 100% 0; right: -36px;}
    .flex-direction-nav .flex-prev {left: -36px;}
    .flexslider:hover .flex-prev {opacity: 0.7; left: 10px;}
    .flexslider:hover .flex-next {opacity: 0.7; right: 10px;}
    .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
    .flex-direction-nav .flex-disabled {opacity: 0!important; filter:alpha(opacity=0); cursor: default;}
    
    /* Pause/Play */
    .flex-pauseplay a {display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000;}
    .flex-pauseplay a:hover  {opacity: 1;}
    
    /* Control Nav */
    .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;}
    .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;}
    .flex-control-paging li a {width: 10px; height: 10px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3);}
    .flex-control-paging li a:hover {background: #333; background: rgba(0,0,0,0.7);}
    .flex-control-paging li a.flex-active {background: #000; background: rgba(0,0,0,0.9); cursor: default;}
    
    .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
    .flex-control-thumbs li {width: 25%; float: left; margin: 0;}
    .flex-control-thumbs img {width: 100%; display: block; opacity: 0.7; cursor: pointer;}
    .flex-control-thumbs img:hover {opacity: 1;}
    .flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
    
    /* Caption Styles */
    
    .flexslider-caption {position: relative; bottom: 90px; height: 90px; /* background: rgba(68, 146, 199, 1); */ color: #FFFFFF;}
    .flexslider-caption:before {content: ''; display: inline-block; height: 100%; vertical-align: middle;}
    .flexslider-caption-inner {margin: 0; padding: 0 10px; display: inline-block; vertical-align: middle; text-align:left;}
    .flexslider-caption-inner h3,
    .flexslider-caption-inner p {margin: 0;}
    .flexslider-caption-inner h3 {font-size: 1.6em;}
    .flexslider a {text-decoration: none;}
    
    @media screen and (max-width: 860px) {
      .flex-direction-nav .flex-prev {opacity: 1; left: 10px;}
      .flex-direction-nav .flex-next {opacity: 1; right: 10px;}
    }

    https://wordpress.org/plugins/recent-posts-flexslider/

  2. David Laietta
    Member
    Plugin Author

    Posted 11 months ago #

    Not seeing the site, I can't give you an exact answer, but I can give you an idea of where to look.

    .flexslider-caption {position: relative; bottom: 90px; height: 90px; /* background: rgba(68, 146, 199, 1); */ color: #FFFFFF;}

    That is telling the caption box to be 90px tall, and pushed up 90px from the bottom of the slide. You may need to reposition the slide itself, or set the slide to absolute positioning and the caption to be positioned at the top of the slide.

  3. gordon.cunningham
    Member
    Posted 11 months ago #

    Yes, I understand how the caption box parameters work. Using absolute positioning throws off the entire site responsive formatting so that is not an option.

    At this point I'm thinking this cannot be done in CSS, as the two div's are in the wrong dependency order for top caption. That is, the caption box is dependent on the image div, and I want the opposite. I'll have to change it in the HTML/PHP code. Any pointers as to where to find this in the plugin code?

    Thanks.

  4. David Laietta
    Member
    Plugin Author

    Posted 11 months ago #

    The code is being generated in the file:
    recent-posts-flexslider/views/display.php

    And the code for the image is on lines 38-40 and the caption and title are lines 43-52

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Recent Posts FlexSlider
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic

Tags

No tags yet.