skymiles v1.0 header change - how to?

fr34k123 · **Posted:** Mon Nov 24, 2008 5:33 pm

Hi, wondered if someone could help me out.

I currently use the Underground pure CSS phpnuke website theme. After switching hosts i decided to do away with my old forums and install PHPBB3. Upon searching for forums themes i came across your design which matches perfectly with my website's theme.

Not being a coder i know absolutely nothing about CSS i'm not sure how to change the forum header to that of our main site's header? I was told this is done through CSS - but i wouldn't even know where to start. The guy who originally re-designed our site is unavailable to carry out edits like this for us - so i'm really stuck and would like to get my forums up and running as soon as possible.

Basically (if ive explained my questions correctly) is to use my main site's header within the forum theme (skymiles v1.0). Ive attached our main site's theme header so you can get a better idea of what i want to achieve (basically i want to replce the current skymiles v1.0 header with my main site's header).

Attachment:

header.jpg [ 24.91 KiB | Viewed 641 times ]

Any help in achieving this would be greatly apreciated.

Thanks in advance for any help you can give

msi_333 · **Posted:** Mon Nov 24, 2008 5:36 pm

give me a link

fr34k123 · **Posted:** Mon Nov 24, 2008 5:39 pm

Hi, my site's homepage is: http://www.pcfrags.com

Our newly installed phpbb3 forums are located: http://www.pcfrags.com/forums

Thanks for the very quick reply

msi_333 · **Posted:** Mon Nov 24, 2008 9:13 pm

you have to make changes in the over_all_Header.html file in templates of skymiles , in the part of menubar and after you change , just refresh the templates from the administration /styles/

i recommend you to use the new version of skymiles_Red.1.0.1. for phpbb3.0.3 it looks better ,

fr34k123 · **Posted:** Mon Nov 24, 2008 9:24 pm

Hi msi_333,

Thanks for the reply.

Unfortunately i know absolutely nothing about css and only the basics of phpnuke/html. My coding experience only includes following steps of installation/edit through included readme files.

Guess i'll have to look at a less complex route - or at least one that doesn't include me messing with something i have no idea about.

Thanks for your replies....

msi_333 · **Posted:** Mon Nov 24, 2008 9:56 pm

i think the fastest solution is to put your logo on the forums

fr34k123 · **Posted:** Mon Nov 24, 2008 11:49 pm

Hi,

As stated my whole site theme is a pure css phpnuke theme (called Underground) - for example if i want to change one of the menu buttons in the top header i would need to edit a file called header.html in my root/themes/Underground folder - this is whats displayed within the header.html file:

Code:

<!-- wrap starts here -->
<div id="wrap">

      <!-- header -->
               
      <div id="header">         
         <div class="pcguy"></div>      
         <span id="slogan">Probably the best PC Freaks & Geeks in the world!</span>
         
         <!-- tabs -->
         <ul>
            <li id="current"><a href="http://www.pcfrags.com"><span>Home</span></a></li>
            <li><a href="pc-hardware-reviews.html"><span>Reviews</span></a></li>
            <li><a href="downloads.html"><span>Downloads</span></a></li>
            <li><a href="news.html"><span>News</span></a></li>
            <li><a href="feedback.html" rel="nofollow"><span>Contact</span></a></li>
            <li><a href="links.html"><span>Links</span></a></li>
                        <li><a href="modules.php?name=Your_Account"><span>Login/Account</span></a></li>            
         </ul>
                                 
      </div>
      
      <div id="header-logo">         
         <div id="logo">PC<span class="red">Frags</span><span class="black">.com</span></div>
         <span class="time">$date</span>            
      </div>

The css file for the whole site theme is identical to the css file included within the phpbb3 skymiles forum theme (this identical css file is the one located within forums/styles/skymiles_red/images/Underground.css)

My website's theme css file:

Code:

/********************************************
   AUTHOR:           Erwin Aligam 
   WEBSITE:            http://www.styleshout.com/
   TEMPLATE NAME:    Underground
   TEMPLATE CODE:      S-0006
   VERSION:          1.1             
 *******************************************/
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* top elements */
* { margin: 0;   padding: 0; }

body {
   margin: 0; padding: 0;
   font: 70%/1.5 Verdana, Tahoma, Arial, Helvetica, sans-serif;
   color: #333; 
   background: #FFF url(../images/bg.gif) repeat-x;   
}

/* links */
a {
   color: #003366;
   background-color: inherit;
   text-decoration: none;
}
a:hover {
   color: #CC0001; 
   background-color: inherit;
}

/* headers */
h1, h2, h3 {
   font-family: Arial, 'Trebuchet MS', Sans-Serif;
   font-weight: bold;
   color: #333;
}
h1 {
   font-size: 120%;
   letter-spacing: .5px;
}
h2 {
   font-size: 115%;   
   text-transform: uppercase;       
}
h3 {
   font-size: 115%;
   color: #003366;      
}



h1, h2, h3, p {
   padding: 0;      
   margin: 10px;
}

ul, ol, li {
   margin: 0 10px 0 20px;
   padding: 0 20px 0 0;
}

code {
  margin: 10px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
  border-left: 4px solid #CC0000;
}
acronym {
  cursor: help;
  border-bottom: 1px solid #777;
}
blockquote {
   margin: 10px;
    padding: 0 0 0 32px;     
     background: #FAFAFA url(../images/quote.gif) no-repeat 5px 10px !important; 
   background-position: 8px 10px;
   border: 1px solid #f2f2f2; 
   border-left: 4px solid #CC0000; 
   font-weight: bold;  
}

/* form elements */
form {
   margin:10px; padding: 0 5px;
   border: 1px solid #f2f2f2; 
   background-color: #FAFAFA; 
}
label {
   display:block;
   font-weight:bold;
   margin:5px 0;
}
input {
   padding: 2px;
   border:1px solid #eee;
   font: normal 1em Verdana, sans-serif;
   color:#777;
}
textarea {
   width:400px;
   padding:2px;
   font: normal 1em Verdana, sans-serif;
   border:1px solid #eee;
   height:100px;
   display:block;
   color:#777;
}
input.button { 
   margin: 0; 
   font: bolder 12px Arial, Sans-serif; 
   border: 1px solid #CCC; 
   padding: 1px; 
   background: #FFF;
   color: #CC0000;
}
/* search form */
form.search {
   position: absolute;
   top: 5px; right: 5px;
   padding: 0; margin: 0;
   border: none;
   background-color: transparent; 
}
form.search input.textbox { 
   margin: 0; 
   width: 120px;
   border: 1px solid #CCC; 
   background: #FFF;
   color: #333; 
}
form.search input.searchbutton { 
   margin: 0; 
   font-size: 100%; 
   font-family: Arial, Sans-serif; 
   border: 1px solid #CCC; 
   background: #FFFFFF url(../images/headerbg.gif) repeat-x bottom left; 
   padding: 1px; 
   font-weight: bold; 
   height: 23px;
   color: #333;
   width: 60px;
}

/**********************************
  LAYOUT 
***********************************/
#wrap {
   margin: 0 auto; 
   width: 960px;
}

