Support

Account

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

Helping

Write CSS with PHP and Flexible Content

    • nayce

    • 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.

  • 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.

We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Cookie Policy. If you continue to use this site, you consent to our use of cookies.