At the risk of causing further confusion, I thought I'd update this thread for others who are attempting these changes. I'm no longer using the "phpBB China" modified CSS files, but have isolated the required changes to the CSS files.
These are the changes I made to update my site for the JA-Purity that comes with Joomla 1.5.8 (and using phpBB 3.0.2 at the time and prosilver_se). I'm using a logo.png, and some of these changes are tweaks to get the image to align consistently on the Joomla site and the phpBB forum:
A) Copy and edit Joomla 1.5.8 CSS files to {template}/theme:
template.css
ja-sosdmenu.css
menu.css
Edit relative URL's within these CSS files: i.e. change the url(../images to url(./images
ja-sosdmenu.css:
Comment out position:relative (so drop-downs work) and other changes as follows:
Code: Select all
#ja-mainnav ul.menu li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: none;
cursor: pointer;
/* position: relative; */
list-style: none;
}
/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#ja-mainnav ul.menu li a {
margin: 0;
padding: 10px 20px;
border-left: 1px solid #555555;
border-right: 1px solid #333333;
display: block;
color: #CCCCCC;
font-size: 12px; [Add this]
font-family: Arial, Helvetica, sans-serif; [Add this]
font-weight: bold;
line-height: normal;
text-decoration: none;
}
template.css:
Remove following (fixes offset hover buttons and funny bullets on Board Index):
Code: Select all
ul li {
padding-left: 30px;
background: url(./images/bullet.gif) no-repeat 18px 8px;
line-height: 180%;
}
Remove following (removes space above "Last visit was"):
Code: Select all
p, pre, blockquote, ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 1em 0;
padding: 0;
}
Remove following (removes dashed lines above "Search this forum"):
Code: Select all
fieldset {
border: none;
padding: 10px 5px;
background: url(./images/hdot2.gif) repeat-x top;
}
fieldset a {
font-weight: bold;
}
Remove (edit post box white instead of yellow):
Code: Select all
.inputbox:hover, .inputbox:focus {
background: #FFFFCC;
}
Clean up the footer:
Code: Select all
#ja-footerwrap {
border-top: 5px solid #CCCCCC;
padding: 5px 0 10px;
clear: both;
background: url(./images/grad3.gif) repeat-x bottom #F6F6F6;
}
#ja-footer {
padding: 0;
color: #666666;
background: url(./images/vdot.gif) repeat-y 22% 0;
text-align: center;
position: relative;
}
B) Edit {template}/theme/common.css
Code: Select all
body {
/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
font-family: Verdana, Helvetica, Arial, sans-serif;
color: #828282;
background-color: #FFFFFF;
/*font-size: 62.5%; This sets the default font size to be equivalent to 10px */
font-size: 10px;
margin: 0;
padding: 27px 0; [REMOVE padding]
}
h1 {
/* Forum name */
font-family: Arial, Helvetica, sans-serif; [REMOVE Trebuchet FONT]
margin-right: 200px;
color: #FFFFFF;
margin-top: 15px;
font-weight: bold;
font-size: 2em;
p.right {
text-align: right;
}
[REMOVE BORDER STUFF]
/* Main blocks
---------------------------------------- */
#wrap {
padding: 0 20px;
min-width: 650px;
width: 900px; [REMOVE]
margin: 0 auto; [REMOVE]
}
ul.navlinks {
padding-bottom: 1px;
margin-bottom: 1px;
border-bottom: 1px solid #FFFFFF;
font-weight: bold; [Original file had this commented out for some reason]
C) Make sure overall_header.html has this before </head>:
Code: Select all
<style type="text/css">
#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: 97%; margin: 0 auto;}
#ja-wrapper {min-width: 100%;}
</style>
I made these changes to the Joomla portion of my website as well:
D) JOOMLA PURITY TEMPLATE UPDATE
1) Remove font size change from Joomla template
In Joomla template index.php comment out:
Code: Select all
<!-- <?php $tmpTools->genToolMenu(JA_TOOL_FONT, 'png'); ?> -->
2) Replace logo.png with whatever you are using
3) Edit Joomla template.css to resize and position logo
Code: Select all
h1.logo a {
width: 648px; [size of new logo.png]
display: block;
background: url(../images/logo.png) no-repeat;
height: 80px;
position: relative;
left: -7px; [shifts logo left]
z-index: 100;
}
4) Edit Joomla template index.php:
Code: Select all
i.e. replace:
<style type="text/css">
#ja-header,#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}
#ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}
</style>
with:
<style type="text/css">
#ja-mainnav,#ja-container,#ja-botsl,#ja-footer {width: <?php echo $tmpWidth; ?>;margin: 0 auto;}
#ja-header {width: 99.9%}
#ja-wrapper {min-width: <?php echo $tmpWrapMin; ?>;}
</style>
5) Fix website footer size and dots:
In JA-PURITY template.css:
Code: Select all
/* FOOTER
--------------------------------------------------------- */
#ja-footerwrap {
border-top: 5px solid #CCCCCC;
padding: 0px 0 25px;
clear: both;
background: url(../images/grad3.gif) repeat-x bottom #F6F6F6;
}
#ja-footer {
padding: 0;
color: #666666;
/* background: url(../images/vdot.gif) repeat-y 22% 0; */ [removes dots]
position: relative;
}