WordPress.org

Ready to get started?Download WordPress

Forums

Montezuma
How do I get my header not to be weird? (56 posts)

  1. ConsiderThis1
    Member
    Posted 6 months ago #

    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)

  2. CrouchingBruin
    Member
    Posted 6 months ago #

    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.

  3. ConsiderThis1
    Member
    Posted 6 months ago #

    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...

  4. CrouchingBruin
    Member
    Posted 6 months ago #

    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.

  5. ConsiderThis1
    Member
    Posted 6 months ago #

    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

  6. ConsiderThis1
    Member
    Posted 6 months ago #

    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.

  7. ConsiderThis1
    Member
    Posted 6 months ago #

    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....

  8. CrouchingBruin
    Member
    Posted 6 months ago #

    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.

  9. ConsiderThis1
    Member
    Posted 6 months ago #

    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...

  10. ConsiderThis1
    Member
    Posted 6 months ago #

    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.

  11. ConsiderThis1
    Member
    Posted 6 months ago #

    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.

  12. ConsiderThis1
    Member
    Posted 6 months ago #

    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/

  13. ConsiderThis1
    Member
    Posted 6 months ago #

    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.

  14. CrouchingBruin
    Member
    Posted 6 months ago #

    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.

  15. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 6 months ago #

    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 ;)

  16. ConsiderThis1
    Member
    Posted 6 months ago #

    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.

  17. ConsiderThis1
    Member
    Posted 6 months ago #

    OMG, so that makes a lot of things clearer. LadyEagles has to have a high (top to bottom) header so it will be responsive...

    I was going to ask you how to get the blue background you have... I checked the color code so I know where you put the color in. What I wonder is how you delineated the place for the color to go.

    In Sandbox the words of my site name aren't responsive. I had been wondering about that. Often when there's text and an image, scaling the image doesn't result in readable text.

    In all the sites I checked, I couldn't find "subtemplate" in the source code. I put "sub" in the Find box, because I wasn't sure it would be sub-template, sub template, or subtemplate.

    Nothing came up. So, I don't quite get the process yet.

  18. ConsiderThis1
    Member
    Posted 6 months ago #

    What baffles me is how the word, color, doesn't appear. I thought that the #33f was the blue color, but when I put it into my color thing, it showed as red... So I am clueless how you got the blue border to appear.

    Now I have to go back and use Find to see if you used the word, "smooth" which I came to believe was how people got a flat menu...

  19. ConsiderThis1
    Member
    Posted 6 months ago #

    By the way, not to worry if you have no more time for this. I can do another reread, and a lot more thinking.

    I very much appreciate your help, and don't want to wear you out.

    :-)

  20. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin,
    I just do not see things completely. You addressed the Title not being set to adjust.

    When I tried changing my code I got the menu to go wider, but the picture disappeared. I couldn't get the menu to be on one line, which I had thought it would do once I added "smooth".

    *** In my sub template header php the words are very different from those in the source material for Sand Box... Sandbox looks like the source for Lady Eagles. I tried finding a plugin that would produce a similar kind of coding, but ... so far no luck

  21. CrouchingBruin
    Member
    Posted 6 months ago #

    In my sub template header php the words are very different from those in the source material for Sand Box.

    The reason is that the PHP code that's contained in the subtemplates are not going to show up when you view the source code. The PHP code is executed on the server (where your web site is hosted), and the results of that execution is then sent along to your browser. So anything that you see enclosed by <?php some PHP code ?> will not be seen when you look at the web page source.

    I've copied the contents of my header.php, so you can take a look: http://pastebin.com/88CR8KSV

  22. ConsiderThis1
    Member
    Posted 6 months ago #

    OH!!!! that makes sense. But then, how does source code help me in those instances? is there wording which indicated what the underlying code is?

  23. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin,
    I;m back from switching to backup batteries now that the sun is low and my solar needs to use the energy I stored over the day.

    Although I feel lost, re php, right now, I'm a lot more familiar with how the css and templates work than I was just a few days ago.

    For my header, my art work is juvenile. I'm not much of an artist. But the image conveys the idea. I think the image is better smaller, that's why I wanted to get a background for it like the background you used for your slideshow on LadyEagles....

    Thank YOU so much for your help. I hope you have a lovely evening, with enjoyment that takes you away from the work of answering website puzzles.

    :-)

    Karen

  24. ConsiderThis1
    Member
    Posted 6 months ago #

    By the way, that's a Brilliant suggestion about how to use the Categories menu.

    Thank you. (I'm not sure which thread that suggestion was in)

  25. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin,
    I hope you had a superb day!

    I recreated several more pages. That's getting a lot easier as I become more familiar with how Montezuma and WP work.

    I thought I could recreate my header image from Sandbox into a portion of my banner area, but the attempts I made were not successful.

    Yesterday I was able to turn a portion of the banner area into the dark blue I thought I wanted to run across the entire page, and it was a disappointing look.

    Now I'm thinking the image with words and border that you put into Sandbox would be good if they were about 7 or 8 columns. I'm still a little unclear on columns since there appears to be a 1 column margin on either side of the banner...

    On the other hand, as I look at the "unadorned" version with just my site name, I wonder if the image and words that you put together would be good in that much smaller area.

    I can't work out how to manipulate it. If I could, I could see how it looks.

  26. ConsiderThis1
    Member
    Posted 6 months ago #

    Well, I'm getting closer:

    <div id="logo-area" class="col5">
              	<a href="<?php echo get_option('home'); ?>/"><img src="http://health-boundaries.com/wp-content/uploads/2013/09/NowWordPressScaled.jpg"/></a>
    			<<?php bfa_if_front_else( 'h1', 'h3' ); ?> id="sitetitle">
    				<a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a>
    			</<?php bfa_if_front_else( 'h1', 'h3' ); ?>>
    			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
    		</div>
  27. ConsiderThis1
    Member
    Posted 6 months ago #

    This didn't improve it much

    <div id="logo-area" class="col5">
              	<a href="<?php echo get_option('home'); ?>/"><img src="http://health-boundaries.com/wp-content/uploads/2013/09/NowWordPressScaled.jpg"/></a>
    			<p id="tagline"><?php bloginfo( 'description' ); ?></p>
    		</div>
  28. ConsiderThis1
    Member
    Posted 6 months ago #

    By changing it to 7 columns and 5 for the menu it looks better, but it's still squashed up against the top.

    I'm going to try to make the font for the words smaller, which hopefully will increase the size of the picture, top to bottom.

  29. ConsiderThis1
    Member
    Posted 6 months ago #

    Okay, I can't be sure because I don't remember well...
    but it seems as if by changing my header file in SubTemplates, that it changed my css file for layout...

    Is that how it works?

    Please can you help me get the tag line into a smaller font?
    and a space above the logo????

  30. ConsiderThis1
    Member
    Posted 6 months ago #

    Hi CrouchingBruin,
    And not to worry if you're enjoying Saturday away from confused members of the forum...

    I've figured out why my image was squashed, when yours was not ~ basic difference in image files used... But, I cannot seem to get the image that I scaled by 20% to show up, or, it's showing up but the scaling isn't enough to make a difference in how it looks. Maybe if I reduce only the up/down size... that may be the trick.

    I cannot get a border around my image like the blue border you have around the image in Sandbox... I did get a margin. But I was trying to move the logo image to be over the white area where text goes...

    I got my menu to be like the one in Sandbox... and I even got it above the breadcrumbs... but so far I haven't been able to reduce the up and down size of everything above the menu.

    By the way, is there any place that I can find the original php?

    I was doing really well at changing one thing, viewing, then changing back... then something happened and while there was no visible change to my page, I wanted to put back the original php only I lost track of where I was....

    These are my present questions and challenges:

    How do I get a border like the one you used in Sandbox?
    How do I get the logo over the white text box?
    How do I change the menu lettering to be darker?

Reply »

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.