How to add top, middle repeating and bottom image for each widget? Thank you!

You’re going to need to set up styling for the header, content block, and bottom strip for the widgets.

I say ‘set up’ because to do what you want to do, you will probably (talking from my experience, though others may have something different to say) need to utilize PHP to separate the h2 header and content block and a bottom part in the widget into separate parts and then utilize the PHP function to then insert specific CSS styling into each section you have separated.

Thus, you will need: one PHP function written to separate and then apply the appropriate styling, CSS code for the container, header, the content block, and the bottom block of the widget.

Hello,

Thanks for your reply! Seeing that I don’t really know much PHP and a little CSS, that didn’t really make sense to me ??

Would you be able to provide more detailed information?

EDIT: Would this be of any help? https://forum.bytesforall.com/showthread.php?t=935

Yeaaap. ??

That’s pretty much what I am talking about!

Would you be able to follow the instructions given on that forum and apply it to your theme?

Hey,

Um…I’m kinda a noob ?? I tried, some of it is similar, but some of it isn’t.

I’m using a blank wordpress theme by Refueled found here: https://www.refueled.net/blank-wordpress-themes/ The Blank 2 Column – Right Sidebar one.

So yea I don’t think I can follow the instructions, coz the theme I am using is a little different ??

This is the first time I am trying to customize a theme after I lost $130 from a ”’professional”’ service that wasn’t even XHTML 1.0 W3C valid ??

Would you be able to help me out a little?

Ouch! Losing money over a job that didn’t work out isn’t cool; I’m sorry you had to go through with that.

So okay. ??

If you can be patient with me (I’m doing my own work right now, and since my server went down, I’m a bit behind so I’m multitasking at the moment), I’ll help you get yourself started and do my best to explain the process.

Can you please tell me what you have in your functions.php Template file and in your sidebar.php Template file?

Also, please tell me the exact width and height of all of your sliced images.

Hey,

Ok…I will find it out in about 2 minutes…btw…THX a LOT!!

Hey,

====>functions.php<====contains this:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
?>
<?php
function widget_mytheme_search() {
?>
<h2>Search</h2>
<form id="searchform" method="get" action="<?php bloginfo('home'); ?>/"> <input type="text" value="type, hit enter" onfocus="if (this.value == 'type, hit enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'type, hit enter';}" size="18" maxlength="50" name="s" id="s" /> </form>
<?php
}
if ( function_exists('register_sidebar_widget') )
    register_sidebar_widget(__('Search'), 'widget_mytheme_search');
?>
<?php
add_filter('comments_template', 'legacy_comments');
function legacy_comments($file) {
	if(!function_exists('wp_list_comments')) : // WP 2.7-only check
		$file = TEMPLATEPATH . '/legacy.comments.php';
	endif;
	return $file;
}
?>

====>sidebar.php<==== contains this:

<div id="sidebar">
		<ul>
			<?php 	/* Widgetized sidebar, if you have the plugin installed. */
					if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
			<li>
				<?php include (TEMPLATEPATH . '/searchform.php'); ?>
			</li>

			<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
			<li><h2>Author</h2>
			<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
			</li>
			-->

			<?php if ( is_404() || is_category() || is_day() || is_month() ||
						is_year() || is_search() || is_paged() ) {
			?> <li>

			<?php /* If this is a 404 page */ if (is_404()) { ?>
			<?php /* If this is a category archive */ } elseif (is_category()) { ?>
			<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>

			<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for the day <?php the_time('l, F jS, Y'); ?>.</p>

			<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for <?php the_time('F, Y'); ?>.</p>

			<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
			<p>You are currently browsing the <a href="<?php bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for the year <?php the_time('Y'); ?>.</p>

			<?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
			<p>You have searched the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives
			for <strong>'<?php the_search_query(); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>

			<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
			<p>You are currently browsing the <a href="<?php echo bloginfo('url'); ?>/"><?php echo bloginfo('name'); ?></a> blog archives.</p>

			<?php } ?>

			</li> <?php }?>

			<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

			<li><h2>Archives</h2>
				<ul>
				<?php wp_get_archives('type=monthly'); ?>
				</ul>
			</li>

			<?php wp_list_categories('show_count=1&title_li=<h2>Categories</h2>'); ?>

			<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
				<?php wp_list_bookmarks(); ?>

				<li><h2>Meta</h2>
				<ul>
					<?php wp_register(); ?>
					<li><?php wp_loginout(); ?></li>
					<li><a href="https://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
					<li><a href="https://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
					<li><a href="https://www.ads-software.com/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
					<?php wp_meta(); ?>
				</ul>
				</li>
			<?php } ?>

			<?php endif; ?>
		</ul>
	</div>

