How to change the radius on single column within a columns block.

  • Resolved care2michelle

    (@care2michelle)


    1 year, 8 months ago

    I’m using WordPress 2022 theme. I can change the radius on columns without any trouble. However, if I have 3 inner columns embedded within a column, I cannot change the radius on the border of the inner columns, only the outer column. There is no option in the styles editor for radius in a single column within a columns block.

    I’m trying to highlight the inner columns to make it more readable, and having a border makes a nice distinction. But all my other radius numbers are 15, so the corners are rounded, but I don’t have that styling option for the inner columns. I’ve tried adding css, but it’s not changing anything, so I’m clearly doing something wrong.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Do you have a link to a *public* page where we can see this?

    Thread Starter care2michelle

    (@care2michelle)

    unfortunately, I do not. The site is password protected by my company. Here’s a link to a screenshot.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Sorry, I can’t inspect and test new CSS without a working page.

    Thread Starter care2michelle

    (@care2michelle)

    Is there no way to change it without css?

    I barely know anything about css, so I usually just search to find what someone else is doing. Here’s the css I’m using: 

    // Add a custom CSS class to the columns block containing the column you want to style
    add_filter( 'render_block_data', 'cwpai_add_custom_css_class_to_columns_block', 10, 2 );
    function cwpai_add_custom_css_class_to_columns_block( $block_data, $block ) {
    if ( $block['blockName'] === 'core/columns' && ! empty( $block['innerBlocks'] ) ) {
    foreach ( $block['innerBlocks'] as $inner_block ) {
    if ( $inner_block['blockName'] === 'core/column' ) {
    // Add a custom CSS class to the column block
    $block_data['attrs']['className'] .= ' cwpai-custom-columns-block';
    break;
    }
    }
    }
    return $block_data;
    }

// Add custom CSS to the header of the website
    add_action( 'wp_enqueue_scripts', 'cwpai_add_custom_css_to_header' );
    function cwpai_add_custom_css_to_header() {
    if ( is_singular() && has_block( 'core/columns' ) ) {
    ob_start();
    ?>

    <?php
    $custom_css = ob_get_clean();
    wp_add_inline_style( 'wp-block-library', $custom_css );
    }
    }
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    I’m not sure why you pasted that code. Anyhow, without a page to inspect, I cannot suggest CSS.

    Thread Starter care2michelle

    (@care2michelle)

    I have temporarily removed the password lock. You can access the site here.

    Thread Starter care2michelle

    (@care2michelle)

    I changed the css and it does seem to be working now. I’ll close the thread.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to change the radius on single column within a columns block.’ is closed to new replies.