Effective Styling Techniques for S9Y Websites

Sep 21

Additional user colorsets

One of the, if not the major new feature in Bulletproof v1.1 is the possibility to add additional colorsets. Users can add their own colorset without having to edit any of the template's core files as long as they follow certain instructions.

Here's how it works: Create a new stylesheet in the template's directory, /templates/bulletproof/. The file has to be named <COLORSETNAME>_style.css, with <COLORSETNAME> being the name you want to give that new colorset. I.e., if you want to call it mycolorset, you have to create the file /templates/bulletproof/mycolorset_style.css. Bulletproof will automagically detect and include this colorset in the list of colorsets available via the Bulletproof theme options in your admin backend. You don't have to do anything else.

It might be a good idea – especially for new users – to start by copying one of the colorset stylesheets provided with bulletproof and modify it. That way, you don't have to start from scratch. Also, keep in mind that there are other stylesheets (base.css, style.css, ie5.css, ie6.css, ie7.css) included in Bulletproof. Some of these (base.css, all ie-specific stylesheets) are crucial to Bulletproof's layouts. Overwriting styles included in these files might break the layout. style.css on the other hand is kind of a fallback stylesheet – it includes many styles which are not crucial to the layout, but common styles used in all colorsets, meaning they may be overridden, but they don't have to be.

You'll also have to provide the colorset specific icons for your new colorset. These have to follow the same file naming convention like the stylesheet, i.e. a colorset specific back icon for the example mentioned above would have to be called /templates/bulletproof/img/mycolorset_back.png. These images have to be PNG images, and they have to be in the img subdirectory – otherwise the automagic detection won't work. If you feel your graphic skills are too poor or you just don't have the time to create these files, you can always copy the default ones or those used in any other colorsets. Remember, if these images are not present, visitors will only see the alternate text for them.

Posted inStyling at 12:05 | 15 Comments | 1 Trackback

Aug 20

Colorset specific icons

Feed icons, calendar arrows and graph bar (used on the archive page) all have different color variations to compliment each colorset that is included in bp. You can take advantage of this feature for any template created using the bp framework to use uniquely different icons for each of your template's colorsets, provided there is, in fact, more than a single colorset. First, we need to know where icons are stored. As with all s9y template graphics, the files are stored in /templates/bulletproof/img/. If you create your own template based upon bulletproof, you will place these images in /templates/YOUR_TEMPLATE_PATH/img/. Continue reading "Colorset specific icons" »

Posted in Styling at 16:19 | 1 Trackback

Jun 13

Bulletproof default sylesheet

/*********************************************************************/
/* Template: bulletproof for Serendipity                              */
/* Authors: Matthias Mees, David Cummins and Don Chambers                              */
/* Code contributors: Garvin Hicking and Carl Galloway                                         */
/*                                                                                                                     */
/* Stylesheet for the colorset 'violet'                                                                    */
/*                                                                                                                     */
/* The best place to ask questions about this template and its usage                       */
/* is the s9y forum, see                                                       */
/*********************************************************************/
/* Changing the feed icon for various sidebar plugins */
.serendipity_xml_icon {
	background: url(img/purple_xml.png) center center no-repeat;
	padding: 10px 0;
	margin: 0;
	visibility: visible;
}
.serendipity_xml_icon img {
	visibility: hidden;
}
a {
	color: #823995;
	text-decoration: none;
}
a:hover {
	color: #505050;
}
body {
	background: #6C7BB4 ;
}
#wrapper {
	width: 944px;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 92%;
	background-color: #ffffff;
	border: 0px;
	border: 1px solid #823995;
}
#serendipity_banner {
	height: 126px;
	margin: 0;
	padding: 0.25em;
	border-bottom: 1px solid #ddd;
	background: #3D98C5 url(img/purple_header.jpg) no-repeat;
	border: 0px;
}
#serendipity_banner h1 {
	Font-weight: bold;
	font-size: 1.4em;
	text-transform: uppercase;
	letter-spacing: .3em;
	padding: 0 0 0 0;
}
#serendipity_banner h2 {
	Font-weight: normal;
	font-size: 1.0em;
	text-transform: uppercase;
	letter-spacing: .3em;
	padding: 0 0 3em 2px;
}
#serendipity_banner a {
	color: #ffffff;
	text-decoration: none;
}
#sitenav {
	height: 14px;
	font-size: .7em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .2em;
	background: #fff url(img/nav_purple.gif) top left;
	border-top: 2px solid #ffffff;
	border-bottom: 0px solid #fff;
}
#sitenav ul li {
	margin: 0 -10px 0 -10px;
}
#sitenav ul a {
	background: #fff url(img/nav_purple.gif) top left;
	padding: 6px 10px 6px 10px;
	border-right: 1px solid #dfdfdf;
}
#sitenav ul li a:hover {
	padding: 6px 10px 6px 10px;
	background: #fff url(img/nav_purple.gif) bottom left;
}
#serendipityLeftSideBar,
#serendipityLeftSideBarLeft,
#serendipityRightSideBarLeft,
#serendipityRightSideBar,
#serendipityLeftSideBarRight, 
#serendipityRightSideBarRight {
	background-color: #ffffff;
	color: #505050;
}
#content {
	background-color: #ffffff;
	color: #505050;
}
#content h3 {
	font-size: 1em;
}
.serendipity_commentsTitle {
	font-size: 1em;
	font-weight: bold;
}
#content h4 {
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.7em;
	letter-spacing: -1px;
	margin: -5px 0 15px 0;
}
.serendipity_entryFooter {
	font-size: .9em;
	margin: 5px 0;
	padding: 8px 0;
	border-top: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf;
}
.serendipity_pageFooter {
	margin: 5px 0 10px;
}
.serendipitySideBarTitle {
	font-family: verdana, arial, helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.5em;
	letter-spacing: -1px;
	color: #30303f;
	margin: 10px 0 20px 0;
	padding: 8px 5px 8px 5px;
	border-left: 4px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
	border-top: 1px solid #dfdfdf;
	background: #EDE6EE ;
}
.serendipitySideBarContent {
	padding: 10px;
	margin: -20px 0 0 0;
	border-left: 4px solid #dfdfdf;
		border-right: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf;
	background-color: #EDE6EE;
}
#sbsitenav {
	font-size: 1.0em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .2em;
	margin: 0px 0 -10px 0px;
}
#sbsitenav ul a {
	display: block;
	border-top: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf;
	border-left: 4px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
	padding: 8px 0 8px 16px;
	background: #fff url(img/nav_purple.gif) top left;
}
#sbsitenav ul a:hover {
	border-top: 1px solid #dfdfdf;
	border-bottom: 1px solid #dfdfdf;
	border-left: 4px solid #dfdfdf;
	border-right: 1px solid #dfdfdf;
	background: #fff url(img/nav_purple.gif) bottom left;
}
#sbsitenav li {
	background-color: #efefef;
	margin: 0 0 0px 0;
}
#month,
.serendipity_weekDayName, 
#today {
	font-size: 1em;
}
#footer {
	font-size: .6em;
	padding: 0.25em;
	border: 0px;
	background-color: #dfdfdf;
}

Posted in Styling at 12:12

(Page 1 of 1, totaling 3 entries)

S9Y Bulletproof

Sep 21

Additional user colorsets

Aug 20

Colorset specific icons

Jun 13

Bulletproof default sylesheet

Main Menu

Recent Comments

Archives

Categories