• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Parallax Pro Pull Images and Captions

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Parallax Pro Pull Images and Captions

This topic is: not resolved

Tagged: parallax-pro, pull images

  • This topic has 5 replies, 3 voices, and was last updated 3 years, 7 months ago by auntialias.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 21, 2017 at 3:17 pm #206810
    davidsharpe
    Participant

    Parallax Pro has these great "Pull Images" that break the margin of the page, but if you add a caption it doesn't follow the negative margins and the caption ends up on the left or right of the image.

    Is there a workaround for this that doesn't involve adding code via the text editor? I'm setting this up for a client and adding pull-left or pull-right to the Image editor is easy enough, but trying to avoid asking them to use the text editor.

    May 22, 2017 at 7:57 am #206837
    Victor Font
    Moderator

    Please link to a page on your site with the problem.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    May 22, 2017 at 11:15 am #206841
    davidsharpe
    Participant

    Blog Post Title 1

    May 22, 2017 at 2:44 pm #206844
    Victor Font
    Moderator

    You have custom CSS that overrides the theme's CSS. If you edit gppro-custom-1.css you can move the caption over:

    body.gppro-custom .entry-content .wp-caption-text {
        font-family: "Crimson Text",serif;
        font-size: 24px;
        float: left;
        margin: 0 40px 40px -200px;
    }

    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    May 23, 2017 at 5:31 am #206845
    davidsharpe
    Participant

    The theme's CSS doesn't address captions in an image with pull-left or pull-right applied. Even the default theme doesn't move the caption with the image. The first image here has a caption, https://testkitchen.davesharpe.com/parallax-pro/2014/01/01/threaded-comments/, and it's in the middle of the page.

    It seems the theme wasn't designed so that pulled images can have captions, unless custom CSS is added and then a class applied to the caption shortcode via the text editor. That's fine for me, but I was looking for an option that's easy for the client. At least as easy as pulling the images left or right.

    Thanks for your help.

    August 21, 2019 at 12:41 pm #493080
    auntialias
    Member

    I know this is an old topic, but having just solved it, I'd like to share my solution as a way to pay it forward.

    It's based on a discussion with a solution by Victor Font (see post for full explanation of Victor Font's solution:

    .full-width-content img.pull-left,
    .full-width-content figure.pull-left img {
    	float: left;
    	margin: 0 40px 40px -200px;
    }
    
    .full-width-content img.pull-left,
    .full-width-content figure.pull-right img {
    	float: right;
    	margin: 0 -200px 40px 40px;
    }

    Victor's solution works when WordPress adds the custom style to the FIGURE element. But in the site I'm working on, when I selected the image block and applied the custom style pull-left to it, the style was applied to the DIV that contained the FIGURE. The styling would not apply.

    The DIV already has a class of wp-block-image. I applied the styling to a div with a class of both wp-block-image AND pull-left, and wrote it like so:

    .full-width-content .wp-block-image.pull-left

    I added this as a third class to this section of CSS code:

    .full-width-content img.pull-left,
    .full-width-content figure.pull-left img,
    .full-width-content .wp-block-image.pull-left {
    	float: left;
    	margin: 0 40px 40px -200px;
    }
    
    .full-width-content img.pull-left,
    .full-width-content figure.pull-right img,
    .full-width-content .wp-block-image.pull-right  {
    	float: right;
    	margin: 0 -200px 40px 40px;
    }
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble