Write CSS with PHP and Flexible Content

• tischlr

• March 10, 2020 at 7:57 pm

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.

• speakincode

• March 21, 2020 at 5:01 am

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 }