
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 }