Topic: Salava

[Gaia]

Link to the theme


Salava is a light pinkish theme that is easy on the eyes and fast loading.

Demo: http://unstablefears.com/smf/index.php?board=8.0

[la cáscara]

i am trying to use this theme, but i cant... i am trying to install it from the admin panel, but it gives me an error...

[Gaia]

The way that I have the theme packaged makes it so it doesn't work when installing from the Uploading of the zip file from the AdminCP.

I'll see what I can do to fix it but here is the manual way to install it for now.

http://www.unstablefears.com/?p=15

[la cáscara]

i believe i tried it that way too... i dont remember...
thanks 

[Gaia]

Ok, well if you try again, tell me what the error is.

[kalligator]

Hi Gaia, this is one of the cleanest themes around!
Do you have any plans on updating it for 1.1RC2 ?
And perhaps offer another colour theme other than pink? 

/edit/ OK I just saw that other topic here http://www.simplemachines.org/community/index.php?topic=44043.0;all
We'll be waiting!

[Gaia]

Yup, i'll probably create a couple more colors for it when i update it for v1.1 final.  Still debating on it .

[aconn73]

I personally like this theme and I plan on using it. All of your themes are great!!
Thanks!
~Angie~

[Lizzy]

I'm having a little problems with this theme, and I was wondering if someone could help me.  I have a screencap below so you can see what I'm talking about:
1.  See the blue border around 'quote' 'modify' etc.  Is there a way to get rid of it?  This border only shows up on view thread page (not any of the previous ones).
Any help would be MUCH appreciated!

hxxp:img375.imageshack.us/my.php?image=helppicvk3.png [nonactive]

[Ravyn]

I don't have any experience with the Salava theme, but if you can post your index.template.php for the theme I'm sure I can figure out where to put the <center> code for your header.

As for the borders around the buttons, post your style.css, it's probably something in there thats controlling that.

[Lizzy]

I don't have any experience with the Salava theme, but if you can post your index.template.php for the theme I'm sure I can figure out where to put the <center> code for your header.

As for the borders around the buttons, post your style.css, it's probably something in there thats controlling that.

index.template.php

Code: [Select]

<?php
// Version: 1.0; index

/* This template is, perhaps, the most important template in the theme.  It
contains the main template layer that displays the header and footer of
the forum, namely with main_above and main_below.  It also contains the
menu sub template, which appropriately displays the menu; the init sub
template, which is there to set the theme up; (init can be missing.) and
the linktree sub template, which sorts out the link tree.

The init sub template should load any data and set any hardcoded options.

The main_above sub template is what is shown above the main content, and
should contain anything that should be shown up there.

The main_below sub template, conversely, is shown after the main content.
It should probably contain the copyright statement and some other things.

The linktree sub template should display the link tree, using the data
in the $context['linktree'] variable.

The menu sub template should display all the relevant buttons the user
wants and or needs.

For more information on the templating system, please see the site at:
http://www.simplemachines.org/
*/

// Initialize the template... mainly little settings.
function template_init()
{
global $context, $settings, $options, $txt;

/* Use images from default theme when using templates from the default theme?
if this is 'always', images from the default theme will be used.
if this is 'defaults', images from the default theme will only be used with default templates.
if this is 'never' or isn't set at all, images from the default theme will not be used. */
$settings['use_default_images'] = 'never';

/* What document type definition is being used? (for font size and other issues.)
'xhtml' for an XHTML 1.0 document type definition.
'html' for an HTML 4.01 document type definition. */
$settings['doctype'] = 'xhtml';
}

// The main sub template above the content.
function template_main_above()
{
global $context, $settings, $options, $scripturl, $txt;

// Show right to left and the character set for ease of translating.
echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html', $context['right_to_left'] ? ' dir="rtl"' : '', '><head>
<meta http-equiv="Content-Type" content="text/html; charset=', $context['character_set'], '" />
<meta name="description" content="', $context['page_title'], '" />
<meta name="keywords" content="PHP, MySQL, bulletin, board, free, open, source, smf, simple, machines, forum" />
<script language="JavaScript" type="text/javascript" src="', $settings['default_theme_url'], '/script.js"></script>
<script language="JavaScript" type="text/javascript"><!--
var smf_theme_url = "', $settings['theme_url'], '";
var smf_images_url = "', $settings['images_url'], '";
// --></script>
<title>', $context['page_title'], '</title>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css" />';

/* Internet Explorer 4/5 and Opera 6 just don't do font sizes properly. (they are big...)
Thus, in Internet Explorer 4, 5, and Opera 6 this will show fonts one size smaller than usual.
Note that this is affected by whether IE 6 is in standards compliance mode.. if not, it will also be big.
Standards compliance mode happens when you use xhtml... */
if ($context['browser']['needs_size_fix'])
echo '
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/fonts-compat.css" />';

// Show all the relative links, such as help, search, contents, and the like.
echo '
<link rel="help" href="', $scripturl, '?action=help" target="_blank" />
<link rel="search" href="' . $scripturl . '?action=search" />
<link rel="contents" href="', $scripturl, '" />';

// If we're viewing a topic, these should be the previous and next topics, respectively.
if (!empty($context['current_topic']))
echo '
<link rel="prev" href="' . $scripturl . '?action=;topic=' . $context['current_topic'] . '.0;prev_next=prev" />
<link rel="next" href="' . $scripturl . '?action=;topic=' . $context['current_topic'] . '.0;prev_next=next" />';

// If we're in a board, or a topic for that matter, the index will be the board's index.
if (!empty($context['current_board']))
echo '
<link rel="index" href="' . $scripturl . '?action=;board=' . $context['current_board'] . '.0" />';

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'], '
</head>
<body>
<div id="logo"><img src="', $settings['images_url'], '/logo.gif" alt="" /></div>
<div id="darkbg"><div class="links">'; template_menu();
echo '</div></div><div id="panel">';
// If the user is logged in, display stuff like their name, new messages, etc.
if ($context['user']['is_logged'])
{
echo '
', $txt['hello_member'], ' <b>', $context['user']['name'], '</b>', $context['allow_pm'] ? ', ' . $txt[152] . ' <a href="' . $scripturl . '?action=pm">' . $context['user']['messages'] . ' ' . ($context['user']['messages'] != 1 ? $txt[153] : $txt[471]) . '</a>' . $txt['newmessages4'] . ' ' . $context['user']['unread_messages'] . ' ' . ($context['user']['unread_messages'] == 1 ? $txt['newmessages0'] : $txt['newmessages1']) : '', '.';

// Are there any members waiting for approval?
if (!empty($context['unapproved_members']))
echo '<br />
', $context['unapproved_members'] == 1 ? $txt['approve_thereis'] : $txt['approve_thereare'], ' <a href="', $scripturl, '?action=regcenter">', $context['unapproved_members'] == 1 ? $txt['approve_member'] : $context['unapproved_members'] . ' ' . $txt['approve_members'], '</a> ', $txt['approve_members_waiting'];

// Is the forum in maintenance mode?
if ($context['in_maintenance'] && $context['user']['is_admin'])
echo '<br />
<b>', $txt[616], '</b>';

// Show a random news item? (or you could pick one from news_lines...)
    if (!empty($settings['enable_news']))
echo '<br /><b>', $txt[102], ':</b> ', $context['random_news_line'];
}
// Otherwise they're a guest - so politely ask them to register or login.
else
echo '
', $txt['welcome_guest'];

echo '
<br />', $context['current_time'], '
            </div><div id="container">';
}

function template_main_below()
{
global $context, $settings, $options, $scripturl, $txt;

    echo '</div>';

// Show the "Powered by" and "Valid" logos, as well as the copyright.  Remember, the copyright must be somewhere!
echo '<div id="darkbg"><div class="links"><a href="http://www.mysql.com/" target="_blank">MySQL Powered</a><a href="http://www.php.net/" target="_blank">PHP Powered</a><a href="http://validator.w3.org/check/referer" target="_blank">Valid XHTML</a><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">Valid CSS</a><a href="#">Top</a></div></div><div id="copyright">', theme_copyright(), '<br /><a href="http://eternal-realm.net/index.php?action=downloads&amp;cat=smf">Salava Style</a> by Gaia<br />';
if (!$context['show_load_time'])
        echo '</div>';

// Show the load time?
if ($context['show_load_time'])
echo '
', $txt['smf301'], $context['load_time'], $txt['smf302'], $context['load_queries'], $txt['smf302b'], '
</div>';

// And then we're done!
echo '</body>
</html>';
}

