static buttons in bex01

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
Dalif
Regular
Posts: 40
Joined: Mon Aug 21, 2006 9:33 am
Location: Under your bed
Contact:

static buttons in bex01

Post by Dalif »

Using bex01.. Ace theme really. I like it a lot. But I'd like to have more. Like one or two more 'buttons' there. Or links rather.

I'm pretty sure this is doable, but I'm no shark with html/php/css... any pointers would really be cool. They don't need to be changed around a lot, as they are static anyway. So a manual edit would suffice.

Thanks in advance.
..|., 4tw
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

You need to make the change in 2 places as I see you are running s9y 1.1.2. Both changes are made with a text editor. Both files to be edited are located in your template directory /templates/bex01/.

First file is config.inc.php, in which you will find this:

Code: Select all

$template_config = array(
    array(
        'var'           => 'navlink1text',
        'title'         => 'Navlink #1 Text',
        'description'   => 'Enter the first navigation text',
        'type'          => 'string',
        'default'       => 'About',
    ),
    array(
        'var'           => 'navlink1url',
        'title'         => 'Navlink #1 URL',
        'description'   => 'Enter the first navigation URL eg \'http://www.somesite.url\'',
        'type'          => 'string',
        'default'       => '#',
    ),
    array(
        'var'           => 'navlink2text',
        'title'         => 'Navlink #2 Text',
        'description'   => 'Enter the second navigation text',
        'type'          => 'string',
        'default'       => 'Photos',
    ),
    array(
        'var'           => 'navlink2url',
        'title'         => 'Navlink #2 URL',
        'description'   => 'Enter the second navigation URL eg \'http://www.somesite.url\'',
        'type'          => 'string',
        'default'       => '#',
    ),
    array(
        'var'           => 'navlink3text',
        'title'         => 'Navlink #3 Text',
        'description'   => 'Enter the third navigation text',
        'type'          => 'string',
        'default'       => 'Projects',
    ),
    array(
        'var'           => 'navlink3url',
        'title'         => 'Navlink #3 URL',
        'description'   => 'Enter the third navigation URL eg \'http://www.somesite.url\'',
        'type'          => 'string',
        'default'       => '#',
    ),
Using the existing as an example, continue creating as many as you need, creating both variables for the navlinktext, and the navlinkurl. For example, just after the existing navlink3url array, you would add this for a 4th:

Code: Select all

    array(
        'var'           => 'navlink4text',
        'title'         => 'Navlink #4 Text',
        'description'   => 'Enter the third navigation text',
        'type'          => 'string',
        'default'       => 'Projects',
    ),
    array(
        'var'           => 'navlink4url',
        'title'         => 'Navlink #4 URL',
        'description'   => 'Enter the third navigation URL eg \'http://www.somesite.url\'',
        'type'          => 'string',
        'default'       => '#',
    ),
You can keep going with 5, 6, upto whatever you want, but you will quickly reach the width of the navigation bar in that theme, and I am not sure how, if at all, the designer accomodated someone entering more links than what will fit. Chances are, the theme will "break". Anyway, be very careful with the parenthesis and commas, and note that the contents of the file ends with ); followed by ?>

Save the file and open index.tpl. Look for this block of code:

Code: Select all

<!-- ***** NAVIGATION AREA ***** -->
<div id="navigation">
<div style="float: left;">
	<ul>
	<li class="selected"><a href="{$serendipityBaseURL}" accesskey="h">{$CONST.HOMEPAGE}</a></li>
	{if $head_version < 1.1}
		<li><a href="#">About</a></li>
		<li><a href="#">Link</a></li>
		<li><a href="#">Link</a></li>
	{else}
	<li><a href="{$template_option.navlink1url}" title="{$template_option.navlink1text}">{$template_option.navlink1text}</a></li>
	<li><a href="{$template_option.navlink2url}" title="{$template_option.navlink2text}">{$template_option.navlink2text}</a></li>
	<li><a href="{$template_option.navlink3url}" title="{$template_option.navlink3text}">{$template_option.navlink3text}</a></li>
	{/if}
	<li><a href="{$serendipityBaseURL}serendipity_admin.php">{$CONST.LOGIN}</a></li>
	</ul>
</div>
This template has 2 possibilities for how to handle links. One for s9y less than version 1.1 (not you), and another for greater than 1.1 via the {else} statement. This is the portion you will edit, specifically this portion:

Code: Select all

	{else}
	<li><a href="{$template_option.navlink1url}" title="{$template_option.navlink1text}">{$template_option.navlink1text}</a></li>
	<li><a href="{$template_option.navlink2url}" title="{$template_option.navlink2text}">{$template_option.navlink2text}</a></li>
	<li><a href="{$template_option.navlink3url}" title="{$template_option.navlink3text}">{$template_option.navlink3text}</a></li>
	{/if}
Before the {/if}, and using what is already there as an example, copy and paste one of the existing lines, and edit it to match what you added in config.inc.php, for example:

Code: Select all

<li><a href="{$template_option.navlink4url}" title="{$template_option.navlink4text}">{$template_option.navlink4text}</a></li>
Also note 2 things. Your "homepage" link is hard coded in this template, and is not one of the links in config.inc.php. That link is at the very top of the navigation block here:

Code: Select all

	<li class="selected"><a href="{$serendipityBaseURL}" accesskey="h">{$CONST.HOMEPAGE}</a></li>
Your admin login is similarly hard coded at the bottom of the nav block here:

Code: Select all

<li><a href="{$serendipityBaseURL}serendipity_admin.php">{$CONST.LOGIN}</a></li>
I am merely pointing these 2 out should you wonder where those 2 links are coming from.

Save index.tpl and return to s9y admin window. Select "manage styles". Your new link variables should be there (ie, 4, 5, etc). Supply your text, and URLs, then "save". That should do it.
=Don=
Dalif
Regular
Posts: 40
Joined: Mon Aug 21, 2006 9:33 am
Location: Under your bed
Contact:

Post by Dalif »

Thanks man.. I'll give that a go later on :)

Any chance I can use your examples to remove the buttons as well? A friend using the theme would like to have nothing there (for now).
..|., 4tw
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post by Don Chambers »

Sort of - you can comment out the ones you do not want. For instance, if the homepage and login links were still desired, you could comment out the lines I identified in my first response.

If you do not want ANY links in the nav bar, you could edit the style.css file. Locate this:

Code: Select all

#navigation li {
	margin:0px 0px 0px 0px;
	padding: 5px 10px 5px 10px;
	list-style-type:none;
	display: inline;
	white-space: nowrap;
	background: url(templates/bex01/img/bexdivider.gif) center right no-repeat;
}
And add display:none; like this:

Code: Select all

#navigation li {
	margin:0px 0px 0px 0px;
	padding: 5px 10px 5px 10px;
	list-style-type:none;
	display: inline;
	white-space: nowrap;
	background: url(templates/bex01/img/bexdivider.gif) center right no-repeat;
	display: none;
}
By doing it this way, it is very easily undone. Also notice that I did not change the already present display:inline; just in case you wanted to undo this later.

If you REALLY wanted to get fancy, a variable can be added in config.inc.php, with appropriate code added to index.tpl, which would essentially place a toggle field in there which is turned off, or on, thereby either displaying, or not displaying, the navlinks. The total effort is about a half dozen lines of code in config.inc.php, and 2 lines in index.tpl.
=Don=
Dalif
Regular
Posts: 40
Joined: Mon Aug 21, 2006 9:33 am
Location: Under your bed
Contact:

Post by Dalif »

Hey Don. Thanks a lot for your reply man. It worked like a charm.. Well happy with it :)
..|., 4tw
Post Reply