ZB Theme Guide Part 3: The Posting Page

Create a new topic anywhere on your forum to access the posting page. As promised, we'll get straight on those light menus from the end of Part 2.

Ooh how nice does that look? :P Let's get editing.

Input/Select/Textarea and Buttons

Once again, something that when changed at this point, will affect a lot of other areas across the board.

A brief explanation

  • input: Where an Input usually consists of one line of text, and commonly appears on forms.
  • select: A good example is the theme selector. You select something from a list of options.
  • textarea: Where you type your posts, signature, PMs etc. Hitting enter creates new lines.
  • buttons: Click them to submit a form, execute a script to make something appear, or navigate away from the page.

It's all editable near the top of the CSS:

input,select,textarea,button,a.btn_fake {
background:#fafafa;
border:1px solid #BFC8E3;
color:#333;
padding:3px 5px;
vertical-align:middle;
}
 
textarea {
font-family:"Verdana", sans-serif;
font-size:100%;
margin:auto;
width:98%;
}
 
input:focus,input.focus,textarea:focus,textarea.focus {
border-color:#5a70b3;
}
 
.submit_error {
background:#fff8eb;
border:1px solid #e77700;
}
 
button,a.btn_fake {
background:url(http://z1.ifrm.com/static/1/css/btn.png) repeat-x top #f8f8f8;
color:#666;
cursor:default;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:90%;
overflow:visible;
width:auto;
}
 
button:hover,a.btn_fake:hover {
border-color:#3a5197;
}
 
button.btn_text {
background:none;
border:0;
cursor:pointer;
font-family:Arial, "Bitstream Vera Sans", Verdana, sans-serif;
font-size:100%;
}

New CSS Attribute Explanation:

  • vertical-align:middle;: Self explanatory, sets the vertical-alignment of the element. You won't need to edit this.
  • cursor:default; : Changes the cursor. This isn't the same as using a custom cursor, this is one of the computer defaults. 'default' would be the generic arrow. You can read more about cursorshere
  • overflow:visible; : Something else you don't need to edit. However overflow is used to give scrollbars to areas, or hide content if it's too big for the element it's in.

Getting rid of most of the grey

Let's take the first snippet of the CSS above:

input,select,textarea,button,a.btn_fake {
background:#fafafa;
border:1px solid #BFC8E3;
color:#333;
padding:3px 5px;
vertical-align:middle;
}

That is where the light colour lies, where the text colour of what you're typing is declared etc.

Change the background colour to #1C273D. Change the border colour to #0a101b. Change the font colour to #848a96.

Edit the CSS, and refresh the page. That looks a bit better, and the theme selector has changed too :)

If your browser is up to date and happy, clicking into the textarea should turn the border of it blue. We don't really want that, so look at this snippet:

input:focus,input.focus,textarea:focus,textarea.focus {
border-color:#5a70b3;
}

:focus is what is referred to as a 'pseudo-class', and basically styles an element when it is focused on.

Change it's border colour to #848a96. Edit the CSS and click into the textarea again (or the input, it works for both), and the border should turn a light colour.

Buttons

Time for the buttons.

button,a.btn_fake {
background:url(http://z1.ifrm.com/static/1/css/btn.png) repeat-x top #f8f8f8;
color:#666;
cursor:default;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:90%;
overflow:visible;
width:auto;
}

Change the background image to:

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

Change the background colour to #202e45. Change the font colour to #848a96.

Edit the CSS, and refresh the page. At this point it's edited very button around the board, and also the avatar selections in the avatar gallery (http:/s#.zetaboards.com/yourboardname/home/?c=12&folder=-3). For this reason, it's definitely a good idea to use a background colour if you end up using a background image.

Back at the posting page, if you hover over the buttons, the border colour changes. This is another 'pseudo-class'. Grab the final snippet of the CSS at the start of this section:

button:hover,a.btn_fake:hover {
border-color:#3a5197;
}

Change the border colour to #848a96, the same as the :focus.

In some browsers, you might notice that the upload form is still white. There doesn't appear to be any way to edit this, so don't worry if you can't change it. The 'Browse' button cannot be altered either.

Now we've got the form elements out the way, we'll move on to the other grey areas of the page.

td.c_desc

Another change which will affect a lot of other areas, mainly forms. By default it's darker than it's right side component. When filling in a form, it's the description of what is adjacent to it on the right.

Virtually a quarter into the CSS, you'll find td.c_desc:

td.c_desc {
background:#f6f6f6;
font-weight:700;
text-align:right;
vertical-align:middle;
width:200px;
}

If you ever wanted to make the description area shorter/longer on the left, this'd where you'd change it's width.

For now however, change it's background colour to #1C273D.

Edit the CSS and refresh the page. Now we just have the emot panel to edit.

The Emoticon List

Once again, all the CSS required for this part is in one clump, just under halfway through the CSS:

#emot_wrap {
background:#f6f6f6;
border:1px solid #e7e7e7;
}
 
#emot_wrap h3 {
background:url(http://z1.ifrm.com/static/1/sub.png) repeat-x top #f6f6f6;
border-bottom:1px solid #e7e7e7;
color:#999;
font-size:120%;
text-align:center;
}
 
#emot_end {
border-top:1px solid #e7e7e7;
display:block;
font-weight:700;
padding:4px 0;
text-align:center;
}

The selector names are self explanatory, mostly. #emot_wrap is the box it's in, #emot_wrap h3 is a header, thus the header saying 'Clickable Emots', and #emot_end is the 'Showall', which is actually a 'blocked' link.

New CSS Attribute Explanation

  • Display: block : Display can be used for many things, and you can read about it here.

For the #emot_wrap: Change the background colour to #1C273D and the border colour to #0a101b. Edit the CSS and refresh the page to see the changes made.

What you should be seeing now, is a light h3 which says 'Clickable Emots', and a light border above 'Show All'.

For #emot_wrap 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 #848a96.

Now change the top border colour for the #emot_end to #0a101b.

The Emot list is complete.

Completing the Posting Page

The last item to change is the + and - you see bottom right of the textarea. These increase/decrease the textarea size for those wanting to make a large post.

To change the colour of these, locate the following snippet:

#c_post-resize span {
color:#e7e7e7;
cursor:pointer;
font-size:225%;
padding:20px 5px 0;
}

Change the font colour to #848a96.

BUT we aren't finished just yet.

Enter some dummy text into the textarea, and then it the Preview button. A preview of your post will pop up above the textarea.

To edit this, locate the following snippet just over a third of the way into the CSS:

#c_post-preview {
background:#f6f6f6;
border:1px solid #BFC8E3;
margin:0 auto 10px;
padding:5px;
text-align:left;
width:98%;
}

Change the background colour to #28344c, the border width to 2px, and the border colour to #848a96.

Edit the CSS, refresh the page, and hit Preview one more time.

Taa daa!

You've completed part 3. If you want to continue to part 4, stay on that posting page.


Go to Part 4: The Topic View->



themes/themeguide/part3.txt ยท Last modified: 2015/01/09 16:02 (external edit)