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">
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>
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');
}
I have two PHP variables:
$video_mp4: Which is a video file.
$video_poster: Which is an image.
For desktop, I want $video_mp4 to load as an ambient video, which it does. But on max-width: 576px I want the $video_poster to show.
Unsure on how to approach this though. This is my current code and thought process:
<div class="hero__container--teaser">
<div class="hero__teaser">
<!-- By default, show video -->
<?php echo wp_video_shortcode( $video_mp4 ); ?>
<!-- If max-width 576px, show image -->
<?php echo "<img src='$video_poster'>;" ?>
</div>
</div>
Wondering what the best practise here?
Wrap video content with .video and image content with .image and using CSS Media queries in max-width: 576px show image and hide video
.hero__teaser .image {
display: none;
}
#media (max-width: 576px) {
.hero__teaser .image {
display: block !important;
}
.hero__teaser .video {
display: none;
}
}
<div class="hero__container--teaser">
<div class="hero__teaser">
<div class="video">
<?php echo wp_video_shortcode( $video_mp4 ); ?>
</div>
<div class="image">
<?php echo "<img src='$video_poster'>;" ?>
</div>
</div>
</div>
I have the following commands from a wordpress theme.
</head>
<body <?php body_class(); ?>>
<header id="masthead" class="site-header <?php echo ( get_theme_mod( 'panoramic-header-layout', 'panoramic-header-layout-standard' ) == 'panoramic-header-layout-centered' ) ? sanitize_html_class( 'panoramic-header-layout-centered' ) : sanitize_html_class( 'panoramic-header-layout-standard' ); ?>" role="banner">
<?php if ( get_theme_mod( 'panoramic-header-layout', 'panoramic-header-layout-standard' ) == 'panoramic-header-layout-centered' ) : ?>
<?php get_template_part( 'library/template-parts/header', 'centered' ); ?>
<?php else : ?>
<?php get_template_part( 'library/template-parts/header', 'centered' ); ?>
<?php endif; ?>
Now I need to add two logos one is on the left and the other one is on the right.
How to do that?
As mentioned in the comments section, simply add the icons to the HTML section and remove the theme-specific images. Here's a sample showing how this could be done:
HTML part:
<header>
<img class="logo left" src="PATH_TO_LEFT_LOGO.png">
<div class="header-text left">
This may be a title.
</div>
<img class="logo right" src="PATH_TO_RIGHT_LOGO.png">
<br class="header-clear" />
</header>
CSS to align the logo files:
.header-text {
color: white;
margin: 5px;
font-size: 20px;
}
.header-text.left,
.logo.left{
float: left;
}
.logo.right {
float: right;
}
.header-clear {
clear: both;
}
If you don't need the header text, remove the DIV layer and the appropriate rules from the CSS section. It should also be obvious that you will have to replace the paths to the logo images matching your configuration :-)
Here's a fiddle showing the above code.
I am using Wordpress with the Twenty Eleven theme.
At the moment I have the emblem of a sports club inlined with the header. I have now been asked to add a sponsor's logo left of the header inline with the emblem. Does anyone know of a easy way of accomplishing this?
here is the code:
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><img src="http://aberdeenshirecc.org.uk/phpHrX1SaAM.jpg"style="width:84px;height:100px; display:inline; vertical-align:center; img margin-top:200px; "<span><?php bloginfo( 'name' ); ?></span></h1>
Sponsored by:
<img src="http://aberdeenshirecc.org.uk/Ace.jpg"style="width:200px;height:76px; float:left; display:inline; vertical-align:left; ">
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
Create a div with your image in it and position it using css:
CSS:
#imgdiv {
position:absolute;
top:20px;
left:-40px;
}
HTML:
<div class='imgdiv'><img src='myimage.jpg' /></div>
Note: You will need to tweak the values of 'top' and 'left' to get it to appear where you need it.