Title: Add Image
Last modified: August 20, 2016

---

# Add Image

 *  [MichelleHoeg](https://wordpress.org/support/users/michellehoeg/)
 * (@michellehoeg)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/add-image-1/)
 * Okay, so here is my site: [http://www.malecherringandkrause.com](http://www.malecherringandkrause.com)
 * If you will notice there is a small white box at the top above “Browse Categories”.
   I was wondering how to add an image within the white box. (Of course the box 
   will have to be bigger, as it’s a more square-shaped image).
 * Here is my code.
 *     ```
       /*
       Theme Name: Malec Herring & Krause
       Theme URI: http://malecherringandkrause.com/
       Description: Designed for WordPress.
       Version: 0.3
       Author: John Brien Dilts
       Author URI: http://hybridindie.com/
   
       The CSS, XHTML and design is released under GPL:
       http://www.opensource.org/licenses/gpl-license.php
       */
   
       /*
       HTML Elements
       Blues #3c78a7
       Reds #8c2236
       */
   
       * {
       	margin:0;
       	padding:0;
       	}
   
       body {
       	font: 100% Arial, Helvetica;
       	background: #FFF;
       	color: #333;
       	}
   
       p {
       	margin: 15px 0;
       	}
   
       a:link, a:visited {
       	color: #8c2236;
       	text-decoration:none
       	}
   
       a:hover, a:active {
       	color: #8c2236;
       	text-decoration:underline;
       	}
   
       a img {
       	border:0;
       	}
   
       code {
       	font: 1.0em 'Courier New', Courier, Fixed;
       	background:#ececec;
       	}	
   
       acronym, abbr, span.caps {
       	font-size: 0.9em;
       	letter-spacing: .07em;
       	cursor: help;
       	}			
   
       acronym, abbr {
       	border-bottom: 1px dashed #999;
       	}
   
       blockquote {
       	padding: 10px 10px 0 10px;
       	border-top: 1px solid #ddd;
       	border-bottom: 1px solid #ddd;
       	background: #eee;
       	font:1.0em Arial;
       	line-height:1.5em;
       	margin:10px 0px;
       	}
   
       select {
       	width: 130px;
       	}	
   
       /* Structure */
   
       #head {
       	width:960px;
       	margin:0px auto;
       	margin-top:15px;
       	padding:0px;
       	font-size:0.7em;
       	}
   
       #page {
       	width:940px;
       	margin:0px auto;
       	padding:10px;
       	background:#ececec;
       	font-size:0.7em;
       	}
   
       .left, .alignleft {
       	float:left;
       	}
   
       .right, .alignright {
       	float:right;
       	}
   
       /* Navigation Bar*/
       #navbar {
       	margin:0 auto;
       	margin-top:15px;
       	padding:0px 10px;
       	text-transform:uppercase;
       	background:#2c2c2c url(images/navbar.png);
       	position: relative;
       	}
   
       #page-bar {
       	width:722px;
       	}
   
       #page-bar ul {
       	list-style: none;
       	}
   
       #page-bar li {
       	float:left;
       	list-style:none;
       	cursor: pointer;
       	display:block;
       	border-right:1px solid #333;
       	}
   
       #page-bar li:hover {
       	background: #8c2236;
       	}
   
       #page-bar a, #page-bar a:visited {
       	margin: 0px;
       	padding:10px 16px;
       	font-weight:bold;
       	color:#FFF;
       	display:block;
       	}
   
       #page-bar a:hover {
       	text-decoration:none;
       	display:block;
       	}
   
       #searchform {
       	width:194px;
       	float:right;
       	text-align:right;
       	padding-top:8px;
       	margin-right:10px;
       	}
   
       /* Dropdown Menus */
       #page-bar li {
       	float: left;
       	margin: 0px;
       	padding: 0px;
       	}
   
       #page-bar li li {
       	float: left;
       	margin: 0px;
       	padding: 0px;
       	width: 122px;
       	text-transform:none;
       	}
   
       #page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
       	background: #2B2B2B;
       	width: 122px;
       	float: none;
       	margin: 0px;
       	padding: 5px 10px 5px 18px;
       	border-top: 1px solid #C0C0C0;
       	z-index: 999;
       	}
   
       #page-bar li li a:hover, #page-bar li li a:active {
       	background: #666666;
       	padding: 5px 10px 5px 18px;
       	z-index: 999;
       	}
   
       #page-bar li ul {
       	position: absolute;
       	width: 10em;
       	left: -999em;
       	z-index: 999;
       	}
   
       #page-bar li:hover ul {
       	left: auto;
       	display: block;
       	}
   
       #page-bar li:hover ul, #page-bar li.sfhover ul {
       	left: auto;
       	}
   
       /* Text*/
   
       h1 {
       	font:3.5em Arial;
       	font-weight:bold;
       	letter-spacing:-0.08em;
       	}
   
       h2 {
       	font:2.3em Georgia, "Times New Roman";
       	}
   
       h3 {
       	font:1.3em Arial;
       	margin-bottom:3px;
       	color:#8c2236;
       	font-weight:bold;
       	}
   
       h4 {
       	font:1.0em Arial;
       	}
   
       h3.cat_title, h3.cat_title a {
       	color:#333;
       	letter-spacing:-0.05em;
       	font-size:0.85em;
       	}
   
       h3#respond {
       	margin-top:0px;
       	padding-top:20px;
       	}
   
       h3#comments {
       	margin-top:32px;
       	padding-left:0px;
       	}
   
       h3.authors {
       	margin-top:15px;
       	}
   
       /* Index Page*/
   
       #logo {
       	width:350px;
       	}
   
       #tagline {
       	margin-top:5px;
       	font-size:1em;
       	color:#333;
       	}
   
       #top {
       	padding:0;
       	}
   
        #headline {
       	width:590px;
       	float:left;
       	background:#fff;
       	padding:10px;
       	font-size:1.05em;
       	line-height:1.5em;
       	margin:0;
       	}
   
       #headline  div.title {
       	font-weight:bold;
       	font:2.4em Georgia;
       	letter-spacing:-0.05em;
       	display:block;
       	padding-bottom:5px;
       	}
   
       #headline div.meta {
       	display:block;
       	margin-top:-5px;
       	padding-bottom:2px;
       	}
   
       #headline p {
       	padding-bottom:15px;
       	}
   
       #featured {
       	width:300px;
       	background:#fff;
       	float:right;
       	padding:10px 10px 9px 10px;
       	margin: 0 0 10px;
       	}
   
       #featured .clearfloat {
       	margin-top:7px;
       	margin-bottom:8px;
       	}
   
       #featured .info {
       	margin-top:5px;
       	padding-top:5px;
       	float:right;
       	width:180px;
       	}
       #featured .info p {margin-top:5px;}
   
       #featured .title {
       	font-weight:bold;
       	}
   
       #headline a img, #featured a img {
       	border:1px solid #ccc;
       	margin-top:5px;
       	margin-right:10px;
       	padding:2px;
       	}
   
       #middle {
       	width: 590px;
       	background:#fff;
       	float:left;
       	padding:10px;
       	margin:10px 0;
       	}
   
       .category {
       	width:176px;
       	float:left;
       	border-top:8px solid #333;
       	margin:0px;
       	padding:5px 10px 10px 10px;
       	background:#fff;
       	}
   
       .category p {
       	margin:0;
       	}
   
       #cat-1, #cat-3, #cat-5  {border-top:8px solid #333333;}
       #cat-2, #cat-4 {border-top:8px solid #8c2236;}
   
       .category span.cat_title, #front-popular h3, #front-list .cat_title, #archive .cat_title {
       	text-transform:lowercase;
       	margin:0;
       	font-weight:bold;
       	font-size:1.5em;
       	letter-spacing:-0.05em;
       	}
   
       #front-popular h3 {
       	color:#fff;
       	}
   
       .category a {
       	color:#333;
       	display:block;
       	background:none;
       	}
   
       .category a:hover {
       	background:none;
       	color:#fff;
       	text-decoration:none;
       	}
   
       #cat-1:hover, #cat-3:hover, #cat-5:hover {background:#333333; color:#fff; }
       #cat-2:hover, #cat-4:hover {background:#8c2236; color:#fff; }
       #cat-1:hover a, #cat-3:hover a, #cat-5:hover a {background:#333333; color:#fff; }
       #cat-2:hover a, #cat-4:hover a {background:#8c2236; color:#fff; }
   
       #bottom {
       	width: 940px;
       	}
   
       #front-list {
       	width:590px;
       	background:#fff;
       	padding:10px;
       	font-size:1.05em;
       	line-height:1.75em;
       	float:left;
       	}
   
       #archive {
       	padding-top:15px;
       	font-size:1.05em;
       	line-height:1.75em;
       	}
   
       #front-list blockquote {
       	padding: 0px 10px 0 10px;
       	}
   
       #front-list .title, #archive .title {
       	font-weight:bold;
       	font:2.0em Georgia;
       	letter-spacing:-0.05em;
       	}
   
       #front-list .clearfloat, #archive .clearfloat {
       	padding-bottom:10px;
       	border-bottom:1px dotted #ccc;
       	margin-bottom:10px;
       	}
   
       #front-list .spoiler, #archive .spoiler {
       	display:block;
       	margin-top:3px;
       	}
   
       #front-list p, #archive p {
       	margin:0px;
       	padding:0px;
       	}
   
       .author {
       	font-size:0.8em;
       	font-weight:bold;
       	}
   
       .meta {
       	font-size:0.8em;
       	color:#333;
       	}
   
       .meta a {
       	color:#333;
       	}
   
       #headline p, #featured p {
       	margin:0;
       	}
   
       /* Content Page*/
   
       #content {
       	width:590px;
       	background:#fff;
       	padding:10px;
       	font-size:1.05em;
       	line-height:1.75em;
       	float:left;
       	min-height:400px;
       	}
   
       #content.home {background:#ececec;padding:0;}
   
       #content .breadcrumbs, #content .breadcrumbs a {
       	font-weight:bold;
       	color:#333;
       	}
   
       #content h2.title {
       	font:2.2em Georgia;
       	font-weight:bold;
       	letter-spacing:-0.05em;
       	border-bottom:1px solid #ddd;
       	border-top:3px solid #ddd;
       	padding:5px 0px;
       	}
   
       .post {
       	font-size:1.05em;
       	line-height:1.75em;
       	}
   
       .post p {
       	margin-top:0px;
       	}
   
       .post .clearfloat {
       	border-bottom:1px dotted #ccc;
       	margin:10px 0px;
       	}
   
       .post ul, .post ol, #front-list ul, #front-list ol {
       	margin-bottom:15px;
       	}
   
       .post ul li, #front-list ul li {
       	list-style:square;
       	margin-left:30px;
       	}
   
       .post ol li, #front-list ol li {
       	list-style:decimal;
       	margin-left:30px;
       	}
   
       .post ol li ul li, #front-list ol li ul li {
       	list-style:square;
       	margin-left:20px;
       	}
   
       .post img, .post a img, #front-list img, #archive img {
       	border:1px solid #ccc;
       	margin:0 10px 5px 0;
       	padding:2px;
       	}
   
       .post .ads {
       	margin-top:10px;
       	}
   
       .entry {
       	margin-top:20px;
       	}
   
       #stats {
       	margin-top:0px;
       	padding:4px 0px;
       	text-transform:uppercase;
       	font:0.8em Arial;
       	display:block;
       	}
   
       #stats span {
       	padding: 0px 20px 0px 0px;
       	}
   
       #stats span a:hover {
       	background:none;
       	}
   
       #stats span a {
       	color:#333;
       	}
   
       #stats img, #nav img {
       	border:0px;
       	margin:0px;
       	padding:0px;
       	}
   
       #tools {
       	width:590px;
       	height:25px;
       	font-size:0.95em;
       	}
   
       #tools a:hover {
       	background:none;
       	}
   
       .navigation {
       	padding:5px 0px;
       	text-align:Center;
       	}
   
       /* Sidebar*/
       #sidebar {
       	width:320px;
       	float:right;
       	margin:0px 0px 0px 0px;
       	}
   
       #sidebar h3 {
       	font:1.1em Arial;
       	font-weight:bold;
       	background:#333;
       	color:#fff;
       	margin:10px 0px 5px 0px;
       	padding:3px 10px;
       	}
   
       #sidebar-top, #sidebar-bottom {
       	width:300px;
       	float:right;
       	padding:0px 10px 10px 10px;
       	background:#fff;
       	}
   
       #sidebar-bottom, #sidebar-middle {
       	margin-top:10px;
       	}
   
       #sidebar-middle {
       	width:320px;
       	float:right;
       	}
   
       #sidebar-left {
       	width:135px;
       	padding:0px 10px 10px 10px;
       	float:left;
       	background:#fff;
       	}
   
       #sidebar-right {
       	width:135px;
       	padding:0px 10px 10px 10px;
       	float:right;
       	background:#fff;
       	}
   
       #sidebar li {
       	list-style:none;
       	border-bottom:1px dotted #ccc;
       	display:block;
       	padding:2px 0px 2px 13px;
       	background:url(images/sub.png) no-repeat 0 0px;
       	}
   
       #sidebar li ul li:last-child{
       	list-style:none;
       	border-bottom:0px dotted #ccc;
       	display:block;
       	padding:2px 0px 0px 13px;
       	background:url(images/sub.png) no-repeat 0 0px;
       	}
   
       #sidebar-ads {
       	width:300px;
       	float:right;
       	margin-bottom:10px;
       	padding:10px;
       	background:#fff;
       	}
   
       /* Form Elements */
   
       select {
       	border:1px solid #333;
       	width:100%
       	}
   
       .field {
       	padding: 2px;
       	border:1px solid #333;
       	background:#fff;
       	font-size:1.0em;
       	}
   
       #s {
       	padding:1px;
       	font-size:1.0em;
       	width:150px;
       	}
   
       #searchsubmit {
       	padding-left:5px;
       	}
   
       #commentform input {
       	width: 140px;
       	margin: 5px 5px 1px 0;
       	}
   
       #commentform textarea {
       	width: 99%;
       	margin-top:5px;
       	}
   
       /* Comments*/
   
       .commentlist cite {
       	font-style:normal;
       	margin-bottom:4px;
       	display:block;
       	}	
   
       .commentlist blockquote {
       	background:#ededed;
       	}
   
       .commentlist li {
       	padding: 10px 0px 10px 0px;
       	list-style:none;
       	margin-bottom:3px;
       	}
   
       .commentlist li li {
       	background:none;
       	border:none;
       	list-style:square;
       	margin:3px 0 3px 20px;
       	padding:3px 0;
       	}
   
       .commenttext {
       	padding: 10px 10px 0px 10px;
       	background:#f2f2f2;
       	border-top:1px solid #ddd;
       	border-bottom: 1px solid #ddd;
       	width:495px;
       	float:right
       	}
   
       .commentlist cite strong {
       	font-size:1.1em;
       	}
   
       li.my_comment {
       	background: #FFF;
       	border:none;
       	}
   
       li.my_comment cite strong {
       	font-size: 1.3em;
       	color:#313228;
       	}
   
       #commentform small {
       	background:#FFF;
       	font-weight:bold;
       	padding:0;
       	}
   
       .commentmetadata {
       	color:#4d4d4d;
       	display: block;
       	margin-top:3px;
       	text-align:right;
       	font-size:0.9em;
       	}
   
       .commentmetadata a, .commentmetadata a:visited {
       	color:#959382;
       	}
   
       .commentlist small {
       	background:#e9e9e9;
       	}
   
       .avatar {
       	border:1px solid #bbb;
       	margin:0px 10px 0px 0px;
       	float:left;
       	padding:2px;
       	width:55px;
       	height:55px;
       	}	
   
       #comment {
       	width:590px;
       	background:#fff;
       	}
   
       /* Footer*/
   
       #front-popular {
       	font-size:0.7em;
       	color:#fff;
       	width: 940px;
       	background:#2c2c2c url(images/bottombar.png) bottom no-repeat;
       	margin: 0 auto;
       	padding:10px;
       	}
   
       #recentpost, #mostcommented {
       	width:280px;
       	float:left;
       	padding:10px;
       	}
   
       #mostcommented {
       	margin-left:17px;
       	}
   
       #recent_comments {
       	width:280px;
       	float:right;
       	padding:10px;
       	}
   
       #recentpost a, #mostcommented a, #recent_comments a {
       	color:#fff;
       	}
   
       #recentpost ul, #mostcommented ul, #recent_comments ul {
       	margin-top:5px;
       	}
   
       #recentpost ul li, #mostcommented ul li, #recent_comments ul li {
       	list-style:none;
       	border-top:1px dotted #fff;
       	padding:5px;
       	display:block;
       	}
   
       #recentpost ul li:hover, #mostcommented ul li:hover, #recent_comments ul li:hover {
       	background:#8c2236;
       	color:#fff;
       	}
   
       #recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child {
       	border-top:0px dotted #fff;
       	}
   
       #footer {
       	margin: 0 auto;
       	width: 960px;
       	font-size:0.6em;
       	padding-top:10px;
       	padding-bottom:10px;
       	}
   
       	ul { list-style-type: none;}
   
       	.hide{
       		display:none;
       	}
   
       	#content-tabs{
       		padding-bottom: 10px;
       	}
   
       	/*** ESSENTIAL STYLES ***/
       	.sf-menu, .sf-menu * {
       		margin:			0px;
       		padding:		0px;
       		list-style:		none;	text-align: left;
       	}
       	.sf-menu {
       	}
       	.sf-menu ul {
       		position:		absolute;
       		top:			-999em;
       		width:			10em; /* left offset of submenus need to match (see below) */
       	}
       	.sf-menu ul li {
       		width:			100%;
       	}
       	.sf-menu li:hover {
       		visibility:		inherit; /* fixes IE7 'sticky bug' */
       	}
       	.sf-menu li {
       		float:			left;
       		position:		relative;
       	}
       	.sf-menu a {
       		display:		block;
       		position:		relative;
       	}
       	.sf-menu li:hover ul,
       	.sf-menu li.sfHover ul {
       		left:			0;
       		top:			40px; /* match top ul list item height */
       		z-index:		995;
       	}
       	ul.sf-menu li:hover li ul,
       	ul.sf-menu li.sfHover li ul {
       		top:			-999em;
       	}
       	ul.sf-menu li li:hover ul,
       	ul.sf-menu li li.sfHover ul {
       		left:			10em; /* match ul width */
       		top:			0;
       	}
       	ul.sf-menu li li:hover li ul,
       	ul.sf-menu li li.sfHover li ul {
       		top:			-999em;
       	}
       	ul.sf-menu li li li:hover ul,
       	ul.sf-menu li li li.sfHover ul {
       		left:			10em; /* match ul width */
       		top:			0;
       	}
   
       	/*** DEMO SKIN ***/
       	.sf-menu {
       		float:			left;
       	}
   
       	.sf-menu a {
       		padding: 		9px 10px;
       		text-decoration:none;
       	}
   
       	/*** arrows **/
       	.sf-menu a.sf-with-ul {
       		padding-right: 	2.25em;
       		min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
       	}
       	.sf-sub-indicator {
       		position:		absolute;
       		display:		block;
       		right:			.75em;
       		top:			1.05em; /* IE6 only */
       		width:			10px;
       		height:			10px;
       		text-indent: 	-999em;
       		overflow:		hidden;
       	}
       	a > .sf-sub-indicator {  /* give all except IE6 the correct values */
       		top:			.8em;
       		background-position: 0 -100px; /* use translucent arrow for modern browsers*/
       	}
       	/* apply hovers to modern browsers */
       	a:focus > .sf-sub-indicator,
       	a:hover > .sf-sub-indicator,
       	a:active > .sf-sub-indicator,
       	li:hover > a > .sf-sub-indicator,
       	li.sfHover > a > .sf-sub-indicator {
       		background-position: -10px -100px; /* arrow hovers for modern browsers*/
       	}
   
       	/* point right for anchors in subs */
       	.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
       	.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
       	/* apply hovers to modern browsers */
       	.sf-menu ul a:focus > .sf-sub-indicator,
       	.sf-menu ul a:hover > .sf-sub-indicator,
       	.sf-menu ul a:active > .sf-sub-indicator,
       	.sf-menu ul li:hover > a > .sf-sub-indicator,
       	.sf-menu ul li.sfHover > a > .sf-sub-indicator {
       		background-position: -10px 0; /* arrow hovers for modern browsers*/
       	}
   
       	/*** shadows for all but IE6 ***/
       	.sf-shadow ul {
       		background:	url('images/shadow.png') no-repeat bottom right;
       		padding: 0 8px 9px 0;
       		-moz-border-radius-bottomleft: 17px;
       		-moz-border-radius-topright: 17px;
       		-webkit-border-top-right-radius: 17px;
       		-webkit-border-bottom-left-radius: 17px;
       	}
       	.sf-shadow ul.sf-shadow-off {
       		background: transparent;
       	}
       	.sliderImage span {
       	    background-color: #ccc;
       			color: #111;
       			width: 590px;
       	}
   
       	.sliderImage a:hover {text-decoration: none;}
   
       	.sliderImage span h4 {
       		font-weight: bold;
       		line-height: 17px;
       	}
       /* Float Properties*/
   
       .clearfloat:after {
       	content:".";
       	display:block;
       	height:0;
       	clear:both;
       	visibility:hidden;
       	}
   
       .clearfloat {
       	display: inline-block;
       	}
   
       /* Hides from IE-mac \*/
       * html .clearfloat {
       	height:1%;
       	}
   
       *+html .clearfloat {
       	height:1%;
       	}
   
       .clearfloat {
       	display:block;
       	}
       ```
   
 * Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [SKco](https://wordpress.org/support/users/skco/)
 * (@skco)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/add-image-1/#post-2629070)
 * It appears that white box is for the slider. Do you have any theme options that
   indicate they are for a slider? The slider could also highlight posts. You would
   need to provide more theme info or screenshots. I would start by looking for 
   theme options that indicate they are for a slider.
 *  Thread Starter [MichelleHoeg](https://wordpress.org/support/users/michellehoeg/)
 * (@michellehoeg)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/add-image-1/#post-2629078)
 * What theme info do you need?
 *  [SKco](https://wordpress.org/support/users/skco/)
 * (@skco)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/add-image-1/#post-2629081)
 * does the theme you are using have an options panel?
 *  Thread Starter [MichelleHoeg](https://wordpress.org/support/users/michellehoeg/)
 * (@michellehoeg)
 * [14 years, 2 months ago](https://wordpress.org/support/topic/add-image-1/#post-2629089)
 * I don’t believe so. Where would I find that?

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Add Image’ is closed to new replies.

 * 4 replies
 * 2 participants
 * Last reply from: [MichelleHoeg](https://wordpress.org/support/users/michellehoeg/)
 * Last activity: [14 years, 2 months ago](https://wordpress.org/support/topic/add-image-1/#post-2629089)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics