MyBB Community Forums

Full Version: Which files control layout?
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
Thanks to help in the General Forum, I've got my colors and buttons the way I want them. I'd appreciate some guidance in the next steps.

I'd like to edit the layout of portions of the default theme that comes with 1.26 but I'm not finding the files - or to say it better - I don't know what I'm looking for, to make the changes I want. I've looked around but don't recognize anything that looks like what I want.

Example 1) To my eye, there's a lot of wasted empty space at the top of the page. Some of it is padding before the headers starts. Where is that padding defined?

Example 2) The logo.gif is, for me, way too big. I've created a more compact version of my own business' logo and had no problem installing it in the /images/ folder, but I still need to reduce the default size so the logo will display properly. Where is the size defined?

Example 3) I'd like to move such things as login, search and a few items from the footer (contact and link to my home page) up into the header to the right of the logo so that space does some real work. Where is the code for the header - and where is the code for the footer?

In advance, thanks for the guidance.
jerseyjoe Wrote:Thanks to help in the General Forum, I've got my colors and buttons the way I want them. I'd appreciate some guidance in the next steps.

I'd like to edit the layout of portions of the default theme that comes with 1.26 but I'm not finding the files - or to say it better - I don't know what I'm looking for, to make the changes I want. I've looked around but don't recognize anything that looks like what I want.

Example 1) To my eye, there's a lot of wasted empty space at the top of the page. Some of it is padding before the headers starts. Where is that padding defined?

Example 2) The logo.gif is, for me, way too big. I've created a more compact version of my own business' logo and had no problem installing it in the /images/ folder, but I still need to reduce the default size so the logo will display properly. Where is the size defined?

Example 3) I'd like to move such things as login, search and a few items from the footer (contact and link to my home page) up into the header to the right of the logo so that space does some real work. Where is the code for the header - and where is the code for the footer?

In advance, thanks for the guidance.

You should read: http://wiki.mybboard.net/index.php/Admin_CP_Themes


Most of what you are looking for would be in your templates template files in the header file, footer file, login file, as well as in your themes style, etc.
Maybe a little humor will explain my situation.

A child comes home from school one day. Over cookies and milk, sitting with the mother, the first-grader poses the classic question, "Mommie? Where did I come from?"

Mom has been prepared for this moment. She has read all the books on how to explain the facts of life. She's consulted her doctor and her friends. She is informed, confident and ready to go. It's a great Mother and Child opportunity.

She explains the mystery of life with awe and affection. She tells how the love of her Mommie and Daddy created this wonderful new life. She speaks of eggs and sperm. The facts are presented in clinical detail.

The child is silent.

Finally the mother asks anxiously, "Honey, do you have any questions? Don't be afraid. I promise I'll answer you as best I can."

"Today we had a new girl enroll in school and she sat next to me at lunch break. She said she transferred from Chicago. Then she asked me where I came from. I told her I'd ask my mom. I can't wait until tomorrow."

So I ask where is the code that define the size of the logo.gif and I get a link to Wiki on the structure of the entire system. I want to know how to change the amount of space from the image to the top of the page and I'm sent to manuals on CSS.

I just want a simple answer. I apologize to those who believe I "should" become as expert as they. I truly respect the breadth and depth of their knowledge. But I have responsibilities and demands on my time that preclude my trying to match their admirable knowledge and skill.

Let me try one more time, in hope that there is someone willing to give me the simple facts, rather than the Big Picture.

Where is the code that defines the size of the logo.gif?

Where is the code that defines the space above that image?

Thank you.
Forums Control Panel ยป Template Manager
---Edit Template

Templates Modify/Delete

Default Templates select expand

find header file

Modify Template header

look for:

<a name="top" id="top"></a>
	<div id="container">
		<div id="header">
			<div class="logo"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" /></a></div>


You could change it to something like:

<div id="container">
<div id="header">
<div class="logo" style="background:#FFFFFF;"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" width="100" height="60" border="0" /></a></div>

Where you see:

width="100" height="60"

That can control size of logo.

You can remove the:
<a name="top"></a>
From above the default header code to make the image move up a little more.

You can also play around with the padding in your page container via edit default theme in your theme manager.

And you can also write your logo specific via css in theme manager additional css if you prefer to do it that way.
Quote:Where is the code that defines the size of the logo.gif?
We don't define a width/height for the logo so when you upload your own version it should show whatever size your uploaded version.

If you still want to specify your own width and height you can do so in the templates by modifying the <img> tag for the logo to contain:
height="X" width="Y"

As for instructions on editing templates you can view those here: http://wiki.mybboard.net/index.php/Admin_CP_Templates

Quote:Where is the code that defines the space above that image?
You were pointed to the instructions for using the theme system. Read that page to establish how to edit the stylesheets for the forum.

Specifically you want to change the padding of the "Page Container" in the theme area - you would want to put in the extra CSS attributes "padding-top: 0;".

There is a particular reason instruction sets are linked to as well: So you learn how to use the features. It seems kind of pointless for you to always have to come back here and ask a new question when you want to make some small changes.