/* header */
#header {
   position: relative;
   margin: 0; padding: 0;
   height: 60px;
}
#header span#slogan {
   z-index: 3;
   position: absolute;
   left: 60px; bottom: 7px;
   font: bold 1.2em Verdana, Arial, Tahoma,  Sans-serif;   
   color: #FFF;   
}

#header-logo {
   position: relative;
   clear: both;
   height: 50px; 
   margin: 0; padding: 0;   
}
#header-logo #logo {
   position: absolute;
   top: 3px; left: 60px;
   font: bold 30px "trebuchet MS", Arial, Tahoma, Sans-Serif;
   margin: 0; padding: 0;
   letter-spacing: -1px;
   color: #000;
}

/* navigation tabs */
#header ul {
   position: absolute;
   margin:0;
   list-style:none;
   right:-18px ; bottom: 3px;
   font: bold 13px 'Trebuchet MS', Arial, Sans-serif;
}
#header li {
   display:inline;
   margin:0; padding:0;
}
#header a {
   float:left;
   background: url(../images/tableft.gif) no-repeat left top;
   margin:0;
   padding:0 0 0 4px;
   text-decoration:none;
}
#header a span {
   float:left;
   display:block;
   background: url(../images/tabright.gif) no-repeat right top;
   padding:5px 15px 4px 6px;
   color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#header a span {float:none;}
/* End IE5-Mac hack */
#header a:hover span {
   color:#FFF;
}
#header a:hover {
   background-position:0% -42px;
}
#header a:hover span {
   background-position:100% -42px;
}
#header #current a {
   background-position:0% -42px;
}
#header #current a span {
   background-position:100% -42px;
}

.pcguy {
width:55px;
height:117px;
background: url(../images/geek_boy.png) no-repeat left top;
}


