Site Header Table

[Kami]

Allrighty! So next steps are a little long, but it's because they're just minor tweaks and changes:

1. Go to .infotable, .infotable2 in your CSS and DELETE , .infotable2 (yes, including the comma!). Then highlight and COPY the entire thing from .infotable to the closing } and paste it immediately after the original. Then, change the second instance of .infotable to .infotable2.

2. In .infotable, change the VALUE of min-height to 200px (do NOT delete the semi-colon).

3. In .infotable2, find the following lines and change them as I have indicated below

- change the VALUE of margin-bottom to 30px (do NOT delete the semi-colon)

- change the VALUE of min-height to 95px (again, do NOT delete the semi-colon).

4. Before the closing } on .infotable2 add in the following properties AND values (in their entirety):

    font-family: "Arial Narrow", sans-serif;
    text-transform: uppercase;

5. Go to .box-4.inside, .box-5.inside, .box-6.inside and change the VALUE of min-height to 75px (and again with the semi-colon)

6. Immediately after min-height: 75px;, on a new line add max-height: 75px;

7. Scroll to the bottom, and create a new line. Add:

.box6.inside {
    overflow-y: scroll;
}

Let me know how that looks (:

[Former Member]

That looks a lot neater and compact. I have a question, it may be nothing, but are the two bits in red supposed to be in red; are they alerting me to something, or is it just that it has the same name as the line above it; prntscr.com/j0qmoz?

[Kami]

Oop, looks like we got our wires crossed. Let's fix this.

First, remove these bits I've coloured RED entirely.


.infotable {

.infotable {
    min-height: 200px;
    max-height: 120px;
}

As well as

.infotable2 {

.infotable2 {
    min-height: 200px;
    max-height: 120px;
}

I'm actually not sure why this is there, but it might have been an earlier attempt we had to fix the sizing of the main containers.

Then just make things a little neater by deleting the extra spaces between each class's opening { and the first item under it. The basic structure of CSS is as so (this is just an example, don't change any of your actual CSS):

.classname {
    property: value;
    property: value;
}

(this is just to make things neater. Each property and its accompanying value being on their own line makes CSS easier for you to read and find specific things to change.)

To explain what happened here:

Each style is dictated by whatever goes between { and }. What happened here is that you put a complete style in the middle of that, so you essentially told the CSS, "Start this style, do this WHOLE style, end the first style" which it doesn't understand.

Let me know when that's done. Your CSS should have no red text when you are finished, and there should be no unnecessary extra lines.

[Former Member]

Sorry for the delay, I spent a couple of days away.
-I've removed those red bits so this is what it looks like now; prntscr.com/j1p3hh

[Kami]

Everything looks correct to me -- how is it visually on the forum?

[Former Member]

It looks okay; prntscr.com/j24qzq | somnum-metus.boards.net/

[Kami]

OK so now for fonts, find

.box-4.title, .box-5.title, .box-6.title

There should be a property that says, color: #FFFFFF; -- go ahead and change FFFFFF to 595959. This should make the title font the same colour as the title font in the top boxes.

After this, they should be visually identical barring the sizing changes we implemented. Is this how you want it to look, before we move on to the recent posts plugin?

[Former Member]

Yes, it all looks great, thank you.

[Kami]

Excellent! Glad to hear it (:

Now moving on to the recent posts plugin. If I recall correctly when you install the plugin it should give you a DIV with an ID in it. Could you tell me what that ID is?

[Former Member]

I'm not entirely sure to be honest. I don't know if this is what you're after; prntscr.com/j2mcpq

[Kami]

Actually yes!

So what we're going to do is assign the box we want things to appear in an ID.

Go to where you placed the header containers, and find the div with the class box-3 inside. After the closing quotation immediately following the word inside but before the closing bracket >, add a space followed by id="recent-updates", including the quotation marks and excluding that comma just now.

Note: You can change this ID to anything that you want, so long as it is not used by anything else on the page. IDs must be unique for each element.

Then, go to the plugin settings and add the ID -- without quotes or the id= part! -- in that first box in the plugin settings you sent me a screenshot for.

Next, choose the following settings:

Scroll or Static? - Static
March Forum Styling? - Yes

Save your settings, and let me know. We will have to tweak this more to get it to look just right, but I need to know how it looks before I can say what to change.

[Former Member]

OMG I am so sorry, I'm a bit stressed and cannot figure out the div class bit of it. I don't know if I'm being dumb, or I just cannot think at the moment. prntscr.com/j30zdd Which bit am I needing to alter.

[Kami]

It's okay! I'm here to help (:

I need you to go to the HTML component, rather than the CSS. So wherever you would input the text for the containers, that's where you would go. I'm not sure where you put them, but I offered three locations:

- Global Headers
- Main Headers
- Layout Templates (either "Home" or "Forum Wrapper")

so it's bound to be in one of them.

[Former Member]

Thank you. This is how it looks currently; prntscr.com/j317jy

[Kami]

Great! One thing about the Recent Threads plugin is that it is not retroactive. This means you will not see any content until after posts are made after its installation.

So a few things to do.

1. Remove the text that says "This is your content..." in its entirety, so that the box is empty

2. Make some test threads if you don't have any threads yet, or if you do, make some test threads and some test posts in already existing threads. I'd do about six tests in total. Make sure if you are creating test posts in already existing threads that you create them in DIFFERENT threads, otherwise the same one will update instead of listing twice.

Let me know when that's done, and we'll move on to styling things (: