Adding image to list WordPress
- SOLVED
Hello
I am trying to add a new logo image on the bottom of the website http://www.adresinc.com
under "ARI is certified with the following organizations"
I need to add an image the same width as img06.jpg to the box at the bottom. But for some reason when I create a new line in the block-footer.php under <ul class="widget-list"> it won't display. The width of the image that i'm trying to add is "145" pixels. Can someone please tell me how to add this logo directly next to the SQF logo on the website?
Thank you!
block-footer.php code
<div class="widgets-holder">
<div class="widget-left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
<h3>ARI is certified with the following organizations...</h3>
<ul class="widget-list">
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img03.jpg" width="72" height="61" alt="logo1" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img04.jpg" width="74" height="61" alt="logo2" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img05.jpg" width="61" height="61" alt="logo3" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img06.jpg" width="145" height="38" alt="logo4" /></a></li>
</ul>
<?php endif; ?>
</div>
<div class="widget-right">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<h3>...and works with these companies</h3>
<ul class="widget-list">
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img07.jpg" width="138" height="81" alt="logo5" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img08.jpg" width="103" height="81" alt="logo6" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img09.jpg" width="113" height="81" alt="logo7" /></a></li>
</ul>
<ul class="widget-list">
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img10.jpg" width="109" height="94" alt="logo8" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img11.jpg" width="72" height="94" alt="logo9" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img12.jpg" width="81" height="94" alt="logo10" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img13.jpg" width="99" height="94" alt="logo10" /></a></li>
</ul>
<?php endif; ?>
</div>
</div>
Style.css code
/*
Theme Name: Ari
*/
/*-----Default WP Styles-----*/
.commentlist li, #commentform input, #commentform textarea {
font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentlist li ul li {
font-size: 1em;
}
.commentlist li {
font-weight: bold;
}
.commentlist li .avatar {
border: 1px solid #eee;
padding: 2px;
background: #fff;
}
.commentlist cite, .commentlist cite a {
font-weight: bold;
font-style: normal;
font-size: 1.1em;
}
.commentlist p {
font-weight: normal;
line-height: 1.5em;
text-transform: none;
}
#commentform p {
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
.commentmetadata {
font-weight: normal;
}
#wp-calendar #prev a, #wp-calendar #next a {
font-size: 9pt;
}
#wp-calendar a {
text-decoration: none;
}
#wp-calendar caption {
font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
text-align: center;
}
#wp-calendar th {
font-style: normal;
text-transform: capitalize;
}
/* Begin Images */
p img {
padding: 0;
max-width: 100%;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* End Images */
#commentform input {
width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;
}
#commentform {
margin: 5px 10px 0 0;
}
#commentform textarea {
width: 100%;
padding: 2px;
}
#commentform #submit {
margin: 0 0 5px auto;
float: right;
}
/* Begin Comments*/
.alt {
margin: 0;
padding: 10px;
}
.commentlist {
padding: 0;
text-align: justify;
margin: 0;
}
.commentlist li {
margin: 15px 0 10px;
padding: 5px 5px 10px 10px;
list-style: none;
}
.commentlist li ul li {
margin-right: -5px;
margin-left: 10px;
}
.commentlist p {
margin: 10px 5px 10px 0;
}
.children { padding: 0; }
#commentform p {
margin: 5px 0;
}
.nocomments {
text-align: center;
margin: 0;
padding: 0;
}
.commentmetadata {
margin: 0;
display: block;
}
/* End Comments */
/* Begin Calendar */
#wp-calendar {
empty-cells: show;
margin: 10px auto 0;
width: 155px;
}
#wp-calendar #next a {
padding-right: 10px;
text-align: right;
}
#wp-calendar #prev a {
padding-left: 10px;
text-align: left;
}
#wp-calendar a {
display: block;
}
#wp-calendar caption {
text-align: center;
width: 100%;
}
#wp-calendar td {
padding: 3px 0;
text-align: center;
}
#wp-calendar td.pad:hover { /* Doesn't work in IE */
background-color: #fff; }
/* End Calendar */
/* Captions */
.aligncenter,
div.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
border: 1px solid #ddd;
text-align: center;
background-color: #f3f3f3;
padding-top: 4px;
margin: 10px;
}
.wp-caption img {
margin: 0;
padding: 0;
border: 0 none;
}
.wp-caption p.wp-caption-text {
font-size: 11px;
line-height: 17px;
padding: 0 4px 5px;
margin: 0;
}
/* End captions */
Answers (5)
Grégory Viguier answers:
See the last <li> :
<h3>ARI is certified with the following organizations...</h3>
<ul class="widget-list">
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img03.jpg" width="72" height="61" alt="logo1" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img04.jpg" width="74" height="61" alt="logo2" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img05.jpg" width="61" height="61" alt="logo3" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img06.jpg" width="145" height="38" alt="logo4" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img07.jpg" width="145" height="38" alt="logo5" /></a></li>
</ul>
And if you want it just to the right of the SQF logo, look for css/all.css at line 322 :
.widget-list {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
width: 280px;
}
And comment (or delete) the width :
.widget-list {
list-style: none outside none;
margin: 0;
overflow: hidden;
padding: 0;
/*width: 280px;*/
}
Jason Smikle comments:
Thank you!
Enrique Acevedo answers:
Hello, you apparently are using a widget in which you put all the pictures, what you should do is go to menu "Appearance-> Widgets" and edit the text widget to add the new image or to disable it if the following is you put in the code
Jason Smikle comments:
Thank you so much! finally do you know where I can change the parameters so it'll stay on the same line? If you goto the site now you'll see it's underneath the other logo and I need it to be next to it.
Linda answers:
HI, how about dividing the two rows up like the right footer? Something like this
<ul class="widget-list">
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img03.jpg" width="72" height="61" alt="logo1" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img04.jpg" width="74" height="61" alt="logo2" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img05.jpg" width="61" height="61" alt="logo3" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img06.jpg" width="145" height="38" alt="logo4" /></a></li>
</ul>
<ul class="widget-list">
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img06.jpg" width="145" height="38" alt="logo4" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/newimage.jpg" width="145" height="38" alt="logo4" /></a></li>
</ul>
Jason Smikle comments:
I tried just adding the code to the list didn't work... also tried breaking up the list didn't work either. any other ideas/suggestions?
Linda comments:
Hi, it looks like you almost have it. Just this .widget-list
width: 280px;
is causing you issues.
Linda comments:
So try adding
.widget-list { width: 400px; }
to your .css file.
Luis Abarca answers:
first: add more space for wdgets
.widget-list {
...
width: 400px;
}
<div class="widgets-holder">
<div class="widget-left">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
<h3>ARI is certified with the following organizations...</h3>
<ul class="widget-list">
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img03.jpg" width="72" height="61" alt="logo1" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img04.jpg" width="74" height="61" alt="logo2" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img05.jpg" width="61" height="61" alt="logo3" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img06.jpg" width="145" height="38" alt="logo4" /></a></li>
<strong> <li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/your-new-img.jpg" width="145" height="38" alt="logo" /></a></li> </strong>
</ul>
<?php endif; ?>
</div>
<div class="widget-right">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
<h3>...and works with these companies</h3>
<ul class="widget-list">
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img07.jpg" width="138" height="81" alt="logo5" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img08.jpg" width="103" height="81" alt="logo6" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img09.jpg" width="113" height="81" alt="logo7" /></a></li>
</ul>
<ul class="widget-list">
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img10.jpg" width="109" height="94" alt="logo8" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img11.jpg" width="72" height="94" alt="logo9" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img12.jpg" width="81" height="94" alt="logo10" /></a></li>
<li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/img13.jpg" width="99" height="94" alt="logo10" /></a></li>
</ul>
<?php endif; ?>
</div>
</div>
Luis Abarca comments:
You just need more room for images in the widget-list div, i suggest you 400px, and add the new li highlighted in the code above, thats it !
Luis Cordova answers:
none of the others is the answer
I think all you want to do is to drop this on your all.css
div#text-3 {
height: 300px; // adapt this to make your other box fit
}
This should enlarge vertically the box where the logos are and will make your other image fit so it is visible