Widget titles – from text to image?

  • Resolved soulofadoption

    (@soulofadoption)


    15 years, 3 months ago

    So after chasing after a couple of different suggested ways of doing this, I am more confused than ever. I finally got a tip from Esmi on how to make both my sidebars dynamic (Woo! and thank you!), have gotten everything customized the way I want it – and then realize that the font I want to use (Stylistic SF) will not actually display for a good number of people. :::bangs head on desk:::

    My solution, of course, is to use an image instead of a font. Easy, right?

    Not if you’re using widgets, it’s not. :::sighs::: Add to that the fact that there seem to be a whole lot of opinions on HOW to accomplish this, and most of them are geared towards much older versions of WP and/or do not relate to my existing theme’s coding.

    Or else I’m just a doofus, which I freely admit is the most likely possibility.

    So to sum up – instead of having the titles (Archives, Blogroll, Categories, etc.) of my widgets be text that is font-defined by the CSS, I want to use actual images for each widget I decide to use. Ones where the words are part of the image, not imposed on a background image by the CSS.

    I’m completely lost on how to accomplish this, and I think my eyes are crossing… I’m seeing CSS and php when I close my eyes.

    Potentially relevant file content –

    Function: 

    <?php
if ( function_exists('register_sidebar') )
    register_sidebar(array(
    	'name' => 'Sidebar Left',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
    register_sidebar(array(
    	'name' => 'Sidebar Right',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<h3>',
        'after_title' => '</h3>',
    ));
?>

    Sidebar: 

    <!-- Sidebar -->
		<div class="sidebar">

			<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Left') ) : ?>

			<?php endif; ?>

		</div>
		<!-- Sidebar -->

    Footer (because my right sidebar is here): 

    <!-- Sidebar -->
		<div class="sidebar2">

			<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Sidebar Right') ) : ?>

			<?php endif; ?>

		</div>
		<div class="clear"></div>
	<!-- /Main -->

	<!-- Footer -->
	<div id="footer">

		<!-- Copyright -->
		<div id="copyright">
			<br />(c)Copyrighted Blah Blah Blah, All Rights Reserved.<br />

  </div>

		<!-- /Copyright -->

	</div>

	<!-- Footer -->

</div>
<!-- /Page -->

</body>

</html>

    And last but not least, my CSS (which would not define for my newly dynamic right sidebar until I put the definitions in the /*Footer*/ which might be a tip that helps someone else on that score): 

    /* General */

body {
	margin: 0;
	background: url("images/bg.png");
}

h1, h2, h3, h4 {
	margin: 0;
}

img {
	border: 0;
}

.clear {
	clear: both;
	height: 1px;
	overflow: hidden;
}

/* Page */

#page {
	margin: 0 auto;
	width: 1004px;
}

/* Header */

#header {
	width: 1004px;
	height: 400px;
	background: url("images/header.jpg") no-repeat;
	position: relative;
}

	/* Header - Info */

	#header #header-info {
		position: absolute;
		top: 70px;
		left: 350px;
	}

	#header #header-info h1 {
		color: #ffffff;
		font: bold 30px "Stylistic SF Bold", Comic Sans MS;
	}

	#header #header-info h1 a {
		color: #ffffff;
		text-decoration: none;
	}

	#header #header-info .description {
		color: #ffffff;
		font: bold 15px "Trebuchet MS", Verdana;
	}

	/* Header - Menu */

	#header #header-menu {
		position: absolute;
		top: 70px;
		left: 26px;
		height: 53px;
	}

	#header #header-menu ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
		height: 53px;
	}

	#header #header-menu ul li {
		float: right;
		height: 53px;
		margin-right: 8px;
		font: bold 10px/43px "Verdana", Verdana;
		color: #ffffff;
		text-transform: lowercase;
		background: url("images/header_menu_left.gif") no-repeat;
	}

	#header #header-menu ul li a {
		color: #ffffff;
		text-decoration: none;
		padding: 0 40px;
		background: url("images/header_menu_right.gif") no-repeat right top;
		display: block;
	}

	#header #header-menu ul li a:hover {
		text-decoration: underline;
	}

	#header #header-menu ul li ul {
		display: none;
	}

	/* Header - Topbar */

	#header #topbar {
		position: absolute;
		top: 225px;
		left: 0px;
		width: 1004px;
		height: 201px;
		color: #000000;
		font: normal 12px "Trebuchet MS", Verdana;
	}

	#header #topbar h3 {
		font: bold 15px "Verdana", Verdana;
		color: #000000;
	}

	#header #topbar ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	#header #topbar ul li {
		padding-top: 12px;
		color: #ffffff;
		font: normal 12px "Trebuchet MS", Verdana;
	}

	#header #topbar ul li a {
		color: #ffffff;
		text-decoration: none;
	}

	#header #topbar ul li a:hover {
		text-decoration: underline;
	}

		/* Header - Topbar - Boxes */

		#header #topbar #topbar-left {
			width: 285px;
			padding: 35px 33px;
			float: left;
		}

		#header #topbar #topbar-center {
			width: 306px;
			float: left;
			padding: 12px 0 0 30px;
		}

		#header #topbar #topbar-right {
			width: 287px;
			float: left;
			padding: 12px 0 0 30px;
		}

