News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Alignment at the bottom

Started by CandC, November 10, 2012, 01:18:58 PM

Previous topic - Next topic

CandC

I've managed to incorporate our logo to replace the SMF one.

I was able to make the background a solid color instead of the faded one.

However, now I realize the bottom of the pages seem misaligned.  I don't know if this is because the height of our logo is larger and I didn't make necessary edits elsewhere (or) making the background a solid color did it.

I know it must be something simple, but the solution is escaping me.

Anyone care to enlighten me?  ;D

http://chopandchat.com/smf/index.php

mashby

I'm guessing you edited this image?
http://chopandchat.com/smf/Themes/CACorig/images/theme/main_block.png
The footer image looks a little jagged but the main_block looks jagged, too. Is that what you mean by misaligned?
Always be a little kinder than necessary.
- James M. Barrie

CandC

I did edit that file.
Perhaps my limited editing skills, along with enlarging the the area at the top to accommodate our logo created the issue.

I see the bottom misaligned at the corners on all pages.
The rest looking jagged didn't bother me as much, but in a perfect world I'd like to fix both.  ;D


Hj Ahmad Rasyid Hj Ismail

Did you make some changes to your index.template.php especially near the bottom part? Last time somebody is facing this kind of problem made a mistake there. Though firebug cannot detect this problem, your footer section seems obviously disturbed as it should normally be outside the content_section. Some of the div etc might not be properly closed.

mashby

I'd suggest replacing that image file with a new one. It's quite obvious that's the culprit. :)
Always be a little kinder than necessary.
- James M. Barrie

CandC

Thanks for the replies.   :)

I've had the darn flu and just now getting around to looking at this again.

I'll try replacing the image with the original and see what happens.

CandC

Ok, replaced the main_block.png with the original found in the default Curve theme.

It fixed the alignment issue at the bottom.

However, now the logo runs out of the area assigned at the top.

(see attached image on the test copy of the theme I made)

The edited version of the main_block.png on the site now  - allows for the logo, but breaks the alignment at the bottom.
Plus, now the corners/edges are not clean because I've obviously lost the transparency for them.

At this point, is my only option to resize my logo to make it small enough to use the original main_block.png file?


I was hoping to darken the overall look a bit (some have complained it's too bright/stark), but if I can't do this simple edit I guess that's out too.

Hj Ahmad Rasyid Hj Ismail

Why must you edit main_block.png to insert a logo? You can simply insert the logo and adjust its css accordingly, right?

CandC

Quote from: Ahmad Rasyid Ismail on November 18, 2012, 07:40:21 AM
Why must you edit main_block.png to insert a logo? You can simply insert the logo and adjust its css accordingly, right?

To make things easier - I just saved our logo you see in the image above as smflogo.png.
Our logo is taller than the actual smf logo and causes the overlap with the default main_block.png image.

I think - I edited the height of the main_block.png for that area because I couldn't figure out where in the index.css file I would make that type of adjustment.  I recall trying several edits and it not working, so my limited editing skills are showing.

I'll bet it's something simple that's eluding me.  ::)

Should I be looking at the index.css (or) rtl.css?

Hj Ahmad Rasyid Hj Ismail

In that case, you really don't need to adjust main_block.png. Just create smflogo.png (or any other name). Then change its css accordingly in index.css especially at the following lines:

#siteslogan, img#smflogo {
    float: right;
    line-height: 3em;
    margin: 0;
    padding: 0;
}


and

#top_section {
    margin-bottom: 3px;
    min-height: 65px;
    overflow: hidden;
}

CandC

Thanks Ahmad.

I tried changing those values and it only adjusts the 2nd gray area that fades to white, not the very top area where the forum name and our logo is located.
If I could make this area larger, it would accommodate our logo size. It's currently 98 pixels in height.


I also tried working on this part:
/* the main title, always stay at 45 pixels in height! */
h1.forumtitle
{
   line-height: 45px;
   font-size: 1.8em;
   font-family: Geneva, verdana, sans-serif;
   margin: 0;
   padding: 0;
   float: left;
}


But, it didn't work either. It enlarged the areas around the forum title, but it just moved the logo just further down into the next section.

My desire is to make the first blue area at the top (where Simple Machines and the menu listing is up top here) a taller area.

Push come to shove, I guess I'll just have to redo our logo and make it much smaller.

Hj Ahmad Rasyid Hj Ismail

I was lost when I was like you before. Even now, I somestimes am lost too. The only thing is I try again and do not give up.

They are two things you need to know about logo position that you can place. The guide is actually there in Admin CP > Current Theme.
1. The Forum Name area.
2. The SMF logo area.

Logo that are bigger like the one that you are planning to use, need a bigger space i.e. width and height. So long they are not wider than 50% of your forum, there is no need to adjust or add width. But higher image, need some adjustment as I said before.

Currently, I see that your logo is working fine. It does not got to aother section at all. So I cannot really understand what is wrong with it. SimpleMachines logo original area and menu are always separated so far that I know. Please clarify so that we can help you better.

CandC

Quote from: Ahmad Rasyid Ismail on November 20, 2012, 09:57:24 PM
Currently, I see that your logo is working fine. It does not got to aother section at all. So I cannot really understand what is wrong with it. SimpleMachines logo original area and menu are always separated so far that I know. Please clarify so that we can help you better.
Yes Ahmad, the image you attached is what you see on my site now. That's because it's showing the result when I edited the main_block.png image to accommodate it.
This was my solution because I couldn't figure out how to edit the index.css file to do so.

But - with editing the main_block.png file - it broke the alignment of the bottom of the pages
This was the reason I created this thread in the first place.

Suggestions that followed said it was because I edited the main_block.png image file. 
They were right. 

I confirmed this was the culprit when I made a copy of my customized theme and tested it by restoring the main_block.png file back to the original one that came with the default Curve theme. 
It fixed the alignment at the bottom, but messed up the logo area at the top.
I posted a screen capture of this to show what my "test" theme was now showing.

==> I attached this before:   Screen Capture Image of my TEST theme


The reason you don't see this is because for now, I've left the edited version of the main_block.png on the site for public view with the messed up bottom.  I figured I'd rather the top look right vs the bottom while I'm working on this issue.


I've been playing with the test version with everyone's suggestions trying to fix the issue at the top in a way that leaves the main_block.png alone and not edited.
No one sees this testing but me as admin.
I've just been reporting back what the test edits have done - or not done.

Make sense?

I don't know if my edit of the main_block.png file on the site now broke the look of the bottom area because in my edit I broke the transparency (or) it threw the whole alignment at the bottom off because of the new dimensions.

I know all my attempts so far to edit the index.css have failed to fix the logo area at the top.

Hristo

Hi CandC,
Try this:
1st Rename the edited "main_block.png" to let say "main_block_header.png"
2nd Upload the original main_block
3rd Open the index.css, find #header and #header div.frame and rename the file name in to main_block_header.png (or whatever you chose)

Hj Ahmad Rasyid Hj Ismail

I guess you are not really familiar with how to design a new theme since you are yet to become a theme author or creator. That is fine. Everybody begins somewhere.

If you need to test any changes to default theme, make a copy of it. This is done in the theme installation page where you rename a copy of your default curve to a new name like: test123.

That create a board that uses test123 theme. This way, you can always view test123 theme in that board. You now just need to make changes to that theme folder. The folder name is the theme new name i.e. test123.

Normally, I will use firebug to help members to get their site to their desired look. But I cannot do the same to your site since, you didn't give us a chance to do so. So try the method suggested above and create your new test theme. From there, we can try to help you better.

Frankly speaking, it should be easy to change the height.

CandC

Quote from: Hristo on November 21, 2012, 04:58:54 PM
Hi CandC,
Try this:
1st Rename the edited "main_block.png" to let say "main_block_header.png"
2nd Upload the original main_block
3rd Open the index.css, find #header and #header div.frame and rename the file name in to main_block_header.png (or whatever you chose)

BLESS YOU Hristo!
This worked perfectly!  :)

http://www.chopandchat.com/smf

I LOVE this community and their willingness to help those of us who are still learning.
THANK YOU VERY MUCH.

~ ~ ~ ~ ~

And to Ahmad:
I know how to make a copy of the default theme.
I had done that and was experimenting with it, just out the public view as admin.
I appreciate your being willing to help and all the suggestions too.

Advertisement: