I can't align my post thumbnail to left. Is it to be declared in CSS or what?? I used the following code but it didn't work:
<!--This section is currently pulling category ID #1, and can be switched by changing the cat=1 to show whatever category ID you would like in this area.-->
<div class="featured">
<h2>Featured Category</h2>
<!--This is where the thumbnails are found for the homepage bottom section - note the custom field name for this image is "thumbnail". Recommended image size is 70x70, as the stylesheet is written for this size.-->
<?php $recent = new WP_Query("cat=1&showposts=3"); while($recent->have_posts()) : $recent->the_post();?>
<?php if( get_post_meta($post->ID, "thumbnail", true) ): ?>
<img style="float:left;margin:0px 10px 0px 0px;" src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="alt text" />
<?php else: ?>
<img style="float:left;margin:0px 10px 0px 0px;" src="<?php bloginfo('template_url'); ?>/images/thumbnail.jpg" alt="Default thumbnail" />
<?php endif; ?>
<b><?php the_title(); ?></b>
<?php the_content_limit(80, ""); ?>
<div style="border-bottom:1px dotted #AFAFAF; margin-bottom:10px; padding:0px 0px 10px 0px; clear:both;"></div>
<?php endwhile; ?>
<!--This is where you can specify the archive link for each section.-->
<b>More Featured Category Posts</b>
</div>
please study the code and give me suggestions
Can you give the URL for this so we can see? Inline styles are bad - instead, try applying a CSS class and then define the margin and float.
I assume something is overwriting the float:left;
Related
I have tried several things, ultimately what should work to allow the graphic to display at full image size is this:
.custom-logo {
max-width: 100%;
}
It's not working. It will only display the .custom-logo at 225 x 225 for whatever reason and I cannot seem to override the WP template. I'm not a PHP expert, but from what I can tell from inspecting the image, it seems to have something to do with the template PHP code. Here is the code that is displaying the logo. Any thoughts to allow the image to display at full size would be helpful! Clearly there's something I'm missing.
<div class="site-branding">
<?php has_custom_logo() ? the_custom_logo() : ''; ?>
<div class="site-branding-text">
<?php if ( is_front_page() ) : ?>
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<?php else : ?>
<p class="site-title"><?php bloginfo( 'name' ); ?></p>
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding-text-->
Thanks!
max-width doesn't set the width of the image, it sets the max width it is allowed to resize to.
Use width: 100%; to set the width of your image to 100% of it's space.
img{
border: 1px solid black;
}
#div1 img{
max-width: 100%;
}
#div2 img{
width: 100%;
}
max-width: 100%
<div id="div1">
<img src="https://via.placeholder.com/150">
</div>
width: 100%
<div id="div2">
<img src="https://via.placeholder.com/150">
</div>
In my page.php I am trying to output the featured image in .page-wrapper div and display using style="background-image: url('<?php echo $thumb['0'];?>') !important;" on top of the page (Inline css)
The problem is it keeps on being crossed out by the browser. It may be because there is a 3rd party plugin and that could be overriding it - so I've tried adding !important tag to my property. Not working. And I'm disabled the plugin, no luck. IDEAS??
Link to page: http://radian3.com/events/
Here is the page.php
<div class="about-container">
<!-- The POST LOOP -->
<?php if(have_posts()) :
while (have_posts()) : the_post(); ?>
<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );?>
<div class="page-wrapper" style="background-image: url('<?php echo $thumb['0'];?>') !important;">
<b class="about-title"><?php the_title(); ?></b>
<!-- <div class="about-icon-wrapper" style="background-image: url('<?php echo $thumb['0'];?>')"></div> -->
</div>
<div class="contact-body-wrapper">
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php else :
echo '<p>No content found..</p>';
endif;
?>
CSS
/* single.php page */
.page-wrapper {
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
/* background-image: url('../img/about-our-team.jpg') !important;
*/ height: 30rem;
background-repeat: no-repeat;
background-size: cover;
}
Actually, its your code in page.php that's doing the overriding.
The image you see crossed out id included in your css file, the one with the emply url the one generated by your code.
Your code isn't returning any image, so you need to fix that. Unless you have $post explicitly defined, it wont have a value here, so $post->ID will be empty.
You should use get_the_ID() inside the loop, i.e.
<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()), 'full' );
if ($thumb){
?>
<div class="page-wrapper" style="background-image: url('<?php echo $thumb['0'];?>')">
<?php
// rest of your code....
}
FYI, you should also check to make sure $thumb has a value - if it doesn't, you could use a default placeholder instead
You need to remove inline style attribute which sets no image to it but it is overriding css for background image url for page-wrapper
You need to remove the following attribute from page-wrapper div.
style="background-image: url('') !important;"
Please give like this
background-image: url("<?php bloginfo('template_directory'); ?>/images/parallax_image.jpg ");
I am using custom template in wordpress. This is the code
<a href="<?php echo get_category_link($cat->term_id); ?>">
<img class="home-img" src="<?php echo z_taxonomy_image_url($cat->term_id); ?>" />
<p><?php echo $cat->cat_name; ?></p>
</a>
</div>
<?php endforeach; ?>
which is displaying category with category images like this Screenshot1.
I want to display the text on the image not below the image.
Change the position of the paragraph:
p {
margin-top: -50px;
width: 100%;
text-align: center;
}
I have a link in the following div, it code is,
<?php _e('More', 'isis'); ?>
Now, I want to make the whole div a hyperlink. Please guide me. Thanks. The whole code is below,
<div class="midrow_blocks_wrap">
<i class="fa <?php echo of_get_option('block1_logo'); ?> fa-3x icon"></i>
<a href="#">
<div class="midrow_block">
<!--We need to make this div a link -->
<div class="mid_block_content">
<h3><?php echo of_get_option('block1_text'); ?></h3>
<p><?php echo of_get_option('block1_textarea'); ?></p>
</div>
<?php if ( of_get_option('block1_link') ) { ?><?php _e('More', 'isis'); ?><?php } ?>
</div>
</div>
<div class="shadow"><img src="<?php echo get_template_directory_uri(); ?>/images/service_shadow.png" alt="<?php the_title_attribute(); ?>" /></div>
</div>
A lot of the time when I'm trying to make a hyperlink fill a whole div I give the div a position: relative and the hyperlink a position: absolute; width: 100%; height: 100%; left: 0; top:0; I developed this because wrapping a whole div in a hyperlink can be screwy.
It is usually much easier to do it that way. If you give a z-index: 9 or some higher number you will cover most of your base for the div and then if you need other links or content in there you'll need to do a higher z-index.
Just a thought.
I'm trying to style a page generated with App Gini. I've been able to edit most everything so far, however I can't seem to get inline-block to work, float:left will work. However I've tried many methods and can't get float to center and I much prefer using inline-block. I have no background in PHP coding mostly just CSS and HTML.I'm trying to style PHP elements and I don't believe they're the cause.
The PHP generate links to tables within a database and it changes based on user access. Right now it returns about 8 links and as I said float allows me to format them to display horizontally without centering however when I use inline-block it displays them vertically with centering. What I'm trying to accomplish is a horizontal centered menu that is adaptive to screen size. If there is any information I am lacking in this post please let me know.
The CSS:
#headingstyles{font-family: "Ubuntu","Segoe UI Light","Helvetica Neue",'RobotoLight',"Segoe UI","Segoe WP",sans-serif;font-weight:100;margin-top:5px;margin-bottom:0px;}
body{font-family:"Ubuntu","Segoe UI","Segoe WP","Helvetica Neue",'RobotoRegular',sans-serif;font-size:20px}
h1,h2,h3,h4,h5,h6{font-family:"Ubuntu","Segoe UI Light","Helvetica Neue",'RobotoLight',"Segoe UI","Segoe WP",sans-serif;font-weight:100;margin-top:0px;margin-bottom:0px;}
.content a:link {color:#DDD; text-decoration:none;}
.content a:visited {color:#DDD;text-decoration:none;}
.content a:hover {color:#FFF;text-decoration:none;}
.content a:active {color:#FFF;text-decoration:none;}
.content {
position:absolute;
width:99%;
min-height: 20%;
padding-top:6%;
padding: auto;
background-color: #1569C7;
color: #FFF;
text-align: center;
border-bottom: #111 1px solid;
margin:0 auto;
}
.content a:link {
padding: 15px;
/*display: inline-block;*//*doesn't work*/
float:left;/*works*/
}
.content a:hover {
background-color: #479BF9;
}
The HTML/PHP:
<div class="content">
<?php
if(is_array($arrTables)){
$i=0;
foreach($arrTables as $tn=>$tc){
$tChk=array_search($tn, array());
$searchFirst = (($tChk!==false && $tChk!==null) ? '?Filter_x=1' : '');
?>
<div onclick="window.location='<?php echo $tn; ?>_view.php<?php echo $searchFirst; ?>';" id="<?php echo $tn; ?>">
<a title="<?php echo htmlspecialchars($tc[1]); ?>" href="<?php echo $tn; ?>_view.php<?php echo $searchFirst; ?>">
<?php echo (!$i ? "<h2>{$tc[0]}</h2>" : "<h2>{$tc[0]}</h2>"); ?>
<?php echo $tc[1]; ?>
</a>
</div>
<?php
$i++;
}
// custom home links, as defined in "hooks/links-home.php"
if(is_array($homeLinks)){
$memberInfo = getMemberInfo();
foreach($homeLinks as $link){
if(!isset($link['url']) || !isset($link['title'])) continue;
if($memberInfo['admin'] || #in_array($memberInfo['group'], $link['groups']) || #in_array('*', $link['groups'])){
?>
<div onclick="window.location='<?php echo $link['url']; ?>';">
<a title="<?php echo htmlspecialchars($link['description']); ?>" href="<?php echo $link['url']; ?>">
<h1><?php echo $link['title']; ?></h1>
<?php echo $link['description']; ?>
</a>
</div>
<?php
}
}
}
if(getLoggedAdmin()){
?><div onclick="window.location='admin/';"><h2><?php echo $Translation['admin area']; ?></h2></div><?php
}
}else{
?><div id="error-no-access"><?php echo $Translation['no table access']; ?><script language="javaScript">setInterval("window.location='index.php?signOut=1'", 2000);</script></div><?php
}
?>
</div>
The Generated HTML:
<div class="content">
<div onclick="window.location='t1.php';">
<a title="" href="t1.php">
<h2>t1</h2> </a>
</div>
<div onclick="window.location='t2.php';">
<a title="" href="t2.php">
<h2>t2</h2> </a>
</div>
<div onclick="window.location='t3.php';">
<a title="" href="t3.php">
<h2>t3</h2> </a>
</div>
<div onclick="window.location='t4.php';">
<a title="" href="t4.php">
<h2>t4</h2> </a>
</div>
<div onclick="window.location='t5.php';">
<a title="" href="t5.php">
<h2>t5</h2> </a>
</div>
<div onclick="window.location='t6.php';">
<a title="" href="t6.php">
<h2>t6</h2> </a>
</div>
<div onclick="window.location='t7.php';">
<a title="" href="t7.php">
<h2>t7</h2> </a>
</div>
<div onclick="window.location='t8.php';">
<a title="" href="t8.php">
<h2>t8</h2> </a>
</div>
<div onclick="window.location='admin/';"><h2>Admin Area</h2></div>
</div>
Instead of putting inline-block on the links, put it on their containing divs instead:
.content div{
padding: 15px;
display: inline-block;
}
In your code above, the containing divs are blocks so setting their links to inline-block doesn't have an effect.