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.
Related
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');
}
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 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.
Editing my theme to place a facebook icon immediately to the right of my page titles.
With the old icon (HTML) the following code worked and the icon was placed beside the title:
<h1 class="page-title"><?php _e( 'Nothing Found', 'catch-adaptive' ); ?><a class="genericon_parent genericon genericon-facebook-alt" title="Facebook" href="https://www.facebook.com/karen.b.russell.54" onclick="javascript:window.open('https://www.facebook.com/karen.b.russell.54'); return false;"><span class="screen-reader-text">Facebook</span></a></h1>
Now I am trying to use the php code given to me by a plugin:
<?php echo DISPLAY_ULTIMATE_PLUS();?>
I've done this:
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); echo DISPLAY_ULTIMATE_PLUS();?></h1>
</header><!-- .entry-header -->
The problem is that the echo is displaying the icon below the page title instead right beside it.
How do I position the icon to the right of the title using this plugin's PHP code?
You can view the live site with the new misplaced icon at http://healthylifeadvisors.com/
See if this works;
<header class="entry-header">
<h1 class="entry-title" style="float: left;"><?php the_title(); ?></h1>
<div style="display: inline-block;"><?php echo DISPLAY_ULTIMATE_PLUS(); ?></div>
</header><!-- .entry-header -->
Obviously if you can easily edit the CSS files, you could add the following statements (instead of putting them inline in the HTML), like so;
.entry-title {
float: left;
}
.entry-header > div {
display: inline-block;
}
How do i remove the inline-block space between two divs that are a part of the wordpress loop? They are supposed to sit side-by-side, each being 50% width. I realize I could change the width to 49% or use floats, but I would like to leave it this way if possible.
I know you normally can do it by eliminating the white space in the coding with comments as below:
<div class="before-after">
<img src="images/ba_01.jpg" alt="">
<h4>Frick TDSH 355XL<br><small>Slide Valve and Rotor Housing</small></h4>
</div><!-- this comment here eleminates the spacing
--><div class="before-after">
<img src="images/ba_02.jpg" alt="">
<h4>Frick NGC300 Gear Plate</h4>
</div>
This is my wordpress loop, and no matter where I put the comment, and still adds white space in the actual returned html.
<?php
$my_query = new WP_Query(
array(
'cat' => '2',
)
);
while ( $my_query->have_posts() ) : $my_query->the_post();
?>
<div class="before-after">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<h4><?php the_title(); ?><br><small><?php the_content(); ?></small></h4>
</div><!-- --><?php endwhile;?><?php wp_reset_postdata();?>
And this is what is showing up in Developer Tools:
<div class="before-after">...</div>
<!---->
<div class="before-after">...</div>
<!---->
I'm sure I'm just overlooking something easy, but any help would be appreciated. Thanks!
#Prusprus here it is straight from the source code:
<div class="before-after">
<img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_02.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick NGC300 Gear Plate" />
<h4>Frick NGC300 Gear Plate<br><small></small></h4>
</div>
<!---->
<div class="before-after">
<img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_01.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick TDSH 355XL" />
<h4>Frick TDSH 355XL<br><small><p>Slide Valve and Rotor Housing</p>
</small></h4>
</div>
<!---->
There may be a different way to mark this as answered, not sure, but #Prusprus gave me the solution in a comment above.
I simply had to remove a line break at the start of my code between the closing php tag and the start of my div.
The traditional way of floating inline-block elements could correct this, but since its unfavored there is another way.
You can also set the letter spacing of the parent element to -0.31em to solve this and set the letter-spacing back to normal in the divs themselves. I'll set up a jsfiddle in a sec.
CODE
.row {
letter-spacing:-0.31em;
}
.col {
letter-spacing:normal;
display:inline-block;
width:50%;
}
Good luck!
Two methods here
Set the parent's font-size to 0 and then restore it on the inline-block elements.
Apply a suitable margin to the last div.
DEMO x 2
HTML
<div class="opt1">
<div class="before-after"></div>
<div class="before-after"></div>
</div>
<div class="opt2">
<div class="before-after"></div>
<div class="before-after"></div>
</div>
CSS
.opt1, .opt2 {
margin:10px;
border:1px solid green;
}
.before-after {
display:inline-block;
background:lightgrey;
width:50%;
height:100px;
font-size:16px
font-size:1rem;
}
.opt1 {
font-size:0;
}
.opt2 .before-after{
vertical-align:top;
}
.opt2 .before-after:last-child {
margin-left:-.25em;
}