/* Main */

#main {
	width: 1004px;
	background: url("images/main_1.gif") repeat-y;
}

#main-top {
	width: 1004px;
	background: url("images/main_top.gif") no-repeat;
}

#main-bottom {
	width: 992px;
	padding-left: 12px;
	min-height: 50px;
	background: url("images/main_bottom.gif") no-repeat left bottom;
}

	/* Main - Content */

	#content {
		float: left;
		width: 570px;
		padding: 6px 16px 0 16px;
	}

	/* Main - Content - Post */

	#content .post {
		color: #FFFFFF;
		float: left;
		margin-bottom: 16px;
		width: 554px;
		padding: 7px;
		background: #191D27;
	}

		/* Post - Title */

		#content .post .post-title {
			width: 554px;
			height: 51px;
			color: #FFFFFF;
			font: bold 12px "Trebuchet MS", Verdana;
		}

		#content .post .post-title a {
			color: #FFFFFF;
			text-decoration: none;
		}

		#content .post .post-title a:hover {
			text-decoration: underline;
		}

		#content .post .post-title .post-date {
			float: left;
			background: url("images/post_date.gif") no-repeat;
			width: 60px;
			height: 51px;
			color: #0D2845;
			text-align: center;
			text-transform: uppercase;
			margin-right: 10px;
			font: bold 10px/15px "Trebuchet MS", Verdana;
		}

		#content .post .post-title .post-date span {
			margin-bottom: 2px;
			display: block;
			font: bold 16px/34px "Trebuchet MS", Verdana;
		}

		#content .post .post-title h2 {
			padding: 4px 0 3px 0;
			color: #FFFFFF;
			font: bold 19px "Verdana", Verdana;
		}

		#content .post .post-title h2 a {
			color: #FFFFFF;
			text-decoration: none;
		}

		#content .post .post-title h2 a:hover {
			text-decoration: underline;
		}

		/* Post - Entry */

		#content .post .post-entry {
			font: normal 12px/18px "Trebuchet MS", Verdana;
			color: #FFFFFF;
			padding: 0 4px;
			width: 546px;
		}

		#content .post .post-entry a {
			color: #FFFFFF;
			text-decoration: none;
		}

		#content .post .post-entry a:hover {
			text-decoration: underline;
		}

		#content .post .post-entry .more-link {
			font: bold 12px/20px "Trebuchet MS", Verdana;
			color: #FFFFFF;
			float: right;
			padding-bottom: 5px;
		}

		#content .post .post-entry .more-link a {
			color: #FFFFFF;
			text-decoration: none;
		}

		#content .post .post-entry .more-link a:hover {
			text-decoration: underline;
		}

		/* Post - Info */

		#content .post .post-info {
			padding: 10px 4px 0 4px;
			width: 546px;
			clear: both;
			font: bold 12px "Trebuchet MS", Verdana;
			color: #FFFFFF;
		}

		#content .post .post-info a {
			color: #FFFFFF;
			text-decoration: none;
		}

		#content .post .post-info a:hover {
			text-decoration: underline;
		}

		/* Post - Comments */

		#content .post h3 {
			color: #FFFFFF;
			font: bold 17px "Verdana", Verdana;
			margin: 25px 0 5px 0;
			padding: 0 4px;
			width: 546px;
		}

		#content .post .comments {
			padding: 0 4px;
			width: 546px;
			font: normal 12px/18px "Trebuchet MS", Verdana;
			color: #FFFFFF;
		}

		#content .post .comments a {
			color: #FFFFFF;
			text-decoration: none;
		}

		#content .post .comments a:hover {
			text-decoration: underline;
		}

		#content .post .comments ol {
			margin: 10px 0 10px 0;
			padding-left: 25px;
		}

		#content .post .comments ol li {
			padding: 5px;
		}

		#content .post .comments ol li.alt {
			background: #000000;
		}

		#content .post .comments ol li cite {
			color: #FFFFFF;
			font-style: normal;
			font-weight: bold;
		}

		#content .post .comments ol li cite a {
			color: #FFFFFF;
			text-decoration: none;
		}

		#content .post .comments ol li cite a:hover {
			text-decoration: underline;
		}

		#content .post .comments ol li .commentmetadata a {
			color: #FFFFFF;
			text-decoration: none;
		}

		#content .post .comments ol li .commentmetadata a:hover {
			text-decoration: underline;
		}

		#content .post #commentform {
			margin: 0;
			font: normal 12px/18px "Trebuchet MS", Verdana;
			color: #FFFFFF;
			padding: 0 4px;
			width: 546px;
		}

		#content .post #commentform a {
			color: #FFFFFF;
			text-decoration: none;
		}

		#content .post #commentform a:hover {
			text-decoration: underline;
		}

 /* Main - Content - Navigation */

