Posted 2 years ago #
Hey everyone,
I'm looking for a solution for inserting a top, middle repeating, and bottom image for my widgets.
So if I would add more writing to a widget, it would get longer, it will expand and contract depending on the content.
I want it to look like this image: http://i44.tinypic.com/kd1lrc.png which will be sliced into 3 sections.
My website: http://sitedemonstration.hostei.com/
Can anyone help me? Thx!!
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.
Posted 2 years ago #
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? http://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?
Posted 2 years ago #
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: http://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.
Posted 2 years ago #
Hey,
Ok...I will find it out in about 2 minutes...btw...THX a LOT!!
Posted 2 years ago #
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="http://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="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" 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 :P
Posted 2 years ago #
Ok,
The top image is: 336x31
The middle repeated image is: 336x1
The bottom image is: 336x14
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.
Posted 2 years ago #
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,
Posted 2 years ago #
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)
Posted 2 years ago #
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?
http://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.
:)
Posted 2 years ago #
Hey,
Ok I will do that. But is $10 enough for something like this what you have just done for me? Or do u need more money?
Also, have you looked at my site in Internet Explorer 7 or 8? Can u see more than one navigation bar?
And I see the sidebar and I see the navigational bar that has links to 'About'. If there is supposed to be another bar, I don't see it?
Posted 2 years ago #
Open up Internet Explorer and visit the website.
Do you see 2 RED navigation bars? Because IE7 and 8 show 2 red navigation bars, and it is only supposed to show one like in FireFox and other browsers.
If we're going to talk about money, please email me as I remember reading somewhere on the forums a while back that actual 'job' related things should be talked about off-forum. :)
I will answer your question through the email.
I actually don't have IE7 or IE8. I have IE6 and it shows the middle part of the red bar and it shows that the ends of the red bar are shifted upwards.
EDIT: Maybe that's why it looks like there are two navigational bars?
Posted 2 years ago #
Hey,
Yes that is correct!! Would you know of any way how to fix that and make it look how it looks in FireFox or Opera? Just the regular ONE red navigation bar? I have been stuck on this for a LONG time!!
I also tried moving this navigation bar up under that black 728x90 ad but I couldn't seem to do it.
Wrap the entire navbar in a div perhaps? That's usually how I keep either vertically or horizontally aligned elements in line. Give it a shot and see what happens.
Posted 2 years ago #
Ok I will try that and respond in 1 minute :P
Posted 2 years ago #
I tried it but it didn't work, still has the 2nd red navigation bar :(
Oh well......
I'm off of the forums for now and will be back when I'm back; send me an email if you need further support.
Posted 2 years ago #
Hey,
Yes of course!!! I will be off too...here it is almost 10:00 PM!
Have a great day (or night) :)
Posted 2 years ago #
That is a detailed guide indeed, let me try and report back if the problems still happen :-)
Posted 1 year ago #
Wow EMG that was very kind of you my friend.
Thanks on behalf of us noobs :D
Lou Sparx http://www.socfx.com
This topic has been closed to new replies.
