Hello, I am the site designer and coder for http://fairytailonline-rp.forumotion.com/

I feel like everything is solid work over all together however I am very curious as to what you all think.

I for one am proud of it, some issues with a couple things but alot of the codes I have refuse to transfer over to phpbb22 which is the ideal style I would like but invision works too, I just want to add a background to make up for the transparent areas but hey it is what it is. But yeah I would like overall opinions from anyone who wishes to give it. I spent a solid month and half on the designs.

This is what I meant by transparent areas be filled

Right now


What I wish I could have:


I'd also like to add a footer to the bottom of the forum but meh

This type of question is not considered a support question.  You can ask for a review to get comments about your forum.

I saw another user did the same thing in this same area so I thought it was okay sorry about that

I have discuss it with the other member by pm.

I'm sorry what?

You referred to another member who posted the same thing. I replied to that saying I discuss it with that member by pm.

In regards to the gaps, you could fill them by adding a background to the main content container. ( i.e. #main-content ) CSS :

Code:

#main-content { background:#111 }

Also, have you used the development tools in your browser before ? You can initiate them by pressing F12 or right click and inspect element. The DOM Inspector ( or "Elements" tab in Chrome ) can make it a lot easier to find the selectors you need to manipulate the document with CSS. Just click the magnifying glass to select an element from the page, then it should show you its selector right before the dimensions. ( e.g. h1.page-title )



As for the footer, you do have one at the bottom which contains various links related to the service, but if you wanted to make one similar to here, it would require a bit of template work. Mainly with overall_footer_begin and end. You also need to be in the founder account to edit the templates.

may I have the codes to do so, also I would love to have a footer like you have here but I want to have an image on mine

bump

You need to go to Display > Templates > General >

1. overall_footer_begin
2. overall_footer_end

You should firstly focus on separating the footer from the wrapper. In which case, under the "begin" template find :

Code:

<div id="gfooter">

and place a closing div before this element to break it out of the wrapper.

Code:

</div>

After this, you can manipulate the two templates however you like. You should mostly focus on the beginning template first though. The ending template mainly contains some of the ending links and the admin panel link. I'd also recommend using classes on most of your elements, because you're going to need CSS for adjusting the position, display, and colors of your footer elements.

Also, if you need any help regarding HTML and CSS this site has tutorials on both markup languages. They're vital if you want to get into web design.

I don't want anything too complicated

I just want a footer like this

bump

bump

Again, sorry for the late reply. That should be pretty simple.

Go to Display > Templates > General and open the overall_footer_end template.

Replace :

Code:

            <p class="center">
               <strong>{ADMIN_LINK}</strong>
            </p>

by :

Code:

<div id="footer_end">
  <div id="footer_admin"><strong>{ADMIN_LINK}</strong></div>
  <div id="footer_content_left">FORUM TITLE</div>
  <div id="footer_content_right">EXTRA TEXT<br/>EXTRA TEXT</div>
  <div id="footer_content_bottom">CLOSING TEXT</div>
</div>

You can fill in the content as you want ; with text, images, etc.. Save and publish the template when you're done.

Then use the following CSS to make adjustments to position, colors, etc..

Code:

#footer_end {
  background:url('IMAGE_URL') repeat #000;
  width:100%;
  height:300px;
  position:relative;
}

#footer_admin {
  text-align:center;
  position:absolute;
  top:0;
  left:0;
  right:0;
}

#footer_content_left {
  position:absolute;
  top:35px;
  left:5px;
}

#footer_content_right {
  position:absolute;
  top:35px;
  right:5px;
}

#footer_content_bottom {
  position:absolute;
  left:5px;
  bottom:5px;
}