how to resize the website logo
-
hi. i am currently having problem to resize my website logo . i would like to make it longer but nothing works. please help me
my website is : https://athanmedia.com
this is my code'<body <?php body_class(); ?>> <!-- ====================================================================== START HEADER ======================================================================= --> <div class="header"> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="logo"> <a>"><?php if ( file_exists( TEMPLATEPATH . '/images/YOURIMAGEFILEHERE' ) ) { ?> </a><a>"><img src="<?php bloginfo('template_url'); ?>/images/YOURIMAGEFILEHERE" alt="<?php theme_logo(); ?>" /></a> <?php } else { ?> <h1><a>"><?php theme_logo(); ?> </a></h1> <? } ?>'i used the theme logo plugin to insert the logo. thank you
-
Thanks for posting the link!
Here is the HTML that controls this section:
<div class="col-md-4"> <div class="logo"> <a href="https://athanmedia.com"> </a><h1><a href="https://athanmedia.com"></a><a href="https://athanmedia.com"><img src="https://athanmedia.com/wp-content/uploads/2014/09/athan-media-logo-copy.png" alt="Athan Media"> </a></h1> </div> </div>We need to adjust a CSS rule that is limiting the size. The rule uses Media Queries so it take precedence over other style that are applied.
Look through your style sheet : https://athanmedia.com/wp-content/themes/novelty/css/bootstrap.css
See line 621:
@media (min-width: 992px) {This is the media query that defines this section applying all the styles contained within to any screen width larger than 992px.
Line 652:
.col-md-4 { width: 33.33333333333333%; }See above, the div that contains your logo has this class assigned, constraining it to 33% width of the page.
Now the best way to fix it would be to not change the Bootstrap CSS, but rather find the theme’s php file that controls this section (likely it is header.php), and just remove this class from this div, and assign your own class that you can go on to define in your style.css file.
hi thank you for the reply but i dont fully understand it . Can you show me step by step to change it .. sorry
Vasugi,
I have created a step by step video tutorial for you. I think it will cover everything you want to know:
https://xcartguru.com/tutorials/wordpress-tutorials/wp-quick-tips/editing-the-wordpress-logo-in-a-bootstrap-based-theme/ -12:14Hello. I am trying to insert the Meta Slider plug-in into my header. These are the instructions that the meta slider site gives me:
<?php
echo do_shortcode(“[metaslider id=184]”);
?>Now, I understand and am able to get to the ‘header.php’. However, once I am there, I do not know where to insert the meta slider code into the header code.can u help me where to put this code…
‘<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” /><?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!– ======================================================================
START HEADER
======================================================================= –>
<div class=”header”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4″>
<div class=”logo”>
“>
<?php
$logo_text = _go(‘logo_text’);
if(empty($logo_text)){
$logo_image = _go(‘logo_image’);
if(empty($logo_image))
echo ‘‘.get_bloginfo(‘name’).’‘.get_bloginfo(‘description’).’‘;
else
echo ‘<img src=”‘.$logo_image.'” alt=”logo” />’;
}else{
$logo_text_color = _go(‘logo_text_color’);
if(empty($logo_text_color))
$logo_text_color = ”;
else
$logo_text_color = ‘color:’.$logo_text_color.’;’;
$logo_text_font = _go(‘logo_text_font’);
if(empty($logo_text_font))
$logo_text_font = ”;
else
$logo_text_font = ‘font-family:’.$logo_text_font.’;’;
$logo_text_size = _go(‘logo_text_size’);
if(empty($logo_text_size))
$logo_text_size = ”;
else
$logo_text_size = ‘font-size:’.$logo_text_size.’px;’;
echo ‘<span style=”‘.$logo_text_color.$logo_text_font.$logo_text_size.'”>’.$logo_text.'</span>’;
}
?>
</div>
</div>
<div class=”col-md-4″>
<form class=”subscription” id=”newsletter” method=”post”>
<span class=”subscription-text”><?php _ex(‘Newsletter subscribe’, ‘header’, ‘novelty’); ?></span>
<span class=”input-cover”>
<input type=”submit” value=”” class=”subscription-button”>
<input type=”text” name=”email” placeholder=”<?php _ex(‘Email …’, ‘header’, ‘novelty’); ?>” class=”subscription-line” data-tt-subscription-required data-tt-subscription-type=”email”>
<div class=”result_container”></div>
</span>
</form>
</div>
<?php
$zoomy_social = array(
‘facebook’=>_go(‘social_platforms_facebook’),
‘twitter’=>_go(‘social_platforms_twitter’),
‘linkedin’=>_go(‘social_platforms_linkedin’),
‘rss’=>_go(‘social_platforms_rss’),
‘pinterest’=>_go(‘social_platforms_pinterest’),
‘youtube’=>_go(‘social_platforms_youtube’),
‘flickr’=>_go(‘social_platforms_flickr’),
‘behance’=>_go(‘social_platforms_behance’),
‘dribbble’=>_go(‘social_platforms_dribbble’),
‘google’=>_go(‘social_platforms_google’),
‘vimeo’=>_go(‘social_platforms_vimeo’)
);
$zoomy_social_filtered = array_filter($zoomy_social);
if(!empty($zoomy_social_filtered)): ?>
<div class=”col-md-4″>
<ul class=”header-socials”>
<?php foreach($zoomy_social_filtered as $zoomy_social_key => $zoomy_social_value): ?>- ” href=”<?php echo $zoomy_social_value; ?>”>
<?php endforeach; ?>
</div>
<?php endif; ?></div>
</div><div class=”menu site-bg-color”>
<div class=”container”>
<form class=”header-search” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<input type=”submit” id=”searchsubmit” value=”” class=”header-search-button” />
<input type=”text” value=”” name=”s” id=”s” class=”header-search-line” placeholder=”<?php _ex(‘Search …’,’search form’,’novelty’); ?>” />
</form>
<div class=”responsive-menu”>Menu</div>
<?php wp_nav_menu(array(
‘theme_location’ => ‘novelty_menu’
)); ?>
</div>
</div>
</div>
<!– ======================================================================
END HEADER
======================================================================= –‘<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″ />
<title><?php wp_title( ‘|’, true, ‘right’ ); ?></title>
<link rel=”alternate” type=”application/rss+xml” title=”RSS 2.0″ href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”text/xml” title=”RSS .92″ href=”<?php bloginfo(‘rss_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”Atom 0.3″ href=”<?php bloginfo(‘atom_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” /><?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<!– ======================================================================
START HEADER
======================================================================= –>
<div class=”header”>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4″>
<div class=”logo”>
“>
<?php
$logo_text = _go(‘logo_text’);
if(empty($logo_text)){
$logo_image = _go(‘logo_image’);
if(empty($logo_image))
echo ‘‘.get_bloginfo(‘name’).’
‘.get_bloginfo(‘description’).’‘;
else
echo ‘<img src=”‘.$logo_image.'” alt=”logo” />’;
}else{
$logo_text_color = _go(‘logo_text_color’);
if(empty($logo_text_color))
$logo_text_color = ”;
else
$logo_text_color = ‘color:’.$logo_text_color.’;’;
$logo_text_font = _go(‘logo_text_font’);
if(empty($logo_text_font))
$logo_text_font = ”;
else
$logo_text_font = ‘font-family:’.$logo_text_font.’;’;
$logo_text_size = _go(‘logo_text_size’);
if(empty($logo_text_size))
$logo_text_size = ”;
else
$logo_text_size = ‘font-size:’.$logo_text_size.’px;’;
echo ‘<span style=”‘.$logo_text_color.$logo_text_font.$logo_text_size.'”>’.$logo_text.'</span>’;
}
?>
</div>
</div>
<div class=”col-md-4″>
<form class=”subscription” id=”newsletter” method=”post”>
<span class=”subscription-text”><?php _ex(‘Newsletter subscribe’, ‘header’, ‘novelty’); ?></span>
<span class=”input-cover”>
<input type=”submit” value=”” class=”subscription-button”>
<input type=”text” name=”email” placeholder=”<?php _ex(‘Email …’, ‘header’, ‘novelty’); ?>” class=”subscription-line” data-tt-subscription-required data-tt-subscription-type=”email”>
<div class=”result_container”></div>
</span>
</form>
</div>
<?php
$zoomy_social = array(
‘facebook’=>_go(‘social_platforms_facebook’),
‘twitter’=>_go(‘social_platforms_twitter’),
‘linkedin’=>_go(‘social_platforms_linkedin’),
‘rss’=>_go(‘social_platforms_rss’),
‘pinterest’=>_go(‘social_platforms_pinterest’),
‘youtube’=>_go(‘social_platforms_youtube’),
‘flickr’=>_go(‘social_platforms_flickr’),
‘behance’=>_go(‘social_platforms_behance’),
‘dribbble’=>_go(‘social_platforms_dribbble’),
‘google’=>_go(‘social_platforms_google’),
‘vimeo’=>_go(‘social_platforms_vimeo’)
);
$zoomy_social_filtered = array_filter($zoomy_social);
if(!empty($zoomy_social_filtered)): ?>
<div class=”col-md-4″>
<ul class=”header-socials”>
<?php foreach($zoomy_social_filtered as $zoomy_social_key => $zoomy_social_value): ?>- ” href=”<?php echo $zoomy_social_value; ?>”>
<?php endforeach; ?>
</div>
<?php endif; ?></div>
</div><div class=”menu site-bg-color”>
<div class=”container”>
<form class=”header-search” action=”<?php echo esc_url( home_url( ‘/’ ) ); ?>”>
<input type=”submit” id=”searchsubmit” value=”” class=”header-search-button” />
<input type=”text” value=”” name=”s” id=”s” class=”header-search-line” placeholder=”<?php _ex(‘Search …’,’search form’,’novelty’); ?>” />
</form>
<div class=”responsive-menu”>Menu</div>
<?php wp_nav_menu(array(
‘theme_location’ => ‘novelty_menu’
)); ?>
</div>
</div>
</div>
<!– ======================================================================
END HEADER
======================================================================= —
- The topic ‘how to resize the website logo’ is closed to new replies.