News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord

Main Menu

Help - Background

Started by Fjclip99, February 07, 2013, 12:20:00 PM

Previous topic - Next topic

Fjclip99

How can i make background stay still while you are going up and down with forum ???

Shambles

Just add a "fixed" attribute to the background url in your theme's index.css file, eg

background: #131313 url(../images/theme/background.jpg) 0 0 fixed repeat;


Note, the above is just an example. Yours may well be in a "#bodybg {" section


If you can't find it, drop us a linky to your forum and we'll tell you what line to edit.

kat

Using a picture, one would assume?

Just use something like:

body  { background:url(your-image.jpg) top right no-repeat; background-position:fixed; }

in your index.css file.

As shown, here:

http://davidwalsh.name/css-fixed-position-background-image

Demo:

http://davidwalsh.name/demo/background-repeat.php



Ninjad!!

Fjclip99

In witch program shoud i open to edit the code ??

Shambles

Well each to his own preference really.

I do most of my messing editing using NotePad++ which is free to download and use.

A change to a css file (amongst others) can actually be made from within the Admin Control Panel, though I rarely make changes that way.

kat

Quote from: Fjclip99 on February 07, 2013, 02:11:47 PM
In witch program shoud i open to edit the code ??

If you mean "Which file?"

Quote from: K@ on February 07, 2013, 12:29:53 PMin your index.css file.

It's in the theme's "css" directory.

Fjclip99

OK thanks !!!... Now i have a new problem...
On the forum there is on the left:Log In, right:Logo
I want on the left:Logo, right:Log In
Is that possible ?

Shambles

Did you fix (pardon the pun) your background?

Fjclip99


Fjclip99

Quote from: Fjclip99 on February 07, 2013, 03:17:25 PM
OK thanks !!!... Now i have a new problem...
On the forum there is on the left:Log In, right:Logo
I want on the left:Logo, right:Log In
Is that possible ?

Can you help me with that ?

Kindred

now you are getting into actually editing theme template files....   and that's a bit more complicated, especially for someone who is brand new... it involves actual code changes in the index.template.php
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

Fjclip99

Can I copy the code and you will tell if you know ?

The code of the index.template.php:
<?php
/**
 * Simple Machines Forum (SMF)
 *
 * @package SMF
 * @author Simple Machines
 * @copyright 2011 Simple Machines
 * @license http://www.simplemachines.org/about/smf/license.php BSD
 *
 * @version 2.0
 */

/* 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 version this template/theme is for.
This should probably be the version of SMF it was created for. */
$settings['theme_version'] = '2.0';

/* Set a setting that tells the theme that it can render the tabs. */
$settings['use_tabs'] = true;

/* Use plain buttons - as opposed to text buttons? */
$settings['use_buttons'] = true;

/* Show sticky and lock status separate from topic icons? */
$settings['separate_sticky_lock'] = true;

/* Does this theme use the strict doctype? */
$settings['strict_doctype'] = false;

/* Does this theme use post previews on the message index? */
$settings['message_index_preview'] = false;

/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
$settings['require_theme_strings'] = false;
}

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

// 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 xmlns="http://www.w3.org/1999/xhtml"'
$context['right_to_left'] ? ' dir="rtl"' '''>
<head>'
;

// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/css/index'$context['theme_variant'], '.css?fin20" />';

// Some browsers need an extra stylesheet due to bugs/compatibility issues.
foreach (array('ie7''ie6''webkit') as $cssfix)
if ($context['browser']['is_' $cssfix])
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['default_theme_url'], '/css/'$cssfix'.css" />';

// RTL languages require an additional stylesheet.
if ($context['right_to_left'])
echo '
<link rel="stylesheet" type="text/css" href="'
$settings['theme_url'], '/css/rtl.css" />';

// Here comes the JavaScript bits!
echo '
<script type="text/javascript" src="'
$settings['default_theme_url'], '/scripts/script.js?fin20"></script>
<script type="text/javascript" src="'
$settings['theme_url'], '/scripts/theme.js?fin20"></script>
<script type="text/javascript"><!-- // --><![CDATA[
var smf_theme_url = "'
$settings['theme_url'], '";
var smf_default_theme_url = "'
$settings['default_theme_url'], '";
var smf_images_url = "'
$settings['images_url'], '";
var smf_scripturl = "'
$scripturl'";
var smf_iso_case_folding = '
$context['server']['iso_case_folding'] ? 'true' 'false'';
var smf_charset = "'
$context['character_set'], '";'$context['show_pm_popup'] ? '
var fPmPopup = function ()
{
if (confirm("' 
$txt['show_personal_messages'] . '"))
window.open(smf_prepareScriptUrl(smf_scripturl) + "action=pm");
}
addLoadEvent(fPmPopup);' 
'''
var ajax_notification_text = "'
$txt['ajax_in_progress'], '";
var ajax_notification_cancel_text = "'
$txt['modify_cancel'], '";
// ]]></script>'
;

echo '
<meta http-equiv="Content-Type" content="text/html; charset='
$context['character_set'], '" />
<meta name="description" content="'
$context['page_title_html_safe'], '" />', !empty($context['meta_keywords']) ? '
<meta name="keywords" content="' 
$context['meta_keywords'] . '" />' '''
<title>'
$context['page_title_html_safe'], '</title>';

// Please don't index these Mr Robot.
if (!empty($context['robot_no_index']))
echo '
<meta name="robots" content="noindex" />'
;

// Present a canonical url for search engines to prevent duplicate content in their indices.
if (!empty($context['canonical_url']))
echo '
<link rel="canonical" href="'
$context['canonical_url'], '" />';

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

// If RSS feeds are enabled, advertise the presence of one.
if (!empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']))
echo '
<link rel="alternate" type="application/rss+xml" title="'
$context['forum_name_html_safe'], ' - '$txt['rss'], '" href="'$scripturl'?type=rss;action=.xml" />';

// 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'?topic='$context['current_topic'], '.0;prev_next=prev" />
<link rel="next" href="'
$scripturl'?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'?board='$context['current_board'], '.0" />';

// Output any remaining HTML headers. (from mods, maybe?)
echo $context['html_headers'];

echo '
</head>
<body>'
;
}

function 
template_body_above()
{
global $context$settings$options$scripturl$txt$modSettings;

echo 
'
<div id="wrapper">
 <div id="header">
  <div id="head-l">
 <div id="head-r">
  <div id="userarea" class="smalltext">'
;
if ($context['user']['is_logged'])
{
if (!empty($context['user']['avatar']))
  echo '
<div id="my-avatar" class="clearfix">'
$context['user']['avatar']['image'], '</div>';
 echo '
 <ul class="reset">
 <li><b>'
$txt['hello_member'], ' '$context['user']['name'], '</b></li>';
  echo '
 <li><a href="'
$scripturl'?action=unread">'$txt['unread_since_visit'], '</a></li>
 <li><a href="'
$scripturl'?action=unreadreplies">'$txt['show_unread_replies'], '</a></li>
  <li>'
$context['current_time'],'</li>
 </ul>'
;
 }

// Otherwise they're a guest - this time ask them to either register or login - lazy bums...
else
{
echo sprintf($txt['welcome_guest'], $txt['guest_title']);
echo '
  <script language="JavaScript" type="text/javascript" src="'
$settings['default_theme_url'], '/scripts/sha1.js"></script>
  <form action="'
$scripturl'?action=login2" method="post" accept-charset="'$context['character_set'], '" style="margin: 4px 0;"', empty($context['disable_login_hashing']) ? ' onsubmit="hashLoginPassword(this, \'' $context['session_id'] . '\');"' '''>
<input type="text" name="user" class="userlog"  size="10" />
<input type="password" name="passwrd" class="userlog"  size="10" />
<input type="submit" value="'
$txt['login'], '" class="button_submit" />
<input type="hidden" name="hash_passwrd" value="" />
</form>'
$context['current_time'],'<br />';
  }
  echo '
  </div>
<div id="searcharea">
<form action="'
$scripturl'?action=search2" method="post" accept-charset="'$context['character_set'], '">
  <input class="inputbox" type="text" name="search" value="'
$txt['search'], '..." onfocus="this.value = \'\';" onblur="if(this.value==\'\') this.value=\''$txt['search'], '...\';" /> ';

// Search within current topic?
if (!empty($context['current_topic']))
echo '
<input type="hidden" name="topic" value="'
$context['current_topic'], '" />';

// If we're on a certain board, limit it to this board ;).
elseif (!empty($context['current_board']))
echo '
<input type="hidden" name="brd['
$context['current_board'], ']" value="'$context['current_board'], '" />';

echo '
</form>
</div>'
;

  // Show a random news item? (or you could pick one from news_lines...)
  if (!empty($settings['enable_news']))
  {
 echo '<div id="news">
<br /><b>'
$txt['news'], ':</b> '$context['random_news_line'], '</div>';
  }
echo '
 <div id="logo">
<a href="'
.$scripturl.'" title=""></a>
 </div>'
;
 echo '
 </div>
  </div>
</div>
  <div id="toolbar">
  '
,template_menu(),'
 </div>
<div id="bodyarea">'
;
 theme_linktree();
}

function 
template_body_below()
{
global $context$settings$options$scripturl$txt$modSettings;

echo '
  </div>'
;

// Show the "Powered by" and "Valid" logos, as well as the copyright. Remember, the copyright must be somewhere!
echo '
<div id="footer">
<div id="foot-l">
<div id="foot-r">
<div id="footerarea">
 <div id="footer_section">
  <div class="frame">
<ul class="reset">
<li class="copyright">'
theme_copyright(), '</li>
<li><strong>Reference</strong> by, <a href="http://www.jpr62.com/theme/" target="_blank" class="new_win" title=""><span>Crip</span></a></li>
<li><a id="button_xhtml" href="http://validator.w3.org/check?uri=referer" target="_blank" class="new_win" title="'
$txt['valid_xhtml'], '"><span>'$txt['xhtml'], '</span></a></li>
'
, !empty($modSettings['xmlnews_enable']) && (!empty($modSettings['allow_guestAccess']) || $context['user']['is_logged']) ? '<li><a id="button_rss" href="' $scripturl '?action=.xml;type=rss" class="new_win"><span>' $txt['rss'] . '</span></a></li>' '''
<li class="last"><a id="button_wap2" href="'
$scripturl '?wap2" class="new_win"><span>'$txt['wap2'], '</span></a></li>
</ul>'
;

// Show the load time?
if ($context['show_load_time'])
echo '
<p>'
$txt['page_created'], $context['load_time'], $txt['seconds_with'], $context['load_queries'], $txt['queries'], '</p>';

echo '
 </div>
  </div>
  </div>
  </div>
</div>
 </div>'
;
}

function 
template_html_below()
{
global $context$settings$options$scripturl$txt$modSettings;

echo '
</div>
</body></html>'
;
}

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

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

// Reverse the linktree in right to left mode.
if ($context['right_to_left'])
$context['linktree'] = array_reverse($context['linktree'], true);

echo '
<div class="navigate_section">
<ul>'
;

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
echo '
<li'
, ($link_num == count($context['linktree']) - 1) ? ' class="last"' '''>';

// Don't show a separator for the last one (RTL mode)
if ($link_num != count($context['linktree']) - && $context['right_to_left'])
echo '&#38;#171;&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 $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' 
$tree['url'] . '"><span>' $tree['name'] . '</span></a>' '<span>' $tree['name'] .'</span>';

// 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']) - && !$context['right_to_left'])
echo '&nbsp;&#38;#187;';

echo '
</li>'
;
}
echo '
</ul>
</div>'
;

$shown_linktree true;
}

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

echo '
<div id="topnav">
<ul>'
;

foreach ($context['menu_buttons'] as $act => $button)
{
echo '
<li id="button_'
$act'">
<a class="'
$button['active_button'] ? 'active ' '''" href="'$button['href'], '"', isset($button['target']) ? ' target="' $button['target'] . '"' '''>'$button['title'], '</a>';

if (!empty($button['sub_buttons']))
{
echo '
<ul>'
;

foreach ($button['sub_buttons'] as $childbutton)
{
echo '
<li>
<a href="'
$childbutton['href'], '"', isset($childbutton['target']) ? ' target="' $childbutton['target'] . '"' '''>'$childbutton['title'], !empty($childbutton['sub_buttons']) ? '...' '''</a>';

// 3rd level menus :)
if (!empty($childbutton['sub_buttons']))
{
echo '
<ul>'
;

foreach ($childbutton['sub_buttons'] as $grandchildbutton)
echo '
<li>
<a href="'
$grandchildbutton['href'], '"', isset($grandchildbutton['target']) ? ' target="' $grandchildbutton['target'] . '"' '''>'$grandchildbutton['title'], '</a>
</li>'
;

echo '
</ul>'
;
}

echo '
</li>'
;
}
echo '
</ul>'
;
}
echo '
</li>'
;
}

echo '
</ul>
</div>'
;
}

// Generate a strip of buttons.
function template_button_strip($button_strip$direction 'top'$strip_options = array())
{
global $settings$context$txt$scripturl;

if (!is_array($strip_options))
$strip_options = array();

// Create the buttons...
$buttons = array();
foreach ($button_strip as $key => $value)
{
if (!isset($value['test']) || !empty($context[$value['test']]))
$buttons[] = '<a ' . (isset($value['active']) ? 'class="active" ' '') . 'href="' $value['url'] . '" ' . (isset($value['custom']) ? $value['custom'] : '') . '><span>' $txt[$value['text']] . '</span></a>';
}

// No buttons? No button strip either.
if (empty($buttons))
return;

// Make the last one, as easy as possible.
$buttons[count($buttons) - 1] = str_replace('<span>''<span class="last">'$buttons[count($buttons) - 1]);

echo '
<div class="buttonlist'
, !empty($direction) ? ' align_' $direction '''"', (empty($buttons) ? ' style="display: none;"' ''), (!empty($strip_options['id']) ? ' id="' $strip_options['id'] . '"'''), '>
<ul>
<li>'
implode('</li><li>'$buttons), '</li>
</ul>
</div>'
;
}

?>

Advertisement: