PDA

View Full Version : Crystal Skin Modified > PHPbb3 ???


AngelusGurl
11-17-2008, 09:47 PM
I have modified the Crystal Skin width (to 950px) which has in turn caused one problem after another when it comes to my forum skin. This is where I have got to:http://remewives.co.uk/images/misc/error2.jpg

I adjusted my forum theme width to 950px, to get it to fit inside the skin correctly as leaving it liquid threw it out. but it now stretches the vertically and leaves ugly blocks of colour above the rounded corners of each of my forum catagories in x browser, it seems fine in MF. I have searched on both phpbb's website and here and can't find a fix. I have tried various changes to my forumskin.php & styles.css with no avail. I checked the overall header template of my phpbb3 and no fault there, as far as I am aware. I am new to SD and would really appreciate some help as I am at my wits end. Simple instruction please of what I need to be looking at and where I need to make changes to fix this, you will have 270 ladies forever in your debt if someone can fix this. :confused:

forumskin.php:

<?php
// +---------------------------------------------+
// | Copyright © 2003 - 2007 indiqo.media |
// | http://www.indiqo.eu/ |
// | This file may not be redistributed. |
// +---------------------------------------------+

if(!defined('IN_SUBDREAMER'))
{
die("Hacking attempt!");
}

// ################################ CATEGORIES ################################


$categories .= '<script type="text/javascript">
<!--
var TMenu_path_to_files="'.$sdpath.'includes/javascript/hovermenu/";
//-->
</script>
<script type="text/javascript" src="'.$sdpath.'includes/javascript/hovermenu/menu.js"></script>
<link rel="stylesheet" href="' . $sdpath . 'skins/crystal/menu.css" />
<script type="text/javascript" src="' . $sdpath . 'skins/crystal/forummenu.php"></script>';


// ################################ SDHEADER ###################################


$sdheader = '
<style type="text/css">
a.sdcopyright:link { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #99a0a6; text-decoration: none; font-weight: normal; }
a.sdcopyright:active { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #99a0a6; text-decoration: none; font-weight: normal; }
a.sdcopyright:visited { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #99a0a6; text-decoration: none; font-weight: normal; }
a.sdcopyright:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #454d55; text-decoration: none; font-weight: normal; }


img { border: 0; vertical-align: top; }

body, html {
padding: 0px;
margin: 0px 0px 0px 0px;

font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
color: #454d55;
text-align: center;
background-color: #ffffff;
background-image: url(' . $sdpath . 'skins/crystal/images/background_1.jpg);
background-repeat: repeat-x;
background-position: top;
}

body
{ padding-top: 0px; }

div
{ vertical-align: top; }

#outer_wrapper
{ width: 950px; margin-left: auto; margin-right: auto; background: url(' . $sdpath . 'skins/crystal/images/background_2.jpg) repeat-y center; }

#inner_wrapper
{ background: url(' . $sdpath . 'skins/crystal/images/background_3.jpg) no-repeat top; padding: 6px; }

#sdlogo
{ height: 100px; text-align: left; overflow: hidden; line-height: 100px; padding: 0px 25px 0px 25px; }

#sdnavigation
{ height: 32px; text-align: left; }

#content_alt
{ width: 100%; padding: 0px 6px 0px 6px; }

#footer_1
{ background: url(' . $sdpath . 'skins/crystal/images/footer_1.jpg) repeat-y center; }

#footer_2
{ background: url(' . $sdpath . 'skins/crystal/images/footer_2.jpg) no-repeat bottom; text-align: center; padding: 10px 16px 16px 16px; color: #99a0a6; }
</style>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div id="sdlogo">' . $logo . '</div>
<div id="sdnavigation">' . $categories . '</div>
<div id="content_alt">

';


// ################################ SDFOOTER ###################################

$sdfooter = '
</div>
</div>

<div id="footer_1">
<div id="footer_2">
' . $copyright . iif(!$mainsettings['bfo'], '<br />
<a href="http://www.indiqo.eu" title="indiqo.media" target="_blank" class="sdcopyright">Designed by indiqo.media</a>') . '
</div>
</div>

</div>';

?>

styles.css:


a:link { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #2c6f9b; text-decoration: underline; font-weight: normal; }
a:active { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #2c6f9b; text-decoration: underline; font-weight: normal; }
a:visited { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #2c6f9b; text-decoration: underline; font-weight: normal; }
a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #2c6f9b; text-decoration: none; font-weight: normal; }


a.copyright:link { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #99a0a6; text-decoration: none; font-weight: normal; }
a.copyright:active { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #99a0a6; text-decoration: none; font-weight: normal; }
a.copyright:visited { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #99a0a6; text-decoration: none; font-weight: normal; }
a.copyright:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #454d55; text-decoration: none; font-weight: normal; }


img { border: 0; vertical-align: top; }

body, html {
padding: 0px;
margin: 0px 0px 10px 0px;

font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 13px;
color: #454d55;
text-align: center;
background-color: #ffffff;
background-image: url(images/background_1.jpg);
background-repeat: repeat-x;
background-position: top;
}

body
{ padding-top: 29px; }

textarea, input
{
color:#454d55;
border: 1px solid #bec8d2;
background: #ffffff;
vertical-align: middle;
font-family: Arial, Helvetica, sans-serif;
font-size:11px;
margin: 1px;
padding: 1px;
}


select, option
{ color: #000000; }

hr
{ height: 1px;
border: 0px solid #ffffff;
border-color: #bec8d2;
background-color: #bec8d2;
color: #bec8d2;
}

div
{ vertical-align: top; text-align: left; }

.clear
{ clear: both; font-size: 0px; }

#outer_wrapper
{ width: 950px; margin-left: auto; margin-right: auto; background: url(images/background_2.jpg) repeat-y center; }

#inner_wrapper
{ background: url(images/background_3.jpg) no-repeat top; padding: 6px; }

#logo
{ height: 100px; text-align: left; overflow: hidden; line-height: 100px; padding: 0px 25px 0px 25px; }

#navigation
{ height: 32px; text-align: left; }

#content
{ margin: 15px 15px 6px 15px; background: url(images/background_4.jpg) no-repeat top left; }

#content_alt
{ margin: 15px 15px 6px 15px; background: url(images/background_6.jpg) no-repeat top left; padding: 1px 10px 10px 10px; }

#column_left
{ width: 251px; float: left; min-height: 300px; height: auto; _height: 300px; }

h1
{ color: #454d55; margin: 0px 0px 7px 0px; padding: 0px 0px 7px 00px; font-size: 18px; line-height: 18px; font-weight: normal; font-family: Arial, Helvetica, sans-serif; text-align: left; background: url(images/background_5.gif) repeat-x bottom; }

.plugin_1
{ padding: 15px 15px 6px 15px; }

#column_right
{ width: 629px; float: right; min-height: 300px; height: auto; _height: 300px; }

#left
{ width: 371px; float: left; }

h2
{ color: #454d55; margin: 15px 0px 0px 0px; padding: 0px 0px 7px 00px; font-size: 18px; line-height: 18px; font-weight: normal; font-family: Arial, Helvetica, sans-serif; text-align: left; }


#right
{ width: 239px; float: right; }

h3
{ color: #454d55; margin: 0px; padding: 6px 10px 6px 10px; font-size: 11px; line-height: 11px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-align: left; background-color: #ffffff; border-bottom: 1px solid #c1c7cc; text-transform: uppercase; }

.plugin_3_1
{ background-color: #eef3f7; border: 1px solid #c1c7cc; margin-top: 12px; }

.plugin_3_2
{ padding: 6px 10px 6px 10px; }

#footer_1
{ background: url(images/footer_1.jpg) repeat-y center; }

#footer_2
{ background: url(images/footer_2.jpg) no-repeat bottom; text-align: center; padding: 10px 16px 16px 16px; color: #99a0a6; }


overall_header.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" lang="{S_USER_LANG}" xml:lang="{S_USER_LANG}">
<head>

<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-language" content="{S_USER_LANG}" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="resource-type" content="document" />
<meta name="distribution" content="global" />
<meta name="copyright" content="2000, 2002, 2005, 2007 phpBB Group" />
<meta name="keywords" content="" />
<meta name="description" content="" />
{META}
<title>{SITENAME} &bull; <!-- IF S_IN_MCP -->{L_MCP} &bull; <!-- ELSEIF S_IN_UCP -->{L_UCP} &bull; <!-- ENDIF -->{PAGE_TITLE}</title>

<!--
phpBB style name: prosilver
Based on style: prosilver (this is the default phpBB3 style)
Original author: Tom Beddard ( http://www.subBlue.com/ )
Modified by:

NOTE: This page was generated by phpBB, the free open-source bulletin board package.
The phpBB Group is not responsible for the content of this page and forum. For more information
about phpBB please visit http://www.phpbb.com
-->

<script type="text/javascript">
// <![CDATA[
var jump_page = '{LA_JUMP_PAGE}:';
var on_page = '{ON_PAGE}';
var per_page = '{PER_PAGE}';
var base_url = '{A_BASE_URL}';
var style_cookie = 'phpBBstyle';
var style_cookie_settings = '{A_COOKIE_SETTINGS}';
var onload_functions = new Array();
var onunload_functions = new Array();

<!-- IF S_USER_PM_POPUP -->
if ({S_NEW_PM})
{
var url = '{UA_POPUP_PM}';
window.open(url.replace(/&amp;/g, '&'), '_phpbbprivmsg', 'height=225,resizable=yes,scrollbars=yes, width=400');
}
<!-- ENDIF -->

/**
* Find a member
*/
function find_username(url)
{
popup(url, 760, 570, '_usersearch');
return false;
}

/**
* New function for handling multiple calls to window.onload and window.unload by pentapenguin
*/
window.onload = function()
{
for (var i = 0; i < onload_functions.length; i++)
{
eval(onload_functions[i]);
}
}

window.onunload = function()
{
for (var i = 0; i < onunload_functions.length; i++)
{
eval(onunload_functions[i]);
}
}

// ]]>
</script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/styleswitcher.js"></script>
<script type="text/javascript" src="{T_TEMPLATE_PATH}/forum_fn.js"></script>

<link href="{T_THEME_PATH}/print.css" rel="stylesheet" type="text/css" media="print" title="printonly" />
<link href="{T_STYLESHEET_LINK}" rel="stylesheet" type="text/css" media="screen, projection" />

<link href="{T_THEME_PATH}/normal.css" rel="stylesheet" type="text/css" title="A" />
<link href="{T_THEME_PATH}/medium.css" rel="alternate stylesheet" type="text/css" title="A+" />
<link href="{T_THEME_PATH}/large.css" rel="alternate stylesheet" type="text/css" title="A++" />

<!-- IF S_CONTENT_DIRECTION eq 'rtl' -->
<link href="{T_THEME_PATH}/bidi.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!-- ENDIF -->

</head>

<body id="phpbb" class="section-{SCRIPT_NAME} {S_CONTENT_DIRECTION}" ><!--StartSdHeader-->
<style type="text/css" media="all">
body * td{padding:0;}
div.sd_padfix * td{padding:2px;}
div.sd_padfix{padding:0;text-align:left;background:transparent;border:0;margin: 0;}
</style>

<style type="text/css">
a.sdcopyright:link { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #99a0a6; text-decoration: none; font-weight: normal; }
a.sdcopyright:active { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #99a0a6; text-decoration: none; font-weight: normal; }
a.sdcopyright:visited { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #99a0a6; text-decoration: none; font-weight: normal; }
a.sdcopyright:hover { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #454d55; text-decoration: none; font-weight: normal; }


img { border: 0; vertical-align: top; }

body, html {
padding: 0px;
margin: 0px 0px 0px 0px;

font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 20px;
color: #454d55;
text-align: center;
background-color: #ffffff;
background-image: url(http://MYDOMAIN/skins/crystal/images/background_1.jpg);
background-repeat: repeat-x;
background-position: top;
}

body
{ padding-top: 0px; }

div
{ vertical-align: top; }

#outer_wrapper
{ width: 950px; margin-left: auto; margin-right: auto; background: url(http://MYDOMAIN/skins/crystal/images/background_2.jpg) repeat-y center; }

#inner_wrapper
{ background: url(http://MYDOMAIN/skins/crystal/images/background_3.jpg) no-repeat top; padding: 6px; }

#sdlogo
{ height: 100px; text-align: left; overflow: hidden; line-height: 100px; padding: 0px 25px 0px 25px; }

#sdnavigation
{ height: 32px; text-align: left; }

#content_alt
{ width: 100%; padding: 0px 6px 0px 6px; }

#footer_1
{ background: url(http://MYDOMAIN/skins/crystal/images/footer_1.jpg) repeat-y center; }

#footer_2
{ background: url(http://MYDOMAIN/skins/crystal/images/footer_2.jpg) no-repeat bottom; text-align: center; padding: 10px 16px 16px 16px; color: #99a0a6; }
</style>
<div id="outer_wrapper">
<div id="inner_wrapper">
<div id="sdlogo"></div>
<div id="sdnavigation"><script type="text/javascript">
<!--
var TMenu_path_to_files="http://MYDOMAIN/includes/javascript/hovermenu/";
//-->
</script>
<script type="text/javascript" src="http://MYDOMAIN/includes/javascript/hovermenu/menu.js"></script>
<link rel="stylesheet" href="http://remewives.co.uk/skins/crystal/menu.css" />
<script type="text/javascript" src="http://MYDOMAIN/skins/crystal/forummenu.php"></script></div>
<div id="content_alt">


<div class="sd_padfix">
<!--EndSdHeader-->

<div id="wrap">
<a id="top" name="top" accesskey="t"></a>
<div id="page-header">
<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>

<ul class="linklist navlinks">
<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a> <!-- BEGIN navlinks --> <strong>‹</strong> <a href="{navlinks.U_VIEW_FORUM}">{navlinks.FORUM_NAME}</a><!-- END navlinks --></li>

<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" onkeypress="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

<!-- IF U_EMAIL_TOPIC --><li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_EMAIL_PM --><li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_TOPIC --><li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li><!-- ENDIF -->
<!-- IF U_PRINT_PM --><li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li><!-- ENDIF -->
</ul>

<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
<ul class="linklist leftside">
<li class="icon-ucp">
<a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="u">{L_PROFILE}</a>
<!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --> &bull;
<a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!-- IF U_RESTORE_PERMISSIONS --> &bull;
<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
<!-- ENDIF -->
</li>
</ul>
<!-- ENDIF -->

<ul class="linklist rightside">
<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
<!-- IF not S_IS_BOT -->
<!-- IF S_DISPLAY_MEMBERLIST --><li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED --><li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="l">{L_LOGIN_LOGOUT}</a></li>
<!-- ENDIF -->
</ul>

<span class="corners-bottom"><span></span></span></div>
</div>

</div>

<a name="start_here"></a>
<div id="page-body">

<!-- IF S_BOARD_DISABLED and S_USER_LOGGED_IN and (U_MCP or U_ACP) -->
<div id="message" class="rules">
<div class="inner"><span class="corners-top"><span></span></span>
<strong>{L_INFORMATION}:</strong> {L_BOARD_DISABLED}
<span class="corners-bottom"><span></span></span></div>
</div>
<!-- ENDIF -->

NB. MYDOMAIN has been used to replace my site domain name in the file above. Due to this being a public site. If you need the address for my site please ask and I will PM you. ;)

Greg Thimmes
11-19-2008, 05:30 PM
I believe the issue is within your forum, not the skin. Just remove the two rows where the images are or perhaps just add a space <BR>) in them to leave a line. Should be a simple fix.