WordPress.org

Support

Support » Themes and Templates » Montezuma » How do I get my header not to be weird?

How do I get my header not to be weird?

  • I can see that some of my page titles are too long, but even if they were short the white box goes over part of my site name.

    http://health-boundaries.com/

    I’m just SO happy about the page colors that I may be too ecstatic to do more “work” … it doesn’t seem like work when things go well (Thanks to YOU)

Viewing 15 replies - 1 through 15 (of 55 total)
  • I’m not sure why the developer did this, but the logo area (where the site title is) has a margin-left setting of 20px, which pushes it too far to the right.

    To fix, go into layout.css and look for this selector:

    #logo-area {
    	margin-left: 			20px;
    }

    You can either delete the line that says margin-left or set the value to 0px instead of 20px.

    A better solution, since your menu items are so long, would be to move your menu under the site title. Let me know if you want to try that. Then you can learn how to modify the sub templates.

    Yet again…. WOW!!!!

    Yes, that sounds like a good idea. I also couldn’t work out where menu 1 and menu 2 were. The only menu that I’ve seen is the big one that you just helped me move.

    In the Menu work page I tried selecting one, then the other. At one point that one-and-only menu disappeared. But I couldn’t recreate its disappearance later.

    I had thought there were drop down menus.

    Making it easy to find areas of information on my site is challenging.

    On my old site I used my home page to show snippets of the main pages…

    On my old site I used my home page to show snippets of the main pages…

    Are you planning on adding more information at regular intervals? What I would suggest is to convert your pages to blog posts instead, then set your home page to display your blog posts. That way, your visitors will see excerpts from your different blog articles. I took a look at your old site and the home page seems a bit long. You can avoid that, too, by using blog posts, since WordPress will automatically paginate your posts. You can create different categories for your posts, like B12, and Gardening, and Shopping, and create menu items that only display posts tagged with that category. You can tag a particular post with multiple categories, as well.

    Good Morning CrouchingBruin,
    I had such a happy night sleep because of what I was able to do With Your Help. Happiness!!!

    Yes, LONG home page on old site.

    For one thing, I’m thinking I may do three separate sites in WordPress. I couldn’t afford to do web hosting for three when I started.

    But the bulk of the pages relate to B12 and those pages don’t change.

    I’ve been thinking I could use the blog feature to talk about new research.

    Which brings me to a question: is the blog menu a third menu or is it menu 2, or menu 1 in the menu screen. I couldn’t seem to make it go away when I was unchecking first menu 1 then menu 2, which is what made me think it was a third menu. But I might have been unchecking in the wrong way, somehow.

    If I thought of clever enough page titles, I could do the homepage format of listing pages for different aspects. People could then choose from those pages, go to the one most suited to their questions, and see the different pages in the group.

    For Fingernail Lines that will be easy because it’s such a distinct area, and one people often use.

    Maybe I should do that one first… Then I can also learn about doing slideshows…

    ***** Question: can the two, allowed menus be in the right sidebar, or must one be at the top? I need to read all the menu material again. Best I get to it.

    I hope you had a Good night’s sleep with excellent dreams!

    Karen

    By the way, would I put my header image in the logo area by using the same css category as was used for moving the white box?

    I would like my header to have my picture in it, with the Health Boundary words. But that’s maybe not possible since the words are on top of my image rather than a part of it.

    Hi CrouchingBruin ~~~ I just got the whole of my header to be yellow. For a long time I thought it wouldn’t change unless you gave it a “blessing” so to speak. The site code whisperer. But, I stuck with it. I went from source code to Montezuma Options css and tried the word I thought associated with the box in Find until I got a hit in one of the css categories, then I changed the color. Happiness!!!

    So, now all that’s left is getting the picture in there, with words on top of it….

    Congratulations! I’m glad you’re digging into it, that’s really the best way to get comfortable with how to do things.

    As far as getting the image up in the header, it’s quite doable, it just depends on how you want the design to look. You could have the site title like it is on the left and the picture on the right where the menu currently is, and move the menu underneath.

    Or, you could have the picture go across the entire header, with the site title & tag line (What you don’t know …) on top, although the text might blend in too much (especially the blue text); you could put a semi-transparent background to the text, though,

    The file you want to study is the virtual header.php file, located at Appearance > M.O. > Sub Templates. You first want to read about Sub Templates in the Sub Templates section. The main idea is that by using a Sub Template for a page element like the header, for example, you only need to change it in one file to affect how the header looks across the rest of your site.

    The only other thing you have to remember is that the theme is based on a 12 column grid. That allows that theme to be “responsive” (change according to the width of the browser, so that the site is readable on a smartphone or tablet). You’ll see a DIV with a class of row. Each row DIV will contain “column” DIVs that have a class of coln, where n is a number. The column numbers within each row DIV have to add up to 12 in order for the web page to respond properly.

    So at the top of header.php, you’ll see a DIV with the ID of banner, and it has a class of row. Then inside the banner DIV is a logo-area DIV which contains the site title, and it has a class of col5. Also within the banner DIV is the menu, which is created by a call to the wp_nav_menu function. One of the parameters that get passed is container_class, and you can see that one of the values for that parameter is col7. So the banner DIV is constructed correctly because the class of the logo-area (col5) and the class of the menu (col7) add up to 12 (5 + 7).

    If you look at your site, you’ll see that the site title takes up about 5/12 of the space going across, while the menu takes up 7/12. That should clue you in as to how you can change the size of a particular area. If you change the classes of logo-area and the menu to be both col6, you’ll see that they will then take up about half of the header space.

    If you wanted to move the menu to a separate space under the site title, you would create a new row DIV under the banner DIV and move the menu code inside, changing the class of the menu from col7 to col12. Likewise with logo-area, you would change that from col5 to col12.

    Don’t forget to click the Save Changes button at the bottom. If you happen to badly screw up the appearance, you can always revert back to the default settings by clicking on the subtemplate-header button at the bottom. Don’t click the Reset ALL button because that will also revert back all of the CSS changes that you made earlier. In fact, this might be a good time to check out the Export Import section, where you can save your settings to an external file as a backup, in case you do happen to make some unwanted changes and need to get back to some place that you know works.

    Hi CrouchingBruin ~~ That sounds like such a fun challenge!

    As an aside, I used one of those buttons the other day. I thought I just reverted to the immediately previous version. So now I’m afraid of both of them.

    The 12 column thing would be how I’d get the nav to run across the page, right?

    Oh… when the reset button is used, does it undo changes to the setup of material on pages? It seemed like that happened.

    I’m having huge trouble with the pictures on one of my pages. The first pages worked fine, not the second. So I’m needing to read more about alignment.

    I wish I could do the header thing now… Hopefully tomorrow.

    thank you for explaining about the 12 columns, that helps me see how things work, and maybe why my photos didn’t line up…

    Hi CrouchingBruin,
    I’ve finally sorted out my list, table and picture problems.

    For whatever reason I seem to revert my pages without intending to do so. I have to keep reformatting. I think it must happen when I’m trying to figure out where code goes, like when I was trying to make my whole header yellow.

    Rather than continue to recreate my pages, right now I think I’d better do the header, in case I mess up again… so there won’t be a huge number of pages to correct. I’m really unclear on those back-type buttons.

    If I do just one thing at a time I can usually keep it straight in my mind so I’m able to manually put things back, if that would be a better look.

    Funny, I read the template and sub-template pages repeatedly before this thread and your answer, but I just didn’t get it. I’m not saying I totally comprehend it now, but there is an inkling of understanding that was totally missing before.

    Same is true with menus.

    It reminds me of when I taught 6th grade decades ago. One of the boys couldn’t read. On the other hand he had a skill for drawing that included details as if he was on the road to becoming an architect.

    At the time the preferred form of punishment was, “Write I will not…” etc. 100 times. Or more.

    I had opted to have the kids copy from textbooks, instead.

    The boy had a punishment to write the page he wasn’t paying attention to in class, but he accidentally did the next day’s page. Next day, when we were studying that page and the kids were reading the text his turn came up. He looked at the words, which he had copied the day before, and he began to say them, tentatively at first, then with more confidence as he began to cotton on to how reading functions. It was such a high point, and the whole class responded happily to his clear achievement.

    CrouchingBruin ~~~ What I meant is that somehow your explanation gave me a grasp of what I had not been able to “get” on my own. Thank you.

    Please can you help me figure out if I could put my heading picture of the hill on the top left, all the way over to the edge of the page, and place the words Health Boundaries inside the barb wire fence, then have the tag line run underneath the image?

    If the image went across the columns next to the edge of the page and all the way to the menu, then the tag line would fit on one line, right?

    Do you know if the border feature could be used for the header image, so that I could have a midnight blue border?

    I’m asking so many questions because working with the header is scaring me ~~~ there’s no visual box like for creating the text and images on a page.

    http://health-boundaries.com/

    Hi CrouchingBruin
    So, Lady Eagles…

    I can see that you have a much taller header, that you have a footer beneath a widget… in the widget the images are clickable.

    I see that your header menu is 12 columns.

    What a COOL page. I especially love the girls looking dismayed. It’s like they feel for me when WordPress doesn’t do exactly what I’m expecting… LOL. All the images are great.

    What I couldn’t tell from looking at the Source was how you did the header sub-template… I bet it’s there and I missed it.

    Hi, Karen:

    Sorry I haven’t been able to respond sooner. I have this thing called a job that keeps me from doing the things I’d rather be doing, but I’ve managed to squeeze in some time to put together a little mock-up on my sandbox site. Ignore the menu and post content, I was just trying to get the basic header elements to fit right (and I’m still working on the menu positioning).

    I positioned the header based on what I think you wanted. The header image spans across the entire width of the page, and resizes itself according to the browser width. The site title is about in the middle of the first hill, but I haven’t made changes to the media query CSS that repositions the site title on smaller browser sizes, so you may see it jump to a funny position on a smaller width (like a tablet or smart phone). Not sure how big a border you wanted around the image, right now it’s just a narrow 2 pixel-wide border.

    I should be able to work on it a little more later this evening.

    Moderator Andrew Nevins

    @anevins

    Forum moderator

    I have this thing called a job that keeps me from doing the things I’d rather be doing

    Yeah yeah, I’ve heard volunteers say the same thing about sleeping & eating. Excuses, excuses 😉

    Hi CrouchingBruin,
    I was outside transplanting celery, and I finally snapped to what you mean about the Category Menu. I read the Menu material and reread it, but just didn’t see how it worked. Finally I snapped! I wonder if it was the snappy quality of celery that helped me out????

    No, it was your excellent help.

    I have an idea that I have a better understanding of headers, too. I looked at your Lady Eagles for a long time, and the site by the plant loving girl and one with a cloud background. And, by looked at, I mean the source material.

    I’m so excited about looking at SandBox.

Viewing 15 replies - 1 through 15 (of 55 total)
  • The topic ‘How do I get my header not to be weird?’ is closed to new replies.
Skip to toolbar