WordPress.org

Ready to get started?Download WordPress

Forums

Recent Posts FlexSlider
[resolved] Customize (12 posts)

  1. YogieAnamCara
    Member
    Posted 1 year ago #

    Hi,

    this is the first recent post slider that is looking great and having a responsive interface. Anyhow I like to change the layout.

    I would like to change the font size, style and alignment. I would also like to make the image be a thumbnail showing left to the title and excerpt etc....

    May I kindly ask you to let us know if this is already doable via CSS or do you consider to include any enhanced setting options in the future to achieve such a layout or to change at least some parts of the slider?

    What I try to achieve is to get a recent post slider for my header, so I need a layout that is somehow condensed to about a 110px height.

    Many thanks and cheers
    Yogie

    http://wordpress.org/extend/plugins/recent-posts-flexslider/

  2. YogieAnamCara
    Member
    Posted 1 year ago #

    To be honest, I could not wait for any answer :)
    I played around and have done this to my CSS

    .flexslider-caption-inner h3 { font-size: 12px; text-align: left;margin-left: 150px;}
    .flexslider-caption-inner p { font-size: 11px; text-align: left; }
    .flexslider-caption { padding-left: 150px; background-color: transparent !important; color: #cccccc !important; }
    .flexslider .slides img { width: 150px !important; }

    still needs a bit fine tuning but it is a start and shows that it is possible ;D

    Cheers
    Yogie

  3. David Laietta
    Member
    Plugin Author

    Posted 1 year ago #

    Hi Yogie,

    I'll clean up the CSS a bit and include a few tips in the documentation for the next update. Thanks for testing and for using the plugin!

  4. YogieAnamCara
    Member
    Posted 1 year ago #

    Actually I like to have the layout looking like this:

    See this image

  5. christopherbeck
    Member
    Posted 11 months ago #

    Hi David,

    Great Plugin!

    Is there a way to remove the links from the slider images.

    Regards,

    Chris.

  6. David Laietta
    Member
    Plugin Author

    Posted 11 months ago #

    Hi Chris,

    Thanks for the positive feedback! Currently there is not, but I'm going to push a new plugin soon that incorporates the suggested features that I've gotten, to avoid bloating this one with options. While these things are generally easy to incorporate, I want to keep the plugin itself lightweight and make a more advanced version for those who need more features.

    Thanks,
    David

  7. pac918
    Member
    Posted 11 months ago #

    Where might I find the Post Title font information? I just want it to show up a little more by either changing the opacity if its pulling that or change the color of the title font to white.

  8. David Laietta
    Member
    Plugin Author

    Posted 10 months ago #

    The font is white for the post title by default, but the caption has an opacity of 0.8 set. This is the relevant code in the slider:

    .flexslider-caption {
    position: relative;
    bottom: 90px;
    height: 90px;
    background: rgba(0,0,0,0.8);
    color: #FFFFFF;
    }

    I would change background to rgba(0,0,0,1); in your theme to get it to be fully opaque and have the font be white. Set this in your stylesheet:

    .flexslider-caption {
    background: rgba(0,0,0,1);
    }

    Thanks,
    David

  9. ondoheer
    Member
    Posted 7 months ago #

    Hello David, I'm working with your great plugin atm but I'm finding two problems I don't seem to know how to solve:

    I can maybe change stuff in the main plugin PHP file if I need to, but I really don't know if I do.

    1) I need to make the whole slider round, and It works except for the overflow, it just keeps showing a sqared post content even though every single container inside of it is set to Border-radius 50% and overflow hidden.

    2) Somehow it is showing a logo img of one of the posts as it's main img but not for the others, I first thought it only accepted .JPG, but then I changed one of the PNG's and nothing showed either.

    3) Last, and this is were I might need to mess around the PHP, I would like for it to show a specific post IMG that the client will upload for that post, not every img just that one.

    I can show you what im working on here:
    http://www.diiid.org/wp_site/

    Thanks!

  10. David Laietta
    Member
    Plugin Author

    Posted 7 months ago #

    I've responded to ondoheer via email, but in case anyone else is interested:

    1 - To make the images round, you'll need to make several changes to .flexslider .slides img The first is that they can't be absolutely positioned, so you have to remove that. If you are editing in a child theme just set them to position: relative. You also need to control the width and height of the images themselves to be square, then add the border-radius onto them.

    2 & 3 - The image chosen for the slider is first the featured image. If none is selected, then the slider looks for the first attachment on the post and uses that. I'm not sure how your images are being inserted, but they may for some reason not be chosen. I would set a featured image of what you want to display, to guarantee that it is what shows.

    Thanks,
    David

  11. rwandawire
    Member
    Posted 7 months ago #

    Hi David,

    Thanks for your help. Great plug-in.

    I tried following your instructions above to make the caption tittle text more visible. But it didn't seem to change it.

    When I choose the option to show a bit of content, it is very white and visible. But when I choose the Title option, the text translucent

    So it looks like this now:
    .flexslider-caption {
    position: relative;
    bottom: 90px;
    height: 90px;
    background: rgba(0,0,0,1);
    color: #FFFFFF;
    }

    Is there something else I could change?

    Cheers, Steve

  12. David Laietta
    Member
    Plugin Author

    Posted 7 months ago #

    Hi Steve,

    There is an H3 inside of that div, which you would want to set the color on:

    .flexslider-caption-inner h3 {
    color: #FFFFFF;
    }

    Thanks,
    David

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic