Tried to add default-image tag in functions.php but it's not working. It's only work when i upload img from wp dashboard but default img is not working
functions.php
<?php
add_theme_support('title-tag');
add_theme_support('custom-header', array(
'default-image' => get_stylesheet_directory_uri() . '/images/logo.jpg',
));
?>
CSS
#logo{
width: 890px;
position: relative;
height: 200px;
}
HTML
<div id="logo" style="background: url(<?php header_image(); ?>) no-repeat;">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><?php bloginfo('name');?></h1>
<h2><?php bloginfo('description');?></h2>
</div>
</div>
After some digging I found that adding default image path in child theme is quite different.
Keep path like this and it will work.
add_theme_support('custom-header', array(
'default-image' => '%2$s/images/logo.jpg',
));
In parent theme %s should be used while in child theme %2$s should be used.
See examples in this page. https://codex.wordpress.org/Function_Reference/register_default_headers
Did you add the background-image in css file?
Remove the code from functions.php
Make the html code as
<div id="logo">
<div id="logo_text">
<!-- class="logo_colour", allows you to change the colour of the text -->
<h1><?php bloginfo('name');?></h1>
<h2><?php bloginfo('description');?></h2>
</div>
</div>
Add the style
#logo {
width: 890px;
position: relative;
height: 200px;
background-image:url('../images/logo.jpg');
}
Related
<div class=" testingclass wpd-page-title wpd-page-title_horiz_align_left wpd-page-title_vert_align_middle" style="background-color:#ffffff;height:80px;color:#222328;margin-bottom:15px;">
<div class="wpd-page-title__inner">
<div class="container">
<div class="wpd-page-title__content">
<div class="page_title">
<h1>Multilingual Digital Marketing</h1>
</div>
</div>
</div>
</div>
</div>
CSS for these are
body.term-107 .wpd-page-title {
background: url(https://khaleejdev.com/kds/newtornetto/wp-
content/uploads/2018/05/107.jpg)no-repeat;
background-size: 100%;
}
I want to make the below Header background image blur as below of this page.
https://khaleejdev.com/kds/newtornetto/product-category/multilingual-digital-marketing/
Please help me achieve it without affecting title. I tried all the previous answers of Stackoverflow but it didn't worked.
Actually i have a bunch of php code for wordpress product archive template, if html can adjusted to attain the feature i want without affecting current layout as shown in url https://khaleejdev.com/kds/newtornetto/product-category/multilingual-digital-marketing/ .
Please check the image , i want blur affect on image only, not on title.
It would be great.
Here is the php code
<div class=" testingclass wpd-page-title<?php echo !empty($page_title_classes) ? esc_attr($page_title_classes) : ''; ?>"<?php echo !empty($page_title_styles) ? ' style="'.esc_attr($page_title_styles).'"' : '' ?>>
<div class='wpd-page-title__inner'>
<div class='container'>
<div class='wpd-page-title__content'>
<div class='page_title content'>
<h1><?php echo esc_html($wpd_page_title); ?></h1>
<?php if(!empty($page_sub_title) && $page_title_horiz_align != 'center'): ?>
<div class='page_sub_title'><div><?php echo esc_attr( $page_sub_title ); ?></div></div>
<?php endif; ?>
</div>
<?php if (!empty($page_sub_title) && $page_title_horiz_align == 'center'): ?>
<div class='page_sub_title'><div><?php echo esc_attr( $page_sub_title ); ?></div></div>
<?php endif; ?>
<?php if ($page_title_breadcrumbs_conditional == 'yes'): ?>
<div class='wpd_breadcrumb'><?php
/** Breadcrumb Template */
get_template_part( 'template-parts/header/partials/breadcrumb' );
?></div>
<?php endif; ?>
</div>
</div>
</div>
</div>
You can use the following CSS declaration to blur a background image:
filter: blur(value);
N.B. If you want the <div> to contain other content but you wish to blur only the background image, then apply the background image and the blur to a ::before pseudo-element.
Working Example:
.wpd-page-title {
position: relative;
width: 100%;
height: 180px;
}
.wpd-page-title::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(https://picsum.photos/300/300) no-repeat;
}
.blur-3px::before {
filter: blur(3px);
}
.blur-6px::before {
filter: blur(6px);
}
.blur-9px::before {
filter: blur(9px);
}
<div class="wpd-page-title"></div>
<div class="wpd-page-title blur-3px"></div>
<div class="wpd-page-title blur-6px"></div>
<div class="wpd-page-title blur-9px"></div>
Read More on CSS Filters:
https://css-tricks.com/almanac/properties/f/filter/
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
https://www.sitepoint.com/css-filter-effects-blur-grayscale-brightness-and-more-in-css/
You have two options,
You can take out the "title" from the background parent div and use position absolute property to align it on the background image and apply blur code for the parent div
.testingclass{
filter: blur(5px);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
}
like following
<div class=" testingclass wpd-page-title wpd-page-title_horiz_align_left wpd-page-title_vert_align_middle" style="background-color:#ffffff;height:80px;color:#222328;margin-bottom:15px;">
</div>
<div class="wpd-page-title__inner">
<div class="container">
<div class="wpd-page-title__content">
<div class="page_title">
<h1>Multilingual Digital Marketing</h1>
</div>
</div>
</div>
</div>
Use PSD to make the image Blur, because you cant control the blurred effect to inside elements if you apply blur or opacity to parent
You can notice that, the blur affect is working for the 3 image grid section, because the image and text are separated, and you are using position: absolute for the text div.
My website is www.rosstheexplorer.com
I want the header image to stretch across the whole page but I do not want any letters to be chopped off the 'Ross The Explorer' text.
In customer-header.php I had this code
*/
function penscratch_custom_header_setup() {
add_theme_support( 'custom-header', apply_filters( 'penscratch_custom_header_args', array(
'default-image' => '',
'default-text-color' => '666666',
'width' => 937,
'height' => 300,
'flex-height' => true,
'wp-head-callback' => 'penscratch_header_style',
'admin-head-callback' => 'penscratch_admin_header_style',
'admin-preview-callback' => 'penscratch_admin_header_image',
) ) );
}
I changed
'width' => 937,
to
'width' = 100%,
This had disastrous consequences which you can read about here Where Can I Download The Wordpress Penscratch Theme Files? and Finding custom-header.php in file manage on Wordpress Penscratch theme.
After 3 days I managed to fix the damage.
I have two header images, one for mobile devices. I have code relating to the header images in header.php and Additional CSS.
In header.php the code is
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
In additional CSS the code is
#media screen and (min-width: 661px) {
.mobile-header-img {
display: none;
width: 100%;
}
}
#media screen and (max-width: 660px) {
.header-img {
display: none;
}
}
I am unsure if I need to make modifications in the php files or in Additional CSS. After my last experiment caused me major problems I am reluctant to do any more experimenting on my own. Could someone provide a bit of guidance?
Based on comments below my code is now as follows
Additional CSS
#media screen and (min-width: 661px) {
.mobile-header-img {
display: none;
width: 100%;
max-width: none;
}
}
#media screen and (max-width: 660px) {
.header-img {
display: none;
width: 100%;
max-width: none;
}
}
Header.PHP
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
<div id="page" class="hfeed site">
This achieves my aims up till the width of the browser is greater than 1300px, then white space starts appearing to the right of the header.
Your images will not expand to the full width of the page, because they are inside a wrapper with a max-width. You could take your images outside of the wrapper (see below). You could also apply position:absolute to the images, but that would cause a whole other set of problems.
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<div class="header">
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
</div>
<div id="page" class="hfeed site">
You would also have to add this CSS to force the image to expand beyond it's natural size, however this would start to blur the image a bit.
.header img {
max-width: none;
width: 100%;
}
Using WizardCoder fantastic support and advice I was able to solve the problem.
In Additional CSS my code is now
#media screen and (min-width: 661px) {
.mobile-header-img {
display: none;
}
}
#media screen and (max-width: 660px) {
.header-img {
display: none;
}
}
.header img {
max-width: none;
width: 100%;
}
In header.php my code is now
<body <?php body_class(); ?>>
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
<div class="header">
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
</div>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
I built a blog under wordpress. I am searching for a way to display article like this :
the php / html
<div id="uno">
<?php the_title(); ?>
<?php the_excerpt();?>
Read more...
</div>
and the css
#uno{width: 25%; height:100%; float:left; text-align:center; padding-top: 20px;}
Have a look to isotope/masonry => http://isotope.metafizzy.co/layout.html
What's happening is your images are of different sizes so the gaps look different and because one image was larger then the others that's the primary gap for the following images.
One way I found that fixed this in my case was to navigate to your functions.php file and add this line of code in
add_theme_support( 'post-thumbnails' );
add_image_size( 'myimage', 100, 100 );
change the myimage portion to what ever you like and the sizes that you would like your image to be fixed as.
After that you can then pull your image using <?php the_post_thumbnail('myimage', array( 'class' => "our-size")); ?>
also just to be safe you could add some css.
.our-size {
height: 100px;
width: 100px;
max-width: 100px;
max-height: 100px;
margin-bottom: 2px;
}
Here is the solution: using isotope.
css :
.grid-image-item,
.grid--images .grid-sizer { width: 25%;}
.grid-image-item {
float: left;
}
.grid-image-item img {
display: block;
max-width: 100%;
}
home.php :
load "isotope-docs.min.js" on the top of your page, juste bellow "get_header" using this
<script src="where-you-placed-it/isotope-docs.min.js">
</script>
<div class="duo__cell example__demo">
<div class="grid grid--images" data-js-module="imagesloaded-progress">
<div class="grid-sizer"></div>
<?php if(have_posts()) : ?>
<?php while(have_posts()) : the_post(); ?>
<div class="grid-image-item">
<?php the_title(); ?>
<?php the_author() ?>
<?php the_time('j M Y') ?>
<?php the_category(', ') ?>
<?php the_excerpt();?>
<?php echo get_permalink(); ?>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
I added a menu to the footer of my site in functions/footer.php, and it shows up as desired on my home page, but it doesnt show up on any of the Post pages.
here is the website http://www.cultcitychi.com/
Below is my footer.php code
`?>
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
<?php // footer menu
wp_nav_menu( array('container_class' => 'menu-footer',
'theme_location' => 'secondary' ) ); ?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
`
You need to add this code at the bottom of your single.php file in order to display the footer on each post page:
<?php get_footer(); ?>
UPDATE:
I checked your website using the developer tools and the footer is present on the posts page but it's not appearing because of a flaw in your CSS. Please add the following CSS at the bottom of your stylesheet and that should solve the problem:
.single.single-thumbnail .site {
height: auto;
}
.single.single-thumbnail .site-footer {
padding-top: 0px;
}
.site-info {
margin: 0px auto;
padding-bottom: 0px;
}
footer#colophon {
z-index: 999;
}
I have the following PHP page
<?php include 'header-adminpanel.php'; ?>
<div class="container">
<div class="body-content">
<div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
<div class="side-right"></div>
</div>
</div>
<?php include 'footer.php'; ?>
Where I expected the output as
But the real output is
Styling is as follows;
.side-left{
width: 250px;
float: left;
height: auto;
}
.side-right{
width: 750px;
float: left;
height: auto;
}
.body-content{
height:auto;
width: 1000px;
margin:auto;
}
.container {
height: auto;
width: 100%;
}
Without those "side-left" and "side-right" divs it looks fine as below
What's wrong with my code? Any Suggestions..
You should add this before including footer. That should solve the things.
<div style="clear:both"></div>
Add
<div style="clear:both"></div>
before the line,
<?php include 'footer.php'; ?>
You are using floated elements and they collapsed as there is no content.
Add clearfix to body-content.
Also take a look at Why doesn't the height of a container element increase if it contains floated elements? and What does the CSS rule clear: both do?
add Clear both before footer div, Try the following
<?php include 'header-adminpanel.php'; ?>
<div class="container">
<div class="body-content">
<div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
<div class="side-right"></div>
</div>
</div>
<div style="clear:both"></div>
<?php include 'footer.php'; ?>
Example
The only reason that the footer is sliding to the right side of the '.container' is because '.container' div's child have a float property.
So for a quick fix add 'clear:both' to the '.container' div and also to the footer div or empty div.
If this does not fix the problem we need to see the footer, side-left and slid-right html.
Here is Two Solution
First Clearing Floats Using Clear:both
And Another Adding Overflow: auto to Parent div
HERE IS CODE
HTML :
<div class="body-content">
<div class="side-left"><?php include 'adminproduct_sidebar.php'; ?></div>
<div class="side-right"></div>
<div style="clear:both"></div>
</div>
Another solution is
Just adding a css
.body-content{
overflow:auto;
}
Hope it helps you :)