ZB Theme Guide Part 5: Inbox/PM Popup

Finished, I think.

The Preferences and Inbox areas both have a common element, the two (currently) orange headed menus:

Shown on the above screenshot of what your Inbox page should currently look like.

'Meta' Menus (Both Preferences and Inbox pages)

The two orange headed menus appear in the CSS as .meta_menu.

To change the headers, you need to look through the first quarter of the CSS for .meta_menu h3. Change the background image to:

http://z1.ifrm.com/static/2/css/h2.png

Change the background colour to #1f2b42. Change the border colour to #0a101b. Change the font colour to #acbbc2.

To change the background of the menus, change the background colour to #1C273D, and then change the border colour to #0a101b.

To finish off the menus, change the font colour for .meta_menu a,.meta_menu a:hover to #acbbc2.

Edit the CSS and refresh the page to see the results. This will have also altered the menus on the preferences page.

Inbox

On the cell containing the Inbox, Archive and Draft folders, you'll notice the grey lines. This cell has an ID of #pm_folders. It's actually a th, which is a good reason back in Part 1 for adding a background colour as well as a background image (see the mini example here ).

Find the snippet in the CSS for #pm_folders, and change it's border colours from #e7e7e7 to #0a101b. If you edit the CSS and refresh the index, you'll see that the borders have now changed colour.

Now, you may have noticed already, but the member names are by default, a dark grey. If you've styled your group using BBcode, you might not have noticed this. If you look in the screenshot at the top of this section, you'll see that the member names other than my own and 'Locke', are a dark grey. By default, all member names have a class of .member. This allows you to style the member names for each theme.

For this, there is a generic link colour and a hover to change. Find the following snippets:

a.member,.calendar td a,.calendar a:hover,#faq dd a,#faq dd a:hover {
color:#333;
}
a.member:hover {
color:#666;
}

As you can see, a.member is referring to links classed as member.

If you quickly jump over to the calendar and hover over the previous/next month on the table header, the links will turn dark grey. This is the .calendar a:hover in action. .calendar td a refers to the calendar cells, not the header, which is why the links on the header aren't dark grey like their hover.

Go to the FAQ page and it will be pretty hard to read anything but the blue text headers and the 'More…' link. The near-unreadable links are #faq dd a.

Change the font colour for the hover to #acbbc2. Change the link colour for the multiple selectors to #848a96.

Edit the CSS and then refresh the FAQ page (assuming you've not wandered off elsewhere) to see the changes. If you're wondering about the blue text: not yet. Obviously if you're making your own theme you might think “hmm I should change those” but we're going about this methodically ;)

Go back to the Inbox.

You Have a New PM!

If you happen to have an unread PM in your inbox, that is great, but if not we'll have to get there the old fashioned way.

First, we need to change the PM Popup, however you can only see it if you have a PM, and you can only see certain parts if you have only one PM to read.

The CSS for the PM Popup is:

#pmtoast {
background:#fff;
border:2px solid #3a5197;
bottom:10px;
color:#333;
display:none;
font-size:90%;
position:fixed;
right:10px;
text-align:right;
text-decoration:none;
width:200px;
z-index:1;
}
 
#pmtoast:hover {
border-color:#3a5197;
}
 
#pmlink {
background:url(http://z1.ifrm.com/static/1/toast.png) no-repeat 5px;
color:#5a70b3;
display:block;
padding:10px 10px 10px 55px;
text-decoration:none;
}
 
#pmlink big {
color:#5a70b3;
display:block;
font-weight:700;
padding-bottom:5px;
}
 
#pmlink strong {
color:#E77700;
}
 
#pmclose {
border-top:1px solid #3a5197;
color:#5a70b3;
display:block;
font-size:80%;
padding:1px 10px;
}
 
#pmclose:hover {
color:#3a5197;
}

Luckily you have a handy visual guide to help you. Here you'll notice that there are hovers for elements, rather than links. This just provides a neat visual effect when you hover over the popup with your mouse. Fortunately, you don't have to keep getting PMs sent to you in order to do this. Go to your Board Template and add this HTML to Above the Board:

<div id="pmtoast">
	<a href="#inbox" id="pmlink">
		<big>New Message</big>
		<small>From:</small> <strong>Username</strong><br />
 
		<small>Subject:</small> <strong>PM Title</strong><br />
 
		<small>Sent:</small> <strong>One minute ago</strong>
	</a>
	<a id="pmclose" href="#">Close</a>
</div>

Edit the Template, and refresh your page. You should now have a PM popup wherever you go on the board. Don't worry if you click the Close bar and it disappears, it'll reappear on the next page.

So, working outwards in, for the #pmtoast: Change the background colour to #28344c. Change the border colour to…our usual border hex code. Change the font colour to #acbbc2.

Edit the CSS and refresh the page :)

Now it's appearance is a lot darker. Hover over the popup and you'll see the border colour change, so we need to change the border colour for the hover on #pmtoast.

#pmtoast:hover {
border-color:#3a5197;
}

Ah, there it is :) Change the hex code to #acbbc2.

The folder image is actually a background image on the #pmlink. Change it to:

http://z1.ifrm.com/static/2/toast.png

Then change the font colour to #acbbc2.

Edit the CSS and refresh the page.

Currently, the border colour when hovered, the folder image and now the From/Subject/Text font colour has changed.

According to the annotation above, you should know which CSS snippet you need to change the font colour of. Change the hex code to #acbbc2.

The font colour for #pmlink strong does not change for Midnight. This is one instance where we've tried to keep some orange in the theme somehow.

If you edit the CSS right now and refresh the page, the only parts left to change is the horizontal border between the #pmlink and the #pmclose, and the text for the #pmclose.

Change the top border (look at the annotation) colour to #0a101b, and the font colour to #acbbc2. For the hover, change the font colour to #848a96.

Edit the CSS and refresh. Provided you got the selectors correct (according to the annotation), it should look like this:

Remove the HTML from the Board Template, otherwise it will keep popping up :P

Unread PMs

In the initial screenshot, you'll see that I have an unread PM from 'Welcome Info'. You might have rebelled and not read yours either, otherwise you might not have an unread PM. If you can, get someone else on your board to send you a PM so you can go to the inbox and see the unread PM. This would require not clicking the PM Popup to read it.

If not, you could just make the changes for this theme anyway since it just requires a simple background colour change.

tr.pm_new td {
background:#D8DCEB;
font-weight:700;
}

Table row with the class of pm_new when there is a new PM, and this snippet styles the cells within the row. Change the background colour to #2c3952. The basic idea is to change it to something obviously different than the generic td background colour. The font-weight:700 attribute also bolds the text to make them stand out more.

Changing the Mini Orange Folders

Last but not least, we have these: . Find #pm_folderlist li and change the background image to:

http://209.85.62.24/0/3/0/p51180/pm_folder.png

Edit the CSS and refresh the inbox to see what it should look like at the end of this part of the guide :)

You have now completed Part 5.

Go to Part 6: The Search, Calendar, FAQ and Portal->



themes/themeguide/part5.txt · Last modified: 2017/01/09 19:43 by Aidan