Support

Account

Home Forums Add-ons Flexible Content Field Write CSS with PHP and Flexible Content

Helping

Write CSS with PHP and Flexible Content

  • Hello,

    first, sorry for my english. I’m not a native speaker but i hoppe you can understand what i want.

    The Case:
    I’m building a little Pagebuilder with ACF Flexible Content. I have a Hero or Mainteaser Section. There you can chosse a backgroundimage, colors etc.
    I have a custom-style.php where i want to write the custom css. After saving a post/page it generates a new .css file where the styles are in.

    Here is my custom-style.php:

    <?php if( have_rows('pagebuilder') ): ?>
        <?php while( have_rows('pagebuilder') ): the_row(); ?>
    
    		<?php if( get_row_layout() == 'page_mainteaser' ): ?>
    
    /* Site-Mainteaser */
    
    #mainteaser-<?php the_ID(); ?> {
    	background-image: url('<?php the_sub_field('background'); ?>');
    }
    
    #mainteaser-<?php the_ID(); ?> h1 {
    	color: <?php echo the_sub_field('color_headline'); ?>;
    }
    
    #mainteaser-<?php the_ID(); ?> p {
    	color: <?php the_sub_field('color_text'); ?>;
    }
    
    		<?php endif; ?>
        <?php endwhile; ?>
    <?php endif; ?>

    This works great for one page/post, but if i save another page, the css is overwritten. I know why. So i’m looking for a function, that creates the (mainteaser) css blocks for every new or updated page. I’m not the greatest PHP Guru, so i hope, anyone here has the breaking answer for me. Thanks a lot.

  • I’m sorry if this isn’t answering your question directly, but for things like this, wouldn’t it be simpler to just assign a class to the layout and then style that class appropriately?

    For instance:

    
    <?php if( have_rows('pagebuilder') ): ?>
      <?php while( have_rows('pagebuilder') ): the_row(); ?>
        <?php if( get_row_layout() == 'page_mainteaser' ): ?>
    
        /* Site-Mainteaser */
    
        // I made these attributes multiline to read easier on these forums
        <div id="mainteaser" 
             style="background-image: url('<?php the_sub_field('background'); ?>')"
             class="headline-<?php the_sub_field('color_headline'); ?> 
                    text-<?php the_sub_field('color_text'); ?>" 
        >
          <!-- Layout content here... -->	
        </div>
    
        <?php endif; ?>
      <?php endwhile; ?>
    <?php endif; ?>

    Then in your stylesheet add corresponding styles like:

    .headline-red h1 { color: red }
    .headline-blue h1 { color: blue }
    .headline-green h1 { color: green }
    
    .text-black p { color: black}
    .text-white p { color: white }
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.