Zetaboards Theme Guide Part 8: Finishing Touches

The Profile

As the profile page is styled by previously edited elements of the CSS, the only part to change on the profile page is the drop-down menu of the profile options, which is shown above on the screenshot.

The CSS required for the menu:

#profile_menu a {
background:#5a70b3;
border:1px solid #3a5197;
}
 
#profile_menu li li a {
border-top:0;
}
 
#profile_menu li ul li a:hover {
background:#5a70b3;
}

#profile_menu a - 'a' is always, a link, therefore this part of CSS refers to the links within the menu. #profile_menu li ul li a:hover - Hovering over the menu options doesn't change anything, since the hover background colour is the same as the link background colour. The hex code can be changed to make the hover look different.

Change the standard link background colour to #1C273D, and the border hex code to #0a101b.

Board Notices

This is the section of the CSS that styles the board notices. (error messages, info messages and edited post messages). Make the changes to all the hex colors in this section to the ones shown below:

.notice {
background:#232f46; 
border:2px solid #0a101b;
color:#848a96;
margin:10px auto;
width:70%;
}
 
.notice dt {
color:#848a96; 
font-weight:700;
}
 
.notice dd {
font-style:italic;
}
 
dl.info {
background:#1C273D; 
border-color:#0a101b; 
}
 
.info dt {
background:#28344c;
color:#acbbc2;
}
 
dl.error {
background:#1C273D;
border-color:#0a101b;
}
 
.error dt {
background:#28344c;
color:#acbbc2;
}

The Admin CP Login

#acplogin {
background:url(http://z1.ifrm.com/static/acp/acpback.png) repeat-x 0 -195px #fff;
border:2px solid #3a5197;
height:275px;
left:50%;
margin:-137.5px 0 0 -250px;
padding:0;
position:absolute;
top:50%;
width:500px;
}
 
#acplogin h1 {
color:#FFF;
font-weight:400;
height:50px;
margin-bottom:20px;
padding:50px 20px 0 0;
text-align:right;
}

#acplogin is the main div containing the login box. The normal blue/orange background strips is actually one background image on this div. #acplogin h1 is the 'Please Log In' text.

For the background image, just change the /acp/ to /2/ in the URL to access the 'acpback' image for the Midnight theme. Then change the background colour to #111a2d. The background image's positioning of 0 -195px isn't required for Midnight as the images have been made slightly differently. The original background image used to be used for something else, which required it appearing slightly different. Removing the positioning would be required if you were to use your own image, as the -195px would shift the background image up 195 instead of sitting at the very top.

So, the background line needs to look like this: background:url(http://z1.ifrm.com/static/2/acpback.png) repeat-x #111a2d;

Then change the border hex code to #03050b. For the Midnight theme, we've left the 'Please Log In' text white. Therefore you do not need to alter that for this theme.

After completing the changes, it should look like this (Please note, you are unable to change the ACP login key image):

The Images

The final finishing touch is of course, the image set. For the most part, altering the /1/ part of the URL for each image to /2/ will refer to the Midnight equivilent in another image directory. However a few images weren't given the same name, therefore this wouldn't work. For 'Forum Rules' there is no Midnight version, since the use of this image was scrapped before the Midnight image set was completed.

Misc images that don't immediately change when adjusting the directory to /2/:

  • The 'Collapse' image is the same image from the default, therefore this image does not change.
  • Attachments icon is the same
  • Board Clock icon was never uploaded, unfortunately. However you can use this code instead:
    <img src='http://z3.ifrm.com/0/3/0/p51183/clock.png' alt='Time:' />
  • The redirect icon's name is slightly shorter:
    <img src='http://z1.ifrm.com/static/2/f_redir.png' alt='Redirect Forum' />
  • The trash icon oddly carries the correct prefix for Midnight whereas it does not on the original theme:
    <img src='http://z1.ifrm.com/static/2/f_trash.png' alt='Trash' />
  • New Topic got a name change:
    <img src='http://z1.ifrm.com/static/2/t_topic.png' alt='Make New Topic' />
  • The Topic Icons intentionally didn't get a recolour for Midnight.
  • Online Member (No PM) has a different name:
    <img src='http://z1.ifrm.com/static/2/on.png' alt='Online' />
  • … as does Offline Member (No PM):
    <img src='http://z1.ifrm.com/static/2/off.png' alt='Offline' />

And with that…you've just created your first completed Zetaboards Theme :) Congratulations.



themes/themeguide/part8.txt · Last modified: 2015/01/09 16:02 (external edit)