• All right. So I’ve built a theme, and applied it here:

    https://www.scifabulous.com

    This morning, I figured out how to enable it for widgets. The only problem is now it’s formatted the widgets the same way it formats the buttons in the sidebar. I’d like the titles to look the same as “CATEGORIES” does above it, but I’d like the actual links to be just link, instead of the buttons with pinstriped background. Is that possible?

    Style.css

    /*
    Theme Name: PinFabulous
    Theme URI: https://www.scifabulous.com
    Description: IT HAS PINSTRIPES. 8D ALSO I HAVE BEEN DOING THIS FOR FOUR DAYS NAO. xD
    Version: 1.0
    Author: Emily Pritchard
    Author URI: https://www.scifabulous.com
    */
    
    body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
    	margin: 0; padding: 0; border: 0;
    }
    
    body {
    	font: 14px/24px Century Gothic, Sans-Serif; color: #bdbdbd;
    	background: #000 url(images/bg.png);
    }
    
    a {
    	color: #b30e82; text-decoration: none;
    }
    	a:hover {
    		color: #b30e82;
    	}
    
    #container {
    	width: 960px; margin: 0 auto;
    }
    
    #header {
    	overflow: hidden;
    }
    	#header #logo {
    		margin: 20px 0 10px 15px; float: left;
    	}
    
    	#header #subscribe {
    		list-style: none; float: right; margin: 25px 15px 0 0;
    		font-size: 14px;
    	}
    		#header #subscribe li.rss {
    			background: url(images/rss-icon.png) left no-repeat;
    			padding: 0px 0 0px 30px;
    		}
    		#header #subscribe li.twitter {
    			background: url(images/twitter-icon.png) left no-repeat;
    			padding: 0px 0 0px 30px;
    		}
    		#header #subscribe li.facebook {
    			background: url(images/facebook-icon.png) left no-repeat;
    			padding: 0px 0 0px 30px;
    		}
    		#header #subscribe li.youtube {
    			background: url(images/youtube-icon.png) left no-repeat;
    			padding: 0px 0 0px 30px;margin: 0 0 10px 0;
    		}
    #main {
    	background: url(images/faux.png);
    	border: 5px solid #000;
    	overflow: hidden;
    	box-shadow: 0px 0px 5px #000;
    	-moz-box-shadow: 0px 0px 5px #000;
    	-webkit-box-shadow: 0px 0px 5px #000;
    
    	border-bottom: 15px solid #000;
    }
    #content {
    	width: 590px; float: left; padding: 35px 30px 60px 30px;
    }
    	#main #content h2 {
    		font-size: 24px; font-weight: normal; text-transform: uppercase;
    		margin: 0 0 15px 0;
    	}
    
    	#main p {
    		margin: 0 0 24px 0;
    	}
    
    	#main #content .post-thumbnail {
    		float: left; margin: 4px 30px 10px 0;
    	}
    		#main #content .post-thumbnail img {
    			padding: 1px; border: 4px solid #000;
    		}
    
    }
    
    #main #content .post-info {
    	padding: 1px; border: 1px solid #000; margin: 0 0 60px 0;
    }
    	#main #content .post-info ul {
    		background: url(images/bg.png); list-style: none; text-transform: uppercase;
    		padding: 15px 20px 10px 20px; overflow: hidden;
    	}
    		#main #content .post-info ul li.date {
    			float: left;
    		}
    		#main #content .post-info ul li.category {
    			float: left; margin: 0 0 0 20px;
    			background: url(images/star.png) left no-repeat; padding: 0 0 0 35px;
    		}
    		#main #content .post-info ul li.read-more {
    			float: right;
    		}
    
    #main #content .pagination {
    	overflow: hidden; margin: 0 0 60px 0;
    }
    	#main #content .pagination p {
    		width: 180px; border: 1px solid #000; padding: 2px;
    		text-align: center;
    	}
    		#main #content .pagination p.prev { float: left; }
    		#main #content .pagination p.next { float: right; }
    		#main #content .pagination p a {
    			display: block; background: url(images/bg.png); padding: 15px 0px 10px 0px;
    			text-transform: uppercase;
    		}	
    
    #main #side {
    	width: 250px; float: left; padding: 15px 30px 15px 15px;
    
    }	
    
    	#main #side ul#pages, #main #side ul#categories {
    		list-style: none; margin: 0 0 30px 0;
    	}
    		#main #side ul#pages li, #main #side ul#categories li {
    			border: 1px solid #000000; padding: 1px;
    			margin: 0 0 10px 0; text-align: right;
    		}
    			#main #side ul#pages li a, #main #side ul#categories li a {
    				display: block; background: url(images/bg.png); padding: 15px 20px 10px 20px;
    				text-transform: uppercase;
    			}
    
    #main #side h3 {
    	font-size: 20px; font-weight: normal; text-transform: uppercase;
    	margin: 0 0 10px 0; text-align: center;
    }			
    
    #main #side form {
    	overflow: hidden; margin: 0 0 30px 0;
    }
    	#main #side input.searchbar {
    		float: left; width: 150px; height: 25px; padding: 8px 13px 6px 13px;
    		background: #b30e82; border: 1px solid #000;
    		font: 14px Helvetica, Sans-Serif; color: #7e7e7e;
    	}
    	#main #side input.searchbutton {
    		width: 34px; height: 34px; float: left; margin: 3px 0 0 8px;background: url(images/search-icon.png);
    		 text-indent: -9999px;
    		cursor: pointer;
    
    		padding: 0 0 0 34px; /*IE Fix*/
    	}
    
    #footer {
    	overflow: hidden; margin: 0 0 60px 0;
    }
    	#footer #credits {
    		list-style: none; margin: 20px 0 0 30px;
    	}
    		#footer #credits li {
    			float: left; margin: 0 6px 0 0;
    		}
    			#footer #credits li.wordpress a {
    				display: block; width: 20px; height: 20px;
    				background: url(images/bg.png) no-repeat 0 0; text-indent: -9999px;
    			}
    			#footer #credits li.spoongraphics a {
    				display: block; width: 25px; height: 20px;
    				background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;
    			}
    
    	#footer p#back-top {
    		float: right; margin: 0 30px 0 0;
    	}
    		#footer p#back-top a {
    			display: block; padding: 0 0 0 26px;
    			background: url(images/star.png) left no-repeat;

    Sidebar.php

    <div id="side">
    	<ul id="pages">
    		<li><a href="<?php echo get_option('home'); ?>">Home</a></li>
    <?php wp_list_pages('title_li=' ); ?>
    
    	<h3>Categories</h3>
    	<ul id="categories">
    		<?php wp_list_categories('show_count=0&title_li=&hide_empty=0&exclude=1'); ?>
    	</ul>
    
    	<h3>Search</h3>
    
    	<form action="<?php get_option('home') ?>" method="get">
    		<fieldset>
    			<input type="text" class="searchbar" name="s" id="s" />
    			<input type="submit" class="searchbutton" value="Search" />
    		</fieldset>
    	</form>
    
    	<h3>About</h3>
    
    	<p>SciFabulous is a website dedicated to celebrating geek girls and everything that makes them completely fabulous! <a href="https://scifabulous.com/about/">Read more…</a></p>
    
    <?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <?php dynamic_sidebar( 'sidebar-1' ); ?>
    <?php endif; ?>
    
    </div>
    	</div>
    </div>

    [please don’t bump – think of what other information you could add]

  • The topic ‘Formatting Widgets In Dynamic Sidebar’ is closed to new replies.