I will tell you the the exact width and height of all 3 sliced images in about 3 minutes ??

Ok,

The top image is: 336×31

The middle repeated image is: 336×1

The bottom image is: 336×14

Thanks a bunch. ??

I downloaded the theme and am currently testing my code on it.

I will let you know the results once I’m finished.

Hey THX!!!

Um…by the way…you don’t have to because I know you are VERY busy but…

I have a number of problems (not this big though, doesn’t take up this much of your time). You help people on the forum for free, would you mind helping me when I need it, for a price? Say…$5-15 for every fix?

Small things like adding a background image to the WP-Polls Widget. Does that sound good? Again, you don’t have to help me coz I know you are busy but why help people for free when you can earn some money for a burger or coffee? lol

Okay, I’m finished… I think.

========================
!BACKUP YOUR THEME before you make any of my changes!
========================

There are TWO bits of code for you to insert and ONE thing you need to go do before you do anything else.

Here we go.

– The FIRST thing you need to go do is open up your sidebar.php file and find the <ul> and </ul> tags and DELETE them.

SAVE the file.

After THAT:

– The FIRST block of code you need to alter is in your functions.php file.

Where it says:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
?>

Please REPLACE it with this:

<?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
	'before_widget' => '<div id="%1$s" class="sidebarblock">',
	'before_title' => '<h2>',
	'after_title' => '</h2><div class="sidebarblock-mid">',
    'after_widget' => '</div><div class="sidebarblock-bot"></div></div>',
	));
?>

SAVE the file.

– The SECOND bit of code is for your CSS stylesheet:

Look for #sidebar in your stylesheet and it’s little block of code. Found it?

AFTER the #sidebar block of code, add this:

/* begin special widget styling */

.sidebarblock {
	width: 336px;
	height: auto;
	margin-bottom: 20px;
	padding: 0px;
	background-color: transparent;
}

#sidebar h2 {
	width: 336px;
	height: 31px;
	margin: 0px;
	background: transparent url('ENTER URL of HEADER IMAGE HERE') top left no-repeat;
}

.sidebarblock-mid {
	width: 336px;
	height: auto;
	margin: 0px;
	padding: 0px;
	background: transparent url('ENTER URL of MIDDLE IMAGE HERE') top left repeat;
}

.sidebarblock-mid ul {
        margin: 0px !important;
}

.sidebarblock-mid ul li {
        list-style-position: inside;
        margin: 0px !important;
}

.sidebarblock-bot {
	width: 336px;
	height: 14px;
	margin: 0px;
	background: transparent url('ENTER URL of BOTTOM IMAGE HERE') top left no-repeat;
}

/* end special widget styling */

MAKE SURE you enter in your own url for the images you want to use for the widget.

SAVE the file.

LOAD your website and see what happens.

———-

I uploaded the theme to my own WordPress and only making the changes (I don’t know what other code changes you yourself might have done to affect the sidebar stylization) that I have shown above, I was able to achieve the results you are looking for AND have my site validate.

If, after making these changes, the changes don’t show or something is broken, it is possible that earlier changes you might have made to the sidebar is interfering with the coding I am using or that you might have entered my coding wrong. If you didn’t enter my coding wrong, then you will need to look at whatever changes you might have made to your theme before adding my coding.

ALSO, you will notice that the blocks of text in the middle block don’t have margins. You will have to fiddle with the list styling to style it to the way you want it to be.

Cheers,

Hey,

Ok I will try it out and tell you if it works. Thx, I can see you have done a LOT of work!!

So whenever you have time, would you be willing to do the same as you have done except get paid around $10?(sorry if it isn’t enough, but I’m running out of dough)

Um…also,

Would you mind having a look at my other temp site using Internet Explorer and telling me if you see TWO navigation bars?

https://sitedemonstration3.hostoi.com/

Thx!

BTW: I don’t know what is wrong with it, since it is XHTML 1.0 W3C Transitional.

If you’re interested in further support for my code and/or interested in working with me beyond what I offer here on the forums, you may get in touch with me through email at:

emg.at.wp [ at ] gmail.com

Obviously, please write my email address like you would write any normal email address.

??