• I run two websites that use Virtue theme. Recently, image captions on both sites changed from centered to left-aligned. (it might be images and captions both, but it’s the captions that are obvious) I can force the captions to align with css, but then we can’t choose to right-align in cases where that would look better.
    I disabled all plugins and it didn’t help. When I switched to theme 2022, even with all plugins active, the captions aligned to center. Activating Virtue-child again moves captions back to the left. Both generic Image block and Kadence Advanced Image Block have this same alignment problem. I’ve searched my few tiny custom code files and css file for anything affecting alignment, and found no suspects.
    Thank you,
    Kathy

    The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hey, thanks for reaching out and apologies for the delay in response.

    What kind of changes have you made to your child theme? Have you tried testing the captions when you activate Virtue Parent theme?

    If you haven’t tried that, please do and let us know if the same thing happens.

    Thanks,
    Kevin

    Thread Starter kengholm

    (@kengholm)

    Thanks for getting back to me on this.
    – Captions are left-aligned even when using Virtue Parent theme.
    – Custom functions are limited to unsetting a bunch of Woo fields in the Checkout form.
    – CSS is minimal, mostly stuff for specific items and locations. I can’t find anything that should affect alignment of captions on Posts and Archives such as here: https://www.haitiapgrandi.org/category/agronomy/

    There is this, which ended up centering all captions in the main content area of the home page, but not on other pages:
    /*Center captions for Our Key Iniatives on Home page*/
    .homecontent .wp-block-columns figcaption {
    text-align: center;
    }

    Here is the entire css file below in case you want to see it:
    ……………………………………………………….

    /*Improve spacing for Headers and Paragraphs*/
    h2 {
    	margin: 4px, 0, 20px;
    }
    
    /*Center captions for Our Key Iniatives on Home page*/
    .homecontent .wp-block-columns figcaption {
    	text-align: center;
    }
    
    /*Set font size for text at bottom of page (about our charity) */
    .footercredits p {
    	font-size: 14px;
    	text-align: left;
    }
    
    /*Set font and alignment for the sidebar link to our Privacy Policy page */
    .privacy {
    	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    	text-align: left;
    }
    
    /*Set font for post titles in Latest Posts block*/
    .wp-block-latest-posts li > a {
    	font-size: 36px;
    	line-height: 36px;
    	font-weight: 700;
    	margin-top: 1em;
    	margin-bottom: 4px;
    		/*text-decoration: underline;*/
    }
    
    /*Set font sizes and boldness for drop-down sub-menu items. Main menu items are styled
    * in the Theme Options panel.*/
    #nav-main ul li .sf-dropdown-menu li a {
    	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    	font-size: 14px;
    	font-weight: 600;
    }
    
    /*Style web links*/
    #content a:link {
      text-decoration: underline;
    }
    
    #content a:visited {
      text-decoration: underline;
    }
    
    #content a:hover {
      text-decoration: underline;
    }
    
    #content a:active {
      text-decoration: underline;
    }
    
    /*Style the Category Filters*/
    .hapg-category-filter .cat-item,
    .hapg-category-filter .cat-item-all {
        display: list-item;
        list-style-type: square;
    }
    
    /*Adjust positioning of the Donate buttons so they are horizontally centered and not too
    * close to items above or below. */
    .loan-button {
    	margin-bottom: 5rem;
    }
    
    /*Tidy up how the PayPal Donate button is displayed*/
    div.donate-button {
    	position: relative;
    	padding-bottom: 4rem;
    	padding-top: 1rem;
    }
    div.donate-button form {
    	margin: 0;
    	position: absolute;
    	left: 50%;
        margin-right: -50%;
    	transform: translate(-50%, -50%);
    }
    
    div.donate-loan {
    	position: relative 
    }
    div.donate-loan form {
    	margin: 0;
    	position: absolute;
    	margin-top: 3rem;
    	left: 50%;
        margin-right: -50%;
    	transform: translate(-50%, -50%);
    }
    hannah

    (@hannahritner)

    Hi @kengholm,
    Try changing your css to this:

    figcaption {
        text-align: center;
    }

    Does that work as you’re wanting?

    Kindly,
    Hannah

    Thread Starter kengholm

    (@kengholm)

    Hello Hannah,
    Forcing all captions to center is not a solution for us. The standard WP Image Block has a control for selecting left, center, or right alignment. My clients for their website and I for my website want this control to work so we can choose the appropriate alignment for captions depending on a page or post’s design.
    When I switch to a different theme (2022), the alignment control for the Image Block works properly. It is only when I revert to Virtue or Virtue-Child that the captions (and probably the images themselves) are forced to the left. Virtue-child has no php or css to affect images or captions on pages other than Home.
    Thank you,
    Kathy

    hannah

    (@hannahritner)

    Hey Kathy,
    Thanks you for the detail. I’ll forward this to the developer and see if he has any insight.
    Thanks for your patience!

    Kindly,
    Hannah

    Hey,
    you can add this css:

    .wp-block-image .aligncenter {
        text-align: center;
    }

    That would make it so only when you align the image center do the captions also align center.

    Ben

    Thread Starter kengholm

    (@kengholm)

    Thank you, Ben! That looks like a good patch for now. I’ll try it soon and probably do similar for .alignright, etc.
    I still hope that in the future, the Virtue theme stops aligning captions to the left.
    Kathy

    How about centered captions in Advanced Images because the images themselves can’t be centered?

    Hey there,

    Can you please share a link to your site so that we can see how you’ve set this up?

    Please start a new thread for each support question you have in the future, and include a link to the site that you’re working on in each support thread.

    Best,
    Kevin

    Thread Starter kengholm

    (@kengholm)

    Hello Kevin,
    Responding to your requests:
    1) Link to a site using my patch to make captions align based on the image’s alignment setting: (note that the people who do the content are using an apparently random mix of caption alignments) https://www.pnwglassguild.org/the-glass-arts/

    2) Here’s the patch in that sites’ Appearance > Customize > Additional CSS:

    .wp-block-image .aligncenter {
    text-align: center;
    }
    .wp-block-image .alignright {
    text-align: right;
    }
    .wp-block-image .alignleft {
    text-align: left;
    }
    .wp-block-image .alignfull {
    text-align: full;
    }
    .wp-block-image .alignwide {
    text-align: wide;
    }

    That does the job, but I put it into Additional CSS because I’m hoping it’s only a temporary patch. Unfortunately, when I deleted those lines just now, the captions still revert to left-aligned, so I have to keep the patch for that site.
    On another site, I can remove the css patch for a few weeks so you can see the incorrectly left-aligned captions on this page: https://www.haitiapgrandi.org/all-news-posts/

    3) Just to restate my issue: Only when using Virtue theme or a Virtue-Child theme are captions forced to left alignment. With Theme 2022 enabled, caption alignment works fine. My own little css file is pasted into an earlier post in this thread and it doesn’t mess with alignment anywhere but on the Home page, which is why I provided a link to the blog page instead.

    4) I didn’t ask a second question in this thread. My posts are entirely about being able to control caption alignment for the basic Image block. I don’t know who com800 is.
    Thanks,
    Kathy

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Image Captions always Left Aligned’ is closed to new replies.