I have the following CSS conditional statement in my function.php file:
function logo_exists() {
global $options;
?><style type="text/css">
#header h1 a {
<?php
if ( $options['logo'] == NULL ) { ?>
float: left;
text-indent: 0;
<?php } else { ?>
background: url(<?php echo $options['logo']; ?>) no-repeat scroll 0 0;
float: left;
text-indent: -9999px;
width: 160px;
height: 80px;
}
<?php } ?>
</style><?php
}
example:
(...same code as above...)
width: 160px;
height: 80px;
}
<?php } ?>
</style><?php
add_option('logo_exists');
}
I'm not sure how to "add" or "initialise" it.
I tried: add_option('logo_exists'); and add_action('logo_exists'); but it didn't work.
What's the Wordpress "add" command for conditional CSS statements in the function.php file?
Instead of using this variation, you could use wordpress conditions:
is_home() is_singular() (for page/article) is_single() is_page() ad so on.
Besides that, WP automatically add an extra class to body element and you can relate to that to build your css selectors.
Related
On main blog page all excerpt is showing but there is no continue reading and Have coded very well?
on the content.php I have the code
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div><!-- post-excerpt -->
On function.php I have place this code and the moretag class is not present in my style.css file and not in bootstrap is this is the reason.
/**
* Replaces the excerpt "more" text by a link.
*/
function new_excerpt_more($more) {
global $post;
return '... <a class="moretag" href="'. get_permalink($post->ID) . '"> continue reading »</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');
I expect output on the main blog page every excerpt should have continue reading link and should clickable and show full post.
after 4 hour of struggle I have found answer to my question yahoooo!!
on content.php place this.
<div class="post-excerpt">
<?php the_excerpt(); ?>
<?php if (!is_home()): ?>
<div class="continue-reading">
<a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark">
<?php
printf(
/* Translators: %s = Name of the current post. */
wp_kses( __( 'Continue reading', 'mano-theme' ), array( 'span' => array( 'class' => array() ) ) ),
the_title( '<span class="screen-reader-text">"', '"</span>', false )
);
?>
</a>
</div>
</div><!-- post-excerpt -->
<?php endif ?>
on function.php place this code.
/**
* Customize the excerpt read-more indicator
*/
function new_excerpt_more( $more ) {
return " …";
}
add_filter( 'excerpt_more', 'new_excerpt_more' );
On style.css paste this code
.continue-reading {
text-align: center;
}
.continue-reading a,
.entry-content .continue-reading a {
display: inline-block;
margin: 1em auto;
padding: 1em 2em;
font-family: "Fira Sans", sans-serif;
text-decoration: none;
border: 1px solid #c3c3c3;
}
.continue-reading a:hover,
.continue-reading a:focus,
.entry-content .continue-reading a:hover,
.entry-content .continue-reading a:focus {
border-color: #000;
border-width: 1px;
box-shadow: none;
}
.continue-reading a::after {
content: "…"
}
.continue-reading::after {
display: block;
content: "";
width: 7em;
border-bottom: 1px solid #c3c3c3;
margin: 4em auto 0;
}
.entry-content .continue-reading::after {
display: none;
}
OUTPUT:
I tried to display the content of the fields horizontally but was unsuccessful. It is always the showing vertical view. Am I missing something?
This is the php code.
Thanks for the help.
<h3>Details</h3>
<ul>
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name => $custom_quote_field_value) : ?>
<li><?php echo $custom_quote_field_name; ?> : <?php echo $custom_quote_field_value; ?></li>
<?php endforeach; ?>
</ul>
Your problem lies with your CSS and HTML output, and not necessarily the PHP generating it.
If you have access to the CSS stylesheet, you could use several methods:
Inline-block
ul {
font-size: 0;
/*makes inline-block method work, as " " in your DOM have a font-size,
and we want to eliminate those
*/
}
ul li {
font-size: 18px; //or however large you would like
display: inline-block;
width: calc(100% / X); //where X is number of li
}
Float
ul {
}
ul li {
font-size: 18px; //or however large you would like
float: left;
margin-left: X; //where X is the gap you want between elements
}
Flexbox
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
ul li {
}
I'm not sure if I understood Your problem, but You are probably thinking about php like it can be used to style data generated by Your script. You need to replace <li> in Your code with <li style="float: left; margin-left: 28px;". This code uses inline CSS used for styling HTML elements like unordered list generated by Your script.
Float: https://www.w3schools.com/cssref/pr_class_float.asp
Margin: https://www.w3schools.com/cssref/pr_margin.asp
Margin is optional here, I just recommend to add this because of a little bit messy look of the list with only float applied.
Thanks a lot Guys,
This is the code works for me:
<head>
<style>
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: white;
}
.flex-container > div {
background-color: #e8f3ff;
width: 1px;
margin: 10px;
text-align: center;
line-height: 55px;
font-size: 30px;
}
</style>
</head>
<body>
<h4>Details</h4>
<div class="flex-container">
<?php foreach ($custom_fields['quote'] as $custom_quote_field_name =>
$custom_quote_field_value) : ?>
<?php echo $custom_quote_field_name; ?> <?php echo $custom_quote_field_value; ?>
<?php endforeach; ?>
</div>
</body>
I am using WordPress and ACF to display some photographs from custom post types on my page.
I would like the images to all be the full height of the container but they may have different widths (context photography gallery) and I would like them to scroll horizontally
the images are currently contained as list items in an unordered list.
Im unsure how to accomplish this with CSS. so far I have them scrolling, but they are all different heights.
i could make sure the images are all just uploaded with a fixed height but that doesn't solve the problem of them not resizing with the browser.
JS Fiddle:
https://jsfiddle.net/svone2zq/9/
Live url: http://www.mattwilkinson.co.uk/beta/
HTML CODE
if( $posts ): ?>
<ul class="photolistul">
<?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) ?>
<?php setup_postdata($post); ?>
<li class="photolistli">
<!-- need the right info here -->
<div class="photocontainer1">
<span><?php the_field('single_image_title'); ?></span>
<img class="img-responsive photo" src="<?php the_field('single_add_image') ?>" alt="<?php echo $image['alt']; ?>" />
</div>
</li>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
<?php endif; ?>
</div>
CSS
.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
height: 80vh;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: inherit;
max-height: 100%;
max-width: 100%;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 img {
position: relative;
float: left;
max-height: 100% !important;
max-width: auto;
}
it looks like you want to create a carousel, if so I think the best solution would be Owl Carousel 2 here.
I have a solution for you too
http://codepen.io/Nikolaus91/pen/EKwJXw
I didn't have a better idea to set .stage width other way than using jQuery. Maybe you will came up with a better solution when you will see mine.
var sumwidth=0;
$(".stage").children('.carousel-image-container').each(function() {
var child = $(this);
sumwidth+=child.outerWidth();
});
$(".stage").css({
'min-width' : sumwidth + 25 + 'px'
});
P.S. 25 value is random, don't know why this 25px is missing when outerWidth value is sumarized. Maybe it's because of codepen...
P.S. -2 If you are making website based on images (majority of the content) remeber to compress images using for example (my favourite) kraken.io. If you are uploading images using media library in wordpress install WP Smush by wpmu dev it will compress images when uploaded - no need to remeber about compressing images.
The last important thing (in my opinion) is to use some kind of lazy loading solution, downloading multiple images at once when only minority is visible is bad approach, try BjLazy for wordpress. Might suit your needs.
Working with the css in you jsfiddle I came up with this which seems to do the trick.
.home-image-container ul.photolistul {
display: inline-block;
list-style-type: none;
overflow: scroll;
overflow-x: show;
overflow-y: hidden;
white-space: nowrap;
}
.img-resposnive {
height: 100%;
width: 100%;
}
.home-image-container ul.photolistul li.photolistli {
display: inline-block;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
height: 400px;
max-height: 600px;
min-height: 200px;
}
.home-image-container ul.photolistul li.photolistli .photocontainer1 {
position: relative;
float: left;
}
Good Day,
I am working on a table that will display data from MySQL using PHP which is pretty much working. My goal is to display this as a simple Identification Card using the data I have from MySQL.
I would consider myself a rookie when it comes to CSS and I need to understand why my display is not going as I wanted.
I did some research online and found this
http://jsfiddle.net/gajjuthechamp/cbEDJ/1/
It is working and I got the display that I wanted but for some reason the first column is shrinking. I tried changing the row width to 50% unfortunately it is doing the same thing. Kindly see image and my code below.
CSS Display Table Row Side by Side
<style>
table {
width: 100%;
}
table tr {
display: inline
}
table tr:nth-child(odd) {
position: relative;
}
table tr:nth-child(odd) td {
position: absolute;
top: 100%;
left: 0;
}
table tr:nth-child(even) {
display: block;
width: 50%;
margin-left: 50%;
}
</style>
I also tried changing the values from top, left, margin-left, and width but first still shrinks. Could no wrap also cause this issue? Any info or suggestion is highly appreciated.
#EdCottrell
I finally got it working thanks a lot for the advised. I use div and it automatically work as I wanted it to be.
CSS for div
<style>
body {
margin: 0;
}
div#card:nth-child(odd) {
width: 50%;
background: lightblue;
display: inline-block;
}
div#card:nth-child(even) {
width: 50%;
background: orange;
display: inline-block;
float: left;
}
.parent {
font-size: 0;
margin: 0;
}
.font {
font-size: 16px;
}
</style>
HTML for div
<div id="card">
<center><b>EMPLOYEE INFORMATION CARD</b></center>
<br><b>Name: <?php echo $row ['EMPLOYEE_NAME']; ?></b>
<br><b>Address:</b> <?php echo $row ['EMPLOYEE_ADDRESS']; ?>
<br><b>Date of Birth:</b> <?php echo $row ['BIRTHDATE']; ?>
<br><b>Polling Place:</b> <?php echo $row ['POLLING_PLACE']; ?>
<br><b>Precint No:</b> <?php echo $row ['PRECINT_NUMBER']; ?>
<br><b>Cluster No:</b> <?php echo $row ['CLUSTER_NUMBER']; ?>
</div>
I'm currently displaying a users profile picture in php and if they click on it, then it takes them through to their own profile. The image displays correctly and the link works, but the area of the link extends way beyond the picture and over a link nearby. How would I go about reducing the area of the anchor?
<?php } if ($searchuser == $username)
{ ?>
<a href="profile.php">
<?php } ?>
<div style="background-image: url('<?php echo $profilepic; ?> ')" class="user-pic"></div>
<?php if ($searchuser == $username)
{?>
</a>
div.user-pic {
margin: 0 auto;
width: 125px;
height: 125px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 0.09em solid white;
position: relative;
top: -60px;
padding: 0px;
z-index: -100;
}
Try with this:
php
<?php }
$show_user_link = false;
if ($searchuser == $username) {
$show_user_link = true;
}
?>
<div style="background-image: url('<?php echo $profilepic; ?>')" class="user-pic">
<?php if( $show_user_link ): ?>
<a class="user-link" href="profile.php">
</a>
<?php endif; ?>
</div>
css
div.user-pic {
position: relative;
}
a.user-link {
height: 125px;
width: 100%;
}
You put the anchor in within the div tag and then you could make div's position relative and anchor's width to 100%.
PS: You could try to use something like
<?php if(true): ?>
<strong> some html </strong>
<?php endif; ?>
when mixing php and html to make your code more readable.
--- EDIT
Ok, I understand, see if the new code is more helpfull now, the only thing I think that could go wrong is the height of the anchor in case it isnt fixed to 125px, say me if you have problems with it.