CHANGE FONT-SIZE AND COLOR

• joga

• November 20, 2013 at 12:53 pm

I’m trying to change the color and font-size but it does not allow me to do it. How it can be done?

Everything else works (float, background-color, width, etc)
here is part of my markup:

<?php if(get_field('ls')): ?>
<div class="ls">
    <ul class="lsProgram">
	<?php while(has_sub_field('ls')): ?>
        <li class="program"><?php the_sub_field('program'); ?></li>
    </ul>
	<ul class="holdtime">
		<?php if( get_sub_field('time') ): ?>
			<?php while(has_sub_field('time')): ?>
		<li class="time"><?php the_sub_field('time_one'); ?></li>
			<?php endwhile; ?>
		<?php endif; ?>
	</ul>
	<ul class="holddescription">
		<?php if( get_sub_field('description') ): ?>
			<?php while(has_sub_field('description')): ?>
		<li class="description"><?php the_sub_field('description_one'); ?></li>
			<?php endwhile; ?>
		<?php endif; ?>
	</ul>
	<ul class="holdothers">
		<?php if( get_sub_field('others') ): ?>
			<?php while(has_sub_field('others')): ?>
		<li class="others"><?php the_sub_field('others_one'); ?></li>
			<?php endwhile; ?>
		<?php endif; ?>
	</ul>    
	<?php endwhile; ?>
<?php endif; ?>
</div> <!-- end LS -->

THANKS

• Elliot

• November 22, 2013 at 9:24 am

Hi @joga

Changing the font color and font size is done through CSS rules.
CSS is a basic and fundamental part of HTML web design and is not part of the ACF plugin.

I can see from your code that you understand how to create elements such as ul and div with classes.

Your CSS can use these classes to apply styles.

• harryadf

• December 3, 2013 at 9:24 pm

Hello!
I thought I’d give you an example of CSS as this is what helped me understand it when I was learning.

If you wanted to set the CSS for your ‘ls’ div you would go to your style.css file and add this to it

.ls {
font-size: large;
color: red;
}

This would then change the font size and colour of all text inside the divs and sub divs.
If you wanted to be more specific you can call down the ul/li/a/img etc like so;

.ls ul li {
font-size: large;
color: red;
}

This would then only change the styles of your program field.

Sorry if you already knew all this but I thought it might be useful if not.

Thanks, Harry.