// Show a linktree.  This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree()
{
global $context, $settings, $options;

// Folder style or inline?  Inline has a smaller font.
echo '<span class="nav"', $settings['linktree_inline'] ? ' style="font-size: smaller;"' : '', '>';

// Each tree item has a URL and name.  Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// Show the | | |-[] Folders.
if (!$settings['linktree_inline'])
{
if ($link_num > 0)
echo str_repeat('<img src="' . $settings['images_url'] . '/icons/linktree_main.gif" alt="| " border="0" />', $link_num - 1), '<img src="' . $settings['images_url'] . '/icons/linktree_side.gif" alt="|-" border="0" />';
echo '<img src="' . $settings['images_url'] . '/icons/folder_open.gif" alt="+" border="0" />&nbsp; ';
}

// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo '<b>', $settings['linktree_link'] && isset($tree['url']) ? '<a href="' . $tree['url'] . '" class="nav">' . $tree['name'] . '</a>' : $tree['name'], '</b>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo $settings['linktree_inline'] ? ' &nbsp;|&nbsp; ' : '<br />';
}

echo '</span>';
}

// Show the menu up top.  Something like [home] [help] [profile] [logout]...
function template_menu()
{
global $context, $settings, $options, $scripturl, $txt;

// Show the [home] and [help] buttons.
echo '<a href="', $scripturl, '">Home</a><a href="', $scripturl, '?action=help" target="_blank">Help</a><a href="', $scripturl, '?action=mlist">Memberlist</a>';

// How about the [search] button?
if ($context['allow_search'])
echo '<a href="', $scripturl, '?action=search">Search</a>';

// Is the user allowed to administrate at all? ([admin])
if ($context['allow_admin'])
echo '<a href="', $scripturl, '?action=admin">Admin</a>';

// Edit Profile... [profile]
if ($context['allow_edit_profile'])
echo '<a href="', $scripturl, '?action=profile">Profile</a>';

// The [calendar]!
if ($context['allow_calendar'])
echo '<a href="', $scripturl, '?action=calendar">Calendar</a>';

// If the user is a guest, show [login] and [register] buttons.
if ($context['user']['is_guest'])
{
echo '<a href="', $scripturl, '?action=login">Login</a><a href="', $scripturl, '?action=register">Register</a>';
}
// Otherwise, they might want to [logout]...
else
echo '<a href="', $scripturl, '?action=logout;sesc=', $context['session_id'], '">Logout</a>';
}

?>

style.css

Code: [Select]

body {
  background-color: #CFCFCF;
  font-family: verdana, arial, helvetica, sans-serif;
  }

/* Normal, standard links. */
a:link, a:visited
{
color: #d38f8f;
background-color: transparent;
text-decoration: none;
}
a:hover
{
color: #ed4545;
background-color: transparent;
text-decoration: overline;
}

/* Navigation links - for the link tree. */
.nav, .nav:link, .nav:visited
{
color: #000000;
background-color: transparent;
text-decoration: none;
}
a.nav:hover
{
font-weight: bold;
color: #000000;
background-color: transparent;
text-decoration: none;
}

/* begin Salava css */

#container {
  width: 730px;
  background-color: #E2E2E2;
  margin: auto;
  font-size: 13px;
  font-family: verdana, arial, helvetica, sans-serif;
  padding: 15px;
  border: 1px solid #C0C0C0;
  }

#logo
{
  width: 730px;
  background-color: #CFCFCF;
  margin: auto;
  padding: 0 30px 0 0;
}

#darkbg
{
  width: 730px;
  background-color: #C0C0C0;
  margin: auto;
  font-size: 13px;
  padding: 5px 30px 4px 0;
  border: 1px solid #C0C0C0;
}

.links a:link, .links a:visited {
  color: #ffffff;
  text-decoration: none;
  padding: 5px;
}

.links a:hover {
  color: #ed4545;
  background-color: #ffffff;
  padding: 5px;
  }

#panel {
  background-color: #e8cccc;
  width: 730px;
  font-size: 13px;font-family: verdana, arial, helvetica, sans-serif;
  margin: auto;
  padding: 5px 25px 5px 5px;
  border: 1px solid #C0C0C0;
  }

#copyright {
  margin: auto;
  padding: 0;
  font-size: 13px;
  text-align: center;
  }

#content {
  width: 730px;
  background-color: #E2E2E2;
  margin: 0;
  border: 1px solid #C0C0C0;
}

#box {
  width: 719px;
  background-color: #F0F0F0;
  margin: 10px 0 10px 0;
  font-size: 13px;font-family: verdana, arial, helvetica, sans-serif;
  padding: 5px;
  border: 1px solid #C0C0C0;
  }


/* end Salava css */

/* Tables should show empty cells too. */
table
{
empty-cells: show;
}

/* By default (td, body..) use Verdana in black. */
td
{
color: #000000;
font-size: small;
font-family: verdana, arial, helvetica, sans-serif;
}

/* Input boxes - just a bit smaller than normal so they align well. */
input, textarea
{
font-size: 9pt;
color: #000000;
font-family: verdana, arial, helvetica, sans-serif;
background-color: #E4E4E4;
}

/* Checkboxes shouldn't have a background color. */
input.check
{
background-color: transparent;
}

/* Selects are a bit smaller, because it makes them look even better 8). */
select
{
font-size: 8pt;
font-weight: normal;
color: #000000;
font-family: verdana, arial, helvetica, sans-serif;
background-color: #E4E4E4;
}

/* Standard horizontal rule.. */
hr
{
color: #000000;
background-color: transparent;
}
/* A more colorful hr.. */
.hrcolor
{
height: 1px;
border: 0;
color: #1c391b;
background-color: #000000;
}

/* A quote, perhaps from another post. */
.quote
{
color: #000000;
background-color: #d0f9ce;
border: 1px solid black;
margin: 1px;
padding: 1px;
font-size: x-small;
}

/* A code block - maybe even PHP ;). */
.code
{
color: #000000;
background-color: #d0f9ce;
border: 1px solid black;
margin: 1px;
padding: 1px;
font-size: x-small;
}

/* The "Quote:" and "Code:" header parts... */
.quoteheader, .codeheader
{
color: #000000;
text-decoration: none;
font-style: normal;
font-weight: bold;
font-size: x-small;
}

/* Generally, those [?] icons. */
.help
{
cursor: help;
background-color: transparent;
}

/* /me uses this a lot. */
.meaction
{
color: red;
background-color: transparent;
}

/* The main post box - this makes it as wide as possible. */
.editor
{
width: 100%;
}

/* Highlighted text - such as search results. */
.highlight
{
background-color: yellow;
font-weight: bold;
color: black;
}

/* Alternating backgrounds... */
.windowbg
{
color: #000000;
background-color: #F0F0F0;
font-size: 11px;
}
.windowbg2
{
color: #000000;
background-color: #F0F0F0;
font-size: 11px;
}

/* Titles - such as table headers. */
.titlebg, tr.titlebg td
{
font-weight: bold;
font-family: verdana, arial, helvetica, sans-serif;
font-style: normal;
color: #ffffff;
font-size: 10px;
background-color: #E2E2E2;
background-image: url(images/catbg2.gif);
background-repeat: repeat-x;
}
.titlebg a:hover
{
color: #642121;
text-decoration: underline;
    font-size: 10px;
}

/* Seperation from .titlebg, tr.titlebg td ~ Blue Tech Theme */
.titlebg a:link, .titlebg a:visited
{
font-weight: bold;
font-style: normal;
color: #642121;
font-size: 10px
}

/* The category headers, page indexes, and such things. */
.catbg
{
font-weight: bold;
background-color: #E2E2E2;
background-image: url(images/catbg.gif);
color: #ffffff;
background-repeat: repeat-x;
}

.catbg a {
  color: #642121;
  font-size: 10px;
  }

/* The borders around things. */
.bordercolor
{
background-color: #C0C0C0;
}
.tborder
{
border: 1px solid #C0C0C0;
}

/* Default font sizes. */
.smalltext
{
font-size: 10px;
}
.normaltext
{
font-size: 11px;
}
.largetext
{
font-size: 12px;
}

[Lizzy]

I figured out the centering the header thing, but I'd still be very appreciative towards anyone that could help me get rid of the blue borders!

[Ravyn]

Hmm don't see anything glaringly obvious int he style.css, post your display.template.php that should have the code in it for the buttons that have the border, maybe see what class they are using.

[Gaia]

There shouldn't be any changes like that in the post view.  Atleast there isn't any showing up on the dev board.

Try adding in this css code to the css file, it might help:

Code: [Select]

img {
    border: 0
}


[Lizzy]

There shouldn't be any changes like that in the post view.  Atleast there isn't any showing up on the dev board.

Try adding in this css code to the css file, it might help:

Code: [Select]

img {
    border: 0
}


This worked!!  The blue borders are gone.  Thanks for helping!!   

[Gaia]

Glad to be of assistance . .

[felo]

I think this theme is awesome xD!
thank you for creating it Gaia!

although I made my own changes to the colors
please feel free to visit my forum HERE: ForoBelanova.com [nofollow], although it's in Spanish, lol

see ya ^^

[Gaia]

Thanks Felo ^_^. And, the changes you made look very cool, i like it :p.