#content .navigation {
font: bold 12px "Trebuchet MS", Verdana;
color: #ffffff;
width: 495px;
height: 25px;
float: left;
margin-bottom: 25px;
}

#content .navigation a {
color: #ffffff;
text-decoration: none;
}

#content .navigation a:hover {
text-decoration: underline;
}

#content .navigation .navigation-previous {
float: left;
}

#content .navigation .navigation-next {
float: right;
}

	/* Main - Sidebar */

	.sidebar {
		float: left;
		width: 189px;
		font: strong 12px/18px "Stylistic SF Bold", Comic Sans MS;
		color: #ffffff;
		padding: 28px 0;
	}

	.sidebar a {
		color: #8E0000;
		text-decoration: none;
	}

	.sidebar a:hover {
		text-decoration: underline;
	}

		/* Sidebar - Titles */

		.sidebar h3 {
			padding-left: 20px;
			font: bold 22px "Stylistic SF Bold", Comic Sans MS;
			text-transform: lowercase;
			color: #ffffff;
			height: 46px;
			width: 189px;
			background: url("images/sidebar_title.gif") no-repeat;
		}

		/* Sidebar - Menus */

		.sidebar ul {
			margin: 0 0 20px 18px;
			padding: 0;
			list-style-type: none;
		}

		.sidebar ul li {
			color: #ffffff;
			font: normal 12px/26px "Trebuchet MS", Verdana;
		}

		.sidebar ul li a {
			color: #ffffff;
			text-decoration: none;
		}

		.sidebar ul li a:hover {
			text-decoration: underline;
		}

		/* Sidebar - Forms */

		.sidebar #searchform {
			margin: 0 auto;
			padding: 15px 0 25px 0;
			width: 145px;
			text-align: center;
		}

		.sidebar #searchform #s {
			width: 145px;
		}

		/* Sidebar - Tables */

		.sidebar #calendar_wrap {
			margin: 5px auto 20px auto;
			width: 120px;
		}

		.sidebar #calendar_wrap caption {
			font-weight: bold;
		}

		.sidebar #calendar_wrap #today {
			font-weight: bold;
		}

		/* Sidebar - Texts */

		.sidebar2 .textwidget {
			padding: 0 10px 20px 10px;
		}

/* Footer */

	/* Main - Sidebar2 */

	.sidebar2 {
		float: left;
		width: 189px;
		font: strong 12px/18px "Stylistic SF Bold", Comic Sans MS;
		color: #ffffff;
		padding: 7px 0;
	}

	.sidebar2 a {
		color: #8E0000;
		text-decoration: none;
	}

	.sidebar2 a:hover {
		text-decoration: underline;
	}

		/* Sidebar2 - Titles */

		.sidebar2 h3 {
			padding-left: 20px;
			font: bold 22px "Stylistic SF Bold", Comic Sans MS;
			text-transform: lowercase;
			color: #ffffff;
			height: 46px;
			width: 189px;
			background: url("images/sidebar_title.gif") no-repeat;
		}

		/* Sidebar2 - Menus */

		.sidebar2 ul {
			margin: 0 0 20px 18px;
			padding: 0;
			list-style-type: none;
		}

		.sidebar2 ul li {
			color: #ffffff;
			font: normal 12px/26px "Trebuchet MS", Verdana;
		}

		.sidebar2 ul li a {
			color: #ffffff;
			text-decoration: none;
		}

		.sidebar2 ul li a:hover {
			text-decoration: underline;
		}

		/* Sidebar2 - Forms */

		.sidebar2 #searchform {
			margin: 0 auto;
			padding: 15px 0 25px 0;
			width: 145px;
			text-align: center;
		}

		.sidebar2 #searchform #s {
			width: 145px;
		}

		/* Sidebar2 - Tables */

		.sidebar2 #calendar_wrap {
			margin: 5px auto 20px auto;
			width: 120px;
		}

		.sidebar2 #calendar_wrap caption {
			font-weight: bold;
		}

		.sidebar2 #calendar_wrap #today {
			font-weight: bold;
		}

		/* Sidebar2 - Texts */

		.sidebar2 .textwidget {
			padding: 0 10px 20px 10px;
		}