/* main column */
#main {
   float: left;
   margin: 0; padding: 0;
   width: 700px;
   padding:20px;   
}
#main h1 {
   margin: 10px 0 0 0; 
   padding: 4px 0 4px 8px; 
   font: bold 105% Arial, Sans-Serif;
   color: #FFF;
   text-transform: uppercase; 
   background: #CC0000; 
   letter-spacing: 1px;   
}
#mainnrb {
   float: left;
   margin: 0; padding: 0;
   width: 745px;   
}
#mainnrb h1 {
   margin: 10px 0 0 0; 
   padding: 4px 0 4px 8px; 
   font: bold 105% Arial, Sans-Serif;
   color: #FFF;
   text-transform: uppercase; 
   background: #CC0000; 
   letter-spacing: 1px;   
}
/* sidebar */
#sidebar {
   float: left;
   width: 200px;
   margin: 0; padding: 0; 
   background-color: #FFFFFF;    
}
#sidebar h1 {
   margin: 10px 0 0 0; 
   padding: 4px 0 4px 8px; 
   font: bold 105% Arial, Sans-Serif;
   color: #FFF;
   text-transform: uppercase; 
   background: #333; 
   letter-spacing: 1px;   
}
#sidebar .left-box {
   border: 1px solid #EBEBEB;
   margin: 0 0 5px 0;   
   background: #FFF;
}
#sidebar ul.sidemenu {
   list-style: none;
   text-align: left;
   margin: 3px 0px 8px 0; padding: 0;
   text-decoration: none;      
}
#sidebar ul.sidemenu li {
   border-bottom: 1px solid #f2f2f2; 
   background: url(../images/bullet.gif) no-repeat 3px 2px;   
   padding: 3px 5px 3px 25px;
   margin: 0;   
}
#sidebar ul.sidemenu a {
   font-weight: bolder;
   padding: 3px 0px;   
   background: none;
}
/* sidebar right*/
#sidebarr {
   float: right;
   width: 200px;
   margin: 0; padding: 0; 
   background-color: #FFFFFF;    
}
#sidebarr h1 {
   margin: 10px 0 0 0; 
   padding: 4px 0 4px 8px; 
   font: bold 105% Arial, Sans-Serif;
   color: #FFF;
   text-transform: uppercase; 
   background: #333; 
   letter-spacing: 1px;   
}
#sidebarr .left-box {
   border: 1px solid #EBEBEB;
   margin: 0 0 5px 0;   
   background: #FFF;
}
#sidebarr ul.sidemenu {
   list-style: none;
   text-align: left;
   margin: 3px 0px 8px 0; padding: 0;
   text-decoration: none;      
}
#sidebarr ul.sidemenu li {
   border-bottom: 1px solid #f2f2f2; 
   background: url(../images/bullet.gif) no-repeat 3px 2px;   
   padding: 3px 5px 3px 25px;
   margin: 0;   
}
#sidebarr ul.sidemenu a {
   font-weight: bolder;
   padding: 3px 0px;   
   background: none;
}

/* footer */
.footer { 
   clear: both;    
   border-top: 1px solid #f2f2f2;
   background: #FFF url(../images/footerbg.gif) repeat;
   padding: 2px 0 10px 0; 
   text-align: center;  
   line-height: 1.5em;   
   font-size: 95%;
}
.footer a { 
   text-decoration: none; 
   font-weight: bold;      
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes  */
.clear {   clear: both; }
.red   { color: #CC0000; }
.black   { color: #000000; }
.comments { 
   margin: 20px 10px 5px 10px; 
   padding: 3px 0;
   border-bottom: 1px dashed #EFF0F1;    
   border-top: 1px dashed #EFF0F1;   
}

As you can see from all the above code getting the forum theme to display our site's main header, navigation tabs and logo is not an easy task for a non-coder.

Not know exactly what to do, what to change, and indeed what to change it too is the confusing/difficult aspect for me.

I apreciate all your replies.

msi_333 · **Posted:** Tue Nov 25, 2008 8:43 pm

hey ,my friend , your problem is just to add the tags(reviews,downloads ... ) of your site to skymiles ? right

fr34k123 · **Posted:** Tue Nov 25, 2008 9:04 pm

Hi,
Thanks for the reply,

Basically i want the skymiles forum header to be exactly the same our our main sites header (i.e with the logo and tabs)

As it all works on CSS to display the main site header - this is where my problem is. I know absolutely nothing about CSS and the way it works so i cannot duplicate the main site header within the skymiles theme.

Any help you can give would be greatly appreciated - do you have msn? It might be easier if we could talk on there rather than keep making forum post back and forth?

skymiles v1.0 header change - how to?

Users browsing similar posts