I need to update the css according to section_name. If section is Featured css would be right:0 and if section_name is Latest the css would be left:0 How can I inject a piece of php into css ?
<img src="square-009.jpg" style="width:300px; height:355px; position: fixed; z-index:9; right:0;" />
The section_name variable is already defined and it is working as
<?php echo $section['section_name']; ?>
Just use classes:
.Featured {
width:300px;
height:355px;
position:fixed;
z-index:9;
right:0;
}
.Latest {
width:300px;
height:355px;
position:fixed;
z-index:9;
left:0;
}
And then just populate the class dynamically:
<img src="square-009.jpg" class="<?php echo $section['section_name']; ?>" />
Related
I am having troubles to transfer my calculated php variable (which gives an output form -90 --> 90) to my css bar class (for a gauge). All the code is defined in the same php file
I want to do it with te following :
.bar { position: absolute; width: 50%; height: 100%; background-color: var(--black); transform: rotate(<?php echo $degree; ?>deg)>;
Tis is inside the style element. The value of degree is calculated below the style element inside a p element.
Could anybody help me
If you truly are "calculating it below", then CSS custom properties still work perfectly with this, you just use the value in your style, optionally with a default value, and then set the custom property value in the style attribute on the tag itself:
<style>
.bar {
position: absolute;
width: 50%;
height: 100%;
transform: rotate(var(--local-bar-transform, 0));
}
</style>
<?php
$degree = -10;
?>
<p class="bar" style="--local-bar-transform: <?php echo $degree; ?>deg">Lorem ipsum</p>
CodePen demo: https://codepen.io/cjhaas/pen/rNrgQoK
You can generate a separate stylesheet with the dynamic value and then include it in your HTML.
style.php
<?php
header("Content-type: text/css; charset: UTF-8");
$dynamicValue = ''; // Dynamic value of $degree
?>
.bar {
position: absolute;
width: 50%;
height: 100%;
background-color: var(--black);
transform: rotate(<?php echo $dynamicValue; ?>deg);
}
Then you need to include this stylesheet using the link element, like this.
<head>
<link rel="stylesheet" type="text/css" href="style.php">
</head>
I'm building site a with store images, although some stores don't have an available image. The best I can do is use its placeholder text to display the store title. However, by default the placeholder text is located at the top left of the div and is unstyled.
How can I target the placeholder text to style it??
UPDATE
Ok, maybe I should mention that I'm using WordPress. Perhaps using a simple PHP if else statement would suffice?? Show img if it exists, else show h4 element that I can add in.
Put the text into a and style it as you would for any other html element.
<div class="store-title">
This is where the store name goes.
</div>
If the text is already into an HTML element you can not modify you will have to use existing class or id to hook up to it and style it.
Of you can style the <img> element as well.
You can use line-height to vertically center:
HTML
<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />
CSS
img.no-image {
color: red;
font-size: 20px;
line-height: 200px;
text-align: center;
}
JSFiddle demo: https://jsfiddle.net/ugr6gp8n/2/
Here's another way to style alt text but it only works in Chrome so it's not recommended:
HTML
<img title="Test Text" src="http://example.com/i-dont-exist.png" width="200" height="200" onerror="this.classList.add('no-image')" />
CSS
img[title] {
position: relative;
}
img[title]:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: red;
line-height: 200px;
text-align: center;
content: attr(title);
}
JSFiddle Demo: https://jsfiddle.net/cxa37mLd/1/
Sources:
Can I style an image's ALT text with CSS?
Positioning image alt text
CSS :after not adding content to certain elements
Why doesn't line-height work on img elements?
You can style some properties directly on img:
img {
color:red;
font-size:20px;
text-align:center;
line-height:200px;
}
<img title="Test Text" src="http://exmaple.com/123.jpg" width="200" height="200"/>
UPDATE 2
Ok this is resolved
HTML/PHP:
<?php if(have_posts() ) : while (have_posts() ) :the_post(); ?>
<div class="col-xs-12 col-sm-6 col-md-4">
<a class="store-item-link" href="<?php the_permalink(); ?>">
<div class="store-item" style="border-bottom: 10px solid <?php the_field('color'); ?>">
/* Starting here */
<?php if(wp_get_attachment_url(get_post_thumbnail_id()) == ''):?>
<h3><?php the_title(); ?></h3>
<?php else: ?>
<img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id()); ?>">
<?php endif; ?>
/* Ending here */
</div>
</a>
</div>
<?php endwhile; endif; ?>
CSS
h3{
margin: 0;
font-weight: bold;
font-size: 3rem;
line-height: 175px;
text-align: center;
}
This worked great and thanks everyone for your ideas.
I have a safety form that I'd like to highlight part of an image when an input is checked. I was able to make part of the image highlight with a hover but I can't seem to do it with CSS using Checked. Any ideas what I'm missing? If I switch the css tropic:checked to hover then it will highlight my selection. The problem is I can't get the same functionality via checked. Is it possible?
Thanks!
<style>
.check-with-label:checked ~ .product-add-image-preview {
position: absolute;
content: '';
background: rgba(0,0,0,0.5);
width: 100px;
height: 100px;
pointer-events: none;
}
.circle-with-label:checked ~ .add-head {
width: 200px;
height: 200px;
border: 1px solid #aaa; /*To show the boundaries of the element*/
}
.circle-with-label:checked ~ .add-head {
position: absolute;
content: '';
background: rgba(0,0,0,0.5);
width: 100px;
height: 100px;
pointer-events: none;
}
.trPic{
width:320px;
height:700px;
background: url(<?php echo base_url('uploads/front_body.png'); ?>) no-repeat;
border:5px solid #000000; }
.trPic .head{
position:relative;
top:10px;
left:100px;
width:60px;
height:30px;
background:#FF2400;
opacity:0; }
.trPic:checked .head {
opacity:0.7; }
</style>
<div align="center">
<?php if( !function_exists('form_open')): ?>
<?php $this->load->helper('form'); ?>
<?php endif;?>
<?php echo form_open(current_url(),array('id'=>'form')); ?>
<?php echo form_label('Head','head'); ?>
<input type="checkbox" name ="head" id="head" class="head" value="1"/>
<?php echo form_label('Face','face'); ?>
<input type="checkbox" name ="face" id="check_1" class="check-with-label" value="1" />
<?php echo form_fieldset_close(); ?>
<br />
<br />
<br />
<br />
<?php echo form_button(array('name'=>'submit','type'=>'submit','value'=>1,'content'=>'Submit')); ?>
</div>
<div class ="trPic">
<div class="head">
</div>
</div>
You could use jQuery and call addClass () adding the class that contains the styling you want on the event where the box gets checked.
Request:
I would like to control the placement of my dynamic divs. Each div should refer to the parent div.
Problem:
The code below does not allow the div positions to be altered based on the parent div. For example, #dldescription top:10%; should use div id="dlitem" as a guide. I tried several tactics but can't seem to make it work as planned.
<?php
include '/scripts/connect_to_mysql.php';
$result = mysql_query('SELECT * FROM table');
echo '<div id="dlcontainer" style="border-style:groove;">
<div id="dlitem">';
$i= 0;
while ($row = mysql_fetch_array($result))
{
//each style will control the placement of the div relative to the parent div id=dlitem
echo'<style>
#dldescription_'.$i.'{
vertical-align:middle;
position: absolute;
text-align:center;
top:10%;
left:45px;
}
#dlimage_'.$i.'{
vertical-align:middle;
position: absolute;
text-align:center;
top:10%;
left:45px;
}
#dltitle_'.$i.'{
vertical-align:middle;
position: absolute;
text-align:center;
top:10%;
left:45px;
}
#dllink_'.$i.'{
vertical-align:middle;
position: absolute;
text-align:center;
top:10%;
left:45px;
display: inline-block;
}
</style>
<div id="dltitle_'.$i.'" >'.$row['col1'].'</div>
<div id="dlimage_'.$i.'" align="center"><img src =./'.$row['col2'].' width="75" height="150"></div>
<div id="dldescription_'.$i.'" align="center" ><img src="/img/facebookShare.png"> '.$row['col3'].' off</div>
<div class="dllink_'.$i.'" align="center">Limit '.$row['col4'].'</div>
';
$i++;
}
echo '</div></div>';
?>
To make the div's position relatively to the parent div, you need to change their position from absolute to relative, like:
position:relative;
Here's a good guide: http://learnlayout.com/position.html
I have an image link map in the header of my wordpress theme that I need to make responsive under 750px. I have been able to make the links show up in the header but they aren't active and I'm not sure why. Right now I'm just trying to get the "p1" link to work.
site is here: indie-scene.com
Here is my php:
<div class="header header-default">
<img src="<?php echo $ti_option['site_logo']['url']; ?>" alt="<?php bloginfo( 'name' ); ?> - <?php bloginfo( 'description' ); ?>" width="<?php echo $ti_option['site_logo']['width']; ?>" height="<?php echo $ti_option['site_logo']['height']; ?>" />
<div class="hotspots">
<div title="home">
</div>
<div title="sell">
</div>
</div>
</a><!-- Logo -->
and my media query in css
#media only screen and (max-width: 750px) {
.header {
width:100%;
}
.header img {
content: url(http://indie-scene.com/wp-content/uploads/2014/10/logo_no_banner.png);
max-width: 276px;
}
.header {width:100%; position:relative; }
.header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; visibility:hidden;}
.header a {display:block; position:absolute; background:#000; z-index:100; opacity:0.2; filter: alpha(opacity=20); border:1px solid transparent; }
.header a.p1 {left:50%; top:5%; width:50%; height:50%;}
The links aren't appearing because you've set the visibility of your hotspots div to be hidden for widths under 750pxhere:
.header .hotspots {width:100%; height:100%; position:absolute; left:0; top:0; }
You will either need to remove visibility:hidden; from the CSS above or change it to visibility: visible;.
In the above image, I set the visibility of the hotspots div to visible using the developer tools and you can see that your .p1 link is appearing now.