#footer {
	margin-top: 45px;
	width: 1004px;
	height: 62px;
	position: relative;
	color: #FFFFFF;
	font: normal 10px/15px "Trebuchet MS", Verdana;
	text-align: center;
}

#footer a {
	color: #CCCCCC;
	text-decoration: none;
}

#footer a:hover {
	text-decoration: underline;
}

    Please understand that I have tried to follow the (exceptionally brief and apparently assumptive of higher skills than I have) suggestions I’ve managed to find through searching strings such as “widget title image” and the like – but I have not been able to accomplish my goal. So if anyone is willing to take a shot at this, please assume I have the coding skills of a 90 year old grandmother who thinks the internet is something you use to hold your intestines inside your body – because after repeated failures and realizing I’m blind to the obvious (thank you again, Esmi), that is PRECISELY how I would define my skill level tonight.

    Thanks for any ideas you can offer, and so help me if I find out there is a plug-in that would make simple work of this (which I also haven’t found), I’m going to need one of those internets to keep myself from losing my lunch in shame.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Thread Starter soulofadoption

    (@soulofadoption)

    I hope it’s ok, I’m bumping this back up since I still haven’t resolved it. Thanks. ??

    If you want to display a specific font for certain text elements in your theme then I suggest cufon.

    Basically it replaces the text in an element of your choice (h1, h2 etc) with an image of the text in your desired font.

    It is quite easy to set up (follow the instructions carefully) but helps if u know a bit of javascript.

    Also, please do not copy-paste massive blocks of code into your posts – no-one will read it…

    there is a ‘purely’ css way to do this, but for it to work you need to fiddle your register_sidebar parameters so that you can target each widget with CSS selectors. so make each widget an html block, like an LI or a DIV, by changing your params to something like

    'before_widget' => '<li id=\"%1$s\" class=\"widget %2$s\">'

    with after_widget set appropriately to end the block. what that magic %1$s etc in there does is sub in the widget id/class so the HTML looks like:

    <li id="text-459543412" class="widget widget_text">

    that way you can target in CSS each widget title with selectors like

    li#text-459543412 h3 { css code here}

    and then you can set each specific h3 to have an image background, and offset the text to vanish and so on.

    Thread Starter soulofadoption

    (@soulofadoption)

    Thanks to both of you for the tips! I knew someone would have a fresh idea for me to explore…I really appreciate it!

    I’m going to give both of these suggestions a try, see which one seems to work best with what I’m trying to do with my site.

    Thank you again!

    Thanks for bringing up this subject. I’m trying to do the same thing but it seems my theme isn’t making this very easy…

    I want to add the code that alanft suggested:
    'before_widget' => '<li id=\"%1$s\" class=\"widget %2$s\">'

    But I can’t seem a place to add this. Below is is my sidebar code, can anyone offer any suggestions on where to add this line?

    <?php

function arras_widget_search($args) {
	extract($args, EXTR_SKIP);
?>
<?php echo $before_widget; ?>
<?php echo $before_title . __('Search', 'arras') . $after_title; ?>
<form method="get" id="widgetsearch" action="<?php bloginfo('url'); ?>/">
	<input type="text" value="<?php the_search_query(); ?>" name="s"
			id="s" size="20" onfocus="this.value=''" class="text" />
	<input type="submit" id="searchsubmit" class="submit" value="<?php _e('Search', 'arras') ?>" />
</form>
<?php echo $after_widget; ?>
<?php
}

function arras_get_tabbed_opts($selected, $default) {
	$opts = array(
		'none' => __('None', 'arras'),
		'featured' => __('Featured Posts', 'arras'),
		'latest' => __('Latest Posts', 'arras'),
		'comments' => __('Recent Comments', 'arras'),
		'tags' => __('Tag Cloud', 'arras')
	);

	if ( function_exists('akpc_most_popular') ) $opts['popular'] = __('Popular Posts', 'arras');
	if ( !$selected ) $selected = $default;

	foreach ( $opts as $id => $val ) { ?>
    <option value="<?php echo $id; ?>" <?php if ( $selected == $id ) echo 'selected="selected"'; ?>>
    <?php echo $val; ?>
    </option>
    <?php }
}

function arras_widget_previews($args) {
	global $allowed_cats;

	extract($args, EXTR_SKIP);

	$options = get_option('arras_widget_previews');
	if (!$allowed_cats) $allowed_cats = arras_get_option('gaming_cats');

	$r = new WP_Query( array('showposts' => 5, 'cat' => $options['cat'] ) );
	if ($r->have_posts()) :
	?>
		<?php echo $before_widget; ?>
        <?php echo $before_title . $options['title'] . $after_title; ?>
        <ul>
        <?php while ($r->have_posts()) : $r->the_post(); ?>
            <li>
                <strong><a href="<?php the_permalink() ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?> </a></strong>
            </li>
        <?php endwhile; ?>
        </ul>
        <?php echo $after_widget; ?>
	<?php
	endif;
}

function arras_widget_previews_control() {
	$cats = get_categories();

	$options = $newoptions = get_option('arras_widget_previews');
	if ( isset($_POST['arras-widget-previews-submit']) ) {
		$newoptions['title'] = strip_tags( stripslashes($_POST['arras-widget-previews-title']) );
		$newoptions['cat'] = (int) $_POST['arras-widget-previews-cat'];
	}
	if ( $options != $newoptions ) {
		$options = $newoptions;
		update_option('arras_widget_previews', $options);
	}
	$title = attribute_escape($options['title']);
	if ($title == '') $title = __('Latest Previews', 'arras');
	if ($options['cat'] == 0) $options['cat'] = 1;
?>
	<p><label for="arras-widget-previews-title"><?php _e('Title:'); ?> <input class="widefat" id="arras-widget-previews-title" name="arras-widget-previews-title" type="text" value="<?php echo $title; ?>" /></label></p>
    <p><label for="arras-widget-previews-cat"><?php _e('Previews Category:'); ?> <select class="widefat" id="arras-widget-previews-cat" name="arras-widget-previews-cat">
		<?php foreach ( $cats as $opt ) : ?>
            <option <?php if ( $options['cat'] == $opt->cat_ID ) echo ' selected="selected"'; ?> value="<?php echo $opt->cat_ID; ?>"><?php echo $opt->name; ?></option>
        <?php endforeach; ?>
        </select></label></p>
	<input type="hidden" id="arras-widget-previews-submit" name="arras-widget-previews-submit" value="1" />
<?php
}

function arras_widget_reviews($args) {
	global $allowed_cats;

	extract($args, EXTR_SKIP);

	$options = get_option('arras_widget_reviews');
	if (!$allowed_cats) $allowed_cats = arras_get_option('gaming_cats');

	$r = new WP_Query( array('showposts' => 5, 'cat' => $options['cat'] ) );
	if ($r->have_posts()) :
	?>
		<?php echo $before_widget; ?>
        <?php echo $before_title . $options['title'] . $after_title; ?>
        <ul>
        <?php while ($r->have_posts()) : $r->the_post(); ?>
            <li>
                <strong><a href="<?php the_permalink() ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?> </a></strong>
    Chad

    (@lynneandchad)

    Thanks alanft, that helped a ton. I was pretty thrilled to find the theme I’m currently using was already set up that way, which made things easier.

    airandseabattle – If you’re still working on getting this set up, try looking in your functions.php file instead of your sidebar.php. Should find what you need there. Good Luck!

    Found this thread through a Google search for “image title image wordpress” because I want to include both regular text AND a small “New!!” button image I created… obviously, to show people there is something new there.

    While the above thread doesn’t help me much, I did have an idea.

    Why not alter the theme PHP code so that WordPress displays an img tag in the area where it would normally display the widget title? And then, in the WP Admin, where you’d normally type the name of the widget title, you type the filename of the image you want?

    As always, the only downside to making custom changes to your theme is that your changes will be wiped out if your theme’s author ever releases a new version and you upgrade. So be sure to make note of exactly what you changed, because you’ll just need to change it again anytime you upgrade to a new version of the theme. Of course, if you created your own theme from scratch, then this entire paragraph doesn’t apply. But it’s important to note for anyone else reading this, who may be using a ready-made theme.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Widget titles – from text to image?’ is closed to new replies.