I'm using WordPress with ACF, and I need to use a value of custom fields for CSS. For example, if the value of ACF 'Name' is YES, then CSS style just background around that field, if the value of the field is NO, then the background will be red.
I think you can easily fix it by if condition. It has value then shows green color otherwise shows red color. you need to replace the CSS class name.
<?php
// Get field data
$data = get_field('wifi');
if( 'yes' == $data ){
?>
<style>
.entry-title{
color: green;
}
</style>
<?php
}else{
?>
<style>
.entry-title{
color: red;
}
</style>
<?php
}
?>
Field: https://prnt.sc/cWvtiZia1KCm
Green value: https://prnt.sc/ZO_4N_ob6J7h
Red value: https://prnt.sc/ApikklLCEhhz
I would do it via classes.
Supposing "WiFi" is a "True/False" custom field:
.no_wifi {
background-color: red;
}
.wifi {
background-color: green;
}
<?php
$class_to_add = 'no_wifi';
if (get_field('WiFi')) {
$class_to_add = "wifi";
}
?>
<div class="<?php echo $class_to_add; ?>">
...
</div>
Related
I have a theme for my project. From the diagram, I want to change the color of Download to red, but the parent callout-info overrides it.
and the css of the theme
.callout code,
.callout .highlight {
background-color: #fff;
}
.callout.callout-danger {
border-color: #c23321;
}
.callout.callout-warning {
border-color: #c87f0a;
}
.callout.callout-info {
border-color: #0097bc;
}
.callout.callout-success {
border-color: #00733e;
}
and my view
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="callout callout-info">
<h4><?php echo Yii::t('app', 'You must have to follow the following instruction at the time of importing data'); ?></h4>
<ol>
<li><b><?php echo Yii::t('app', 'The field with red color are the required field cannot be blank.'); ?></b></li>
<li><?php echo Yii::t('app', 'The file must be CSV format.'); ?></li>
</ol>
<h5><?php echo Yii::t('app', 'Download the sample format of Excel sheet.'); ?> <b><?= Html::a(Yii::t('app', 'Download'), ['download-file', 'id' => 'SSF']) ?></b></h5>
</div><!--./callout-->
</div><!--./col-->
</div><!--./row-->
I have extracted my concern out here, from the css above
So, how do I make Download to be red in color without the parent
border-color
callout-info overriding the color
What exactly do you mean by saying without the parent callout-info overriding the color? If I misunderstood, please correct me.
Your given style doesn't work on a link since there is no a tag in there (you can confirm this by temporarily removing your <style>). You can override color in at least 2 ways:
-- Inserting in <style> new rule:
.callout.callout-info a {
color: #ff0000;
}
-- Inserting third parameter in Html::a:
Html::a(Yii::t('app', 'Download'), ['download-file', 'id' => 'SSF'], ['style' => 'color: #ff0000']);
P.S. I also see you added css3 tag, so this one will work too (assuming you have a compiler):
.callout.callout-info {
border-color: #c87f0a;
& a {
color: #ff0000;
}
}
I combined a slider with the repeater fields.
under the repeater I have 2 subfields. one called “image” and the other “title”
this slider has a class called “selected-item” that dynamically appear when an image is selected. (when this class is on an image the image change it’s size).
How can I define that when the class “selected-item” is on some image also the “title” form the same row of the image will appear?
this is the code the displays the images:
<?php
// check if the repeater field has rows of data
$i = 1;
if( have_rows('carousel_images') ):
// loop through the rows use_cases_fields data
while ( have_rows('carousel_images') ) : the_row();
$title=get_sub_field('image_carousel_discription');
$image = get_sub_field('image_carousel1');
if( !empty($image) ):
// vars
// thumbnail
$thumb = $image;
$i++;
?>
<h1 data-row="< echo $i; >"> <?php echo $title ?> </h1>
<li> <img data-row="< echo $i; >" src="<?php echo $thumb ?>"/> </li>
<?php endif; ?>
<?php
endwhile;
endif;
?>
?>
Keep the title hidden in the beginning and then show the title when selected-item class is applied. If h1 is going to be always next to the image tag then use the + selector.
h1 { display: none; }
.selected-item + h1 { display: block; }
Or you can detect a class change event using jquery.
function checkForChanges()
{
if ($('img').hasClass('selected-item'))
$('h1').css('display','block');
else
setTimeout(checkForChanges, 500);
}
checkForChanges();
$("#click").on('click', function(){
$('img').addClass("selected-item");
});
h1 { display: none; } /* Keep the title hidden in the beginning */
/* Show the title when selected-item class is applied */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://via.placeholder.com/100x100" width="100" height="100">
<h1>title</h1>
<div id="click">click me</div>
I am using Advanced Custom Fields to display a background image in my header. Now I want to display a default image if there is no ACF-image defined. I tried this code, but it didn't work (image only shows if it is set):
<?php wp_head(); ?>
<?php if(get_field('header')) {
$image = get_field('header');
} else {
$image = '<img src="#absolute-path-to-my-image">';
}
?>
<style type="text/css">
#inner-header{
background-image: url('<?php echo $image['url']; ?>');
background-position:center;
background-repeat:no-repeat;
background-size:cover;
}
</style>
thanks for any help.
I'd change things up a bit. You're experiencing problems because you're passing an image element in if there's no 'header' present (you should only be passing the src):
<?php
// Get the field
$image = get_field('header');
// Does the field exist ? src : default
$image_src = $image ? $image['url'] : 'http://example.com/default/src.jpg';
?>
<style>
#inner-header {
background: url(<?php echo $image_src; ?>) center / cover no-repeat;
}
</style>
I'm using a lightbox plugin the uses rel="lightbox" to fire the lightbox in a gallery I'm creating using the Advanced Custom Fields pluin. All works great until I want to add a child div that is absolutely positioned in the box div. It's supposed to change opacity on hover and still have the lightbox fire.
My markup
<?php if(get_field('image')):
$attachment_id = get_field('image');
$size = "full";
$image = wp_get_attachment_image_src( $attachment_id, $size );
$alt = get_post_meta($attachment->ID, '_wp_attachment_image_alt', true);
$image_title = $attachment->post_title;
$caption = $attachment->post_excerpt;
?>
<?php echo wp_get_attachment_image( $attachment_id, medium); ?>
<div class="hover-title">
<?php the_field('hover_title');?>
</div><!-- hover title -->
<?php endif; ?>
</div><!-- box -->
If I simply remove the "hover-title" lightbox works. But I want to use that :)
my css:
.box a {
margin:5px;
float:left;
position: relative;
overflow: hidden;
opacity: 1;
display: block;
}
is that the full code. if so then you are missing an opening <div>.
fyi your first two lines should read
$attachment_id = get_field('image');
if ( $attachment_id ) {
}
no need to call get_field() twice, it is a database call after all.
Good Luck
Hi all I'm trying to create a mobile site for a website I've already created and am using in file css.
i am trying to make the input boxes 10% of the screen height. how can I do this?
how can I make the login button taller?
here is the code from the view file
<?php echo $this->Html->docType('xhtml-trans'); ?>
<html>
<head>
<style>
body {
background-color:#ADD8E6;
height: 960px;
width: 640px;
}
table, td, th
{
background-color: #ADD8E6;
}
input
{
height:233%;
width:70%;
}
</style>
<title> <?php echo $title_for_layout; ?></title>
<?php echo $this->Html->css($stylesheet_used); ?>
</head>
<body>
<div id = "headertwo" style="background-image:url(<?php echo $this->webroot; ?>img/BannerGradient2.jpg);">
<center>
<?php echo $this->Html->image($image_used, array(
"alt" => "eBox",
'url' => array('controller' => 'Users', 'action' => 'login'))) ?>
</center>
</div>
<?php echo $this->Form->create('User', array('url' => array('controller' => 'users', 'action' => 'login')));?>
<table border=0 style="width:640px;">
<tr>
<td >Username:
<?php echo $this->Form->input('username',array('label'=>false,));?></td>
</tr>
<tr>
<td>Password: <?php echo $this->Form->input('password',array('label'=>false,));?></td>
</tr>
</table>
<?php echo $this->Form->end('Login', array('width'=>100));?>
</div>
</body>
</html>
user1393064,
You're using XHTML Doctype rightnow which is not good practice now a days to achieve good result in Targeted Mobile Device.
Instead I recommend you to try HTML5 Doctype, like below...
<!DOCTYPE html>
Additionally for Mobile support you need to add Viewport Meta
<meta name ="viewport" content ="initial-scale = 1.0, user-scalable = no">
Then you define your CSS for INPUT
input { /* put your code here */ }
input#submit { /* put your style here */ }
I also suggest you to use CSS Media Query for your targeted Mobile Device & Screen.
#media screen and (max-width: 640px){
body{ /* put your style here */ }
form{ /* put your style here */ }
input{ /* put your style here */ }
input#submit{ /* put your style here */ }
}
For further help you can refer to this article http://www.yourinspirationweb.com/en/tips-tricks-how-to-optimize-a-website-for-mobile-devices/
1.
input
{
font-size:200%;
width:70%;
}
did not think about including the font-size in the input as I didn't think of it as text, duhhh