ZB Theme Guide Part 6: The Search, Calendar, FAQ and Portal

This part may sound like a lot, but there isn't a great deal of CSS to edit for these 4 pages. Therefore since you ought to be familiar with the CSS by now, you should be able to handle it ;)

#fafafa is one of the two main light grey hex codes used in the default theme. The other being #f6f6f6. Therefore when creating your own theme you could easily make a large scale edit through the CSS in one go. For this theme, we've swapped #fafafa with #232f46 (the lighter dark blue hex code), and #f6f6f6 with #1C273D (the darker dark blue hex code).

Therefore for the rest of this guide, rather than be told which hex code to use you'll have to actively get it. When creating a theme you will usually have a palette of colours that you're using. To keep it smooth and consistant, it's best to keep using the same hex codes as much as possible. However while too many hex codes looks a mess, too little can look awfully bland. For instance, on the index we've used two visually different colours for the category table cells. This is not only more pleasing to the eye as it gives more depth to the page, but separates the information too.

Therefore our main hex codes are:

Darker blue hex: #1C273D
(Lighter) Dark blue hex: #232f46
Border hex: #0a101b
Links and lighter text: #acbbc2
Link hover and darker text: #848a96

The Search...results

Go to your board's search page, and it will look like it's been altered already. However the search results are a different story.

Input a word from your topic test into the search box, and the search results will pop up on the next page.

Wow that looks very nice, but the light grey doesn't quite go with the dark blue.

The search results CSS:

.search_results {
background:#fafafa;
border:1px solid #e7e7e7;
margin-bottom:1em;
padding:5px 7px;
}
 
.search_results h3 {
display:inline;
font-size:125%;
}
 
.search_results cite,.search_results p {
color:#777;
font-size:85%;
margin:0;
}

For .search_results, use the lighter blue hex code. This will change the main background colour of the search results. Change the default border hex code for the same selector, to the main border hex colour code. Change the font colour hex for .search_results cite,.search_results p to the darker font text colour.

Edit the CSS, and voila, looks much better. That was easy :)

Search Results Bugs!

Yikes. Until we get these fixed on our end you'll unfortunately have to contend with two bugs on this page.

If you want to, you can skip to the end of this Search part

First is with the [code] box, which is the product of a javascript fix for an error generated by Internet Explorer. Right now it'll be showing a list of ' < '. However if you were to click and drag your cursor in this box, you'll see text flickering by. The code contents is hidden in there somewhere, just not very visible.
In the future we will either fix this script to work outside of topics as well as inside topics, or remove the original script altogether. Unfortunately there isn't a decent CSS fix for this yet, but if you feel your board will need it, contact Nicola (me) via a theme support ticket from your board :)

Hopefully you're looking at your test post, so click the spoiler to expand it.

As you can see, there is a slight gap between the spoiler contents and the toggle. This is because of the properties given in the search results:

.search_results div {
display:block;
margin:5px 0;
}

In the structural half of the CSS (which you generally don't need to touch), you'll see this. In essence, it's saying Give any div in a search result, a top and bottom margin of 5px. The contents of the post in each search result is in a div, and to maintain some sort of structure to each result, a margin has been given. However this all affects any other div within that div, and we're using a div for the spoiler contents, therefore there is a 5px top margin for the spoiler contents which you probably don't want. You won't be able to see it on this theme, but it is also affecting the blockquote div too, the div which contains the quoted text.

If you want to fix this, find the following snippet in the CSS:

#profile_menuwrap ul,ul.cat-topicpages,blockquote dl,#fast-reply dd {
margin:0;
}

This snippet contains a few random selectors, and their attribute is that they've had their margins removed. To remove the margin from the spoiler, we are going to add a new selector to this snippet:

#profile_menuwrap ul,ul.cat-topicpages,blockquote dl,#fast-reply dd, .search_results div div {
margin:0;
}

This will remove the margin for both the blockquote div, and the .spoiler. Because we didn't get specific with using the spoiler class or 'blockquote', we can affect them both.

Hopefully you've understood that, and you've learnt a bit more about how CSS works. If you're still confused, don't worry, it will honestly make sense to you at some point when you least expect it to :P

And that concludes the search page.

The Calendar

For this part, it'd be handy to have a birthday appearing on the current month displayed in the calendar. If there isn't one, it would be easier to go change your profile's birthday for the sake of this part.

On the above screenshot you'll (barely) see a generic calendar event with no styling, and a calendar event with styling… and then a birthday. Apparently I get to turn 21 again.

The CSS:

.calendar td.cal_inactive {
background:#f6f6f6;
color:#e7e7e7!important;
}
 
.calendar td div {
background:#f6f6f6;
border-bottom:1px solid #e7e7e7;
font-weight:700;
padding:5px 7px;
}
 
.calendar div a {
background:url(http://z1.ifrm.com/static/1/s_minibday.png) no-repeat 5px;
float:right;
font-size:80%;
font-weight:400;
padding:0 0 6px 24px;
}
 
.calendar li a,.calendar li span {
border-color:transparent;
border-style:solid;
border-width:1px;
display:block;
padding:3px;
}
 
.calendar td#cal_current {
background:#fff;
border:2px solid #5a70b3;
}
  • .calendar td.cal_inactive - Days of the month which aren't really days of the month. The calendar makes the last days of the previous month and the first days of the next month less obvious to make the calendar look more 'complete'.
  • .calendar td div - The cell containing the date for each of the month.
  • .calendar div a - A birthday cake.
  • .calendar li a,.calendar li span - Calendar events
  • .calendar td#cal_current - Today.

color:#e7e7e7!important; !important next to an attribute will make it override the same attribute set for the element in another area of the CSS. It isn't good CSS practice to use this too much.

Change the background colour for .calendar td.cal_inactive to the darker blue hex code, and also use the same hex code for the .calendar td div.

To change the grey border, alter the grey border hex code (#e7e7e7) to our main border hex code. Change the same hex code value currently being used for the font on the inactive date cells to our darker font colour.

Now we just have the birthday cake and the active date cell to change.

The birthday cake actually appears in two places on the board:

.bday {
background:url(http://z1.ifrm.com/static/1/s_minibday.png) no-repeat;
color:#425384;
font-size:90%;
font-weight:700;
height:16px;
padding:2px 2px 2px 18px;
width:20px;
}

^ Is where it appears for the Board Statistics table on the index, if you have the birthday listings turned on. Therefore we can use the same background properties for the snippet above, and for .calendar div a.

Change the background image to:

http://z3.ifrm.com/0/14/0/p6637/mono_cake.png

Also change the font colour for .bday to the lighter of our font hex codes.

For the current date cell, we're going to use a hex code we used back in part 2 for the forum rules. It's a bit lighter than the lighter hex code. Therefore change the background colour for .calendar td#cal_current to #28344c.
Then change the border hex code to our lighter font colour. Again, this is to provide a very visible change to make it more noticeable.

Your calendar should now look like this:

Calender Event Bug

This is optional. You can skip to the FAQ section if you want to.

If you're an Internet Explorer user, you might have noticed that the events don't look as they do in the screenshots above. They won't touch the left side. If you've followed the bug fixes for the search results, then you'll be familiar with it being a margin issue. Un-styled lists automatically come with margins and padding. The margin on the list of events is the reason for this error:

Find your 'removing margins' snippet of CSS once more:

#profile_menuwrap ul,ul.cat-topicpages,blockquote dl,#fast-reply dd, .search_results div div {
margin:0;
}

Add to the list of selectors table.calendar ul. Remember to separate it from our last added selector with a comma! :)

That should have now fixed the error.

The FAQ

The easiest part of the entire guide. Since we changed part of the FAQ in Part 5, we only have one thing left to change.

#faq dt a {
color:#425384;
font-size:120%;
font-weight:700;
}

Change the font colour here to the link hex code. That's it for the FAQ :P

The Portal

Only a small section of CSS once more:

div.portal_content {
background:#fafafa;
border:1px solid #e7e7e7;
font-size:88.3%;
margin:0;
padding:5px 7px;
}
 
#portal h2 {
font-size:88.3%;
}
 
#portal h4 {
background:url(http://z1.ifrm.com/static/1/sub.png) repeat-x top #fafafa;
border-left:1px solid #e7e7e7;
border-right:1px solid #e7e7e7;
color:#777;
font-size:88.3%;
font-weight:400;
margin:0;
padding:5px 7px;
}
  • div.portal_content - Refers to each Portal block containing content. This is the source of the grey you're currently seeing.
  • #portal h2 - The header titles for each block.
  • #portal h4 - The sub-headers appearing on some blocks.

Change the background colour for the portal blocks to the lighter dark blue hex code. Change it's border colour to the main border hex code.

Edit the CSS and refresh.

The grey strips left are the #portal h4 instances. Change the background image to:

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

Change the background colour to #1f2b42. Change the left and right border hex codes. Change the font colour to the darker font colour hex code.

Edit the CSS and refresh.

One aesthetic adjustment you might want to make, is adding a 1px solid border to the #portal h2 (you know which hex to use ;) ). If you're a little confused as to how you'd do that, add the attribute border:1px solid #0a101b; .

The finished result:

Congratulations! You have completed Part 6. You are nearly there, but there are still a couple of steps to go :)

Go to Part 7: The Blog->



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