Once again: image or banner as background in header or user welcome areas.

Started by Robomcd, May 14, 2016, 04:05:28 PM

Previous topic - Next topic

Robomcd

Not sure about proper names; for me the top header is the shallow top part where on the left is "simple machines" and on the right the navigation.
Lower header is where, after signing in, the username welcome appears on left, on right is the search. 

I am thinking about changing the look of my standard curve theme. Basically, I want to do without those two headers, and have in that area only two images and one name. Images and name to be centered, about 250 pix high. 

Spent more than a day reading solutions and trying things out, but without results. I saw a lot of similar questions, but not a clear usable answer. :-[ OK, I had two grand kids here, so maybe I am not at my best.

I tried two ways
1) delete the top header section complete (no problem), delete the user name and try insert image there.
2) Empty the top section, put the two images and the name there, and delete the section with user welcome, so that section becomes much shallower.

I try to tweak the theme index.template.php and the index.css to work out how to center it and size of areas etc, but I did not manage. I tried it also through the admin interface, also did not work. Before I spend the next few days inventing the wheel again, is there a simple solution for this?










Antechinus

What are you going to do about the unread posts links, and the search? They're handy to have. Do you want them somewhere else?

Robomcd

I am using the ezportal, so it has the login in the left column as well. This is how it looks now

Ideally, the search I would like to push down. Now its floating right top, am looking into floating it right bottom in the same area, or right float it in the bread-crumbs area. Not sure how either would work with the left aligned navigation or bread crumb stuff

I would include a floating-left or align left image 800*108 just above the navigation section, now trying to see if I can get the php coding and css to work for that.   

If people read this post long after the problem has been solved, the forum still shows the standard index page, only without user welcome or log-in and without news items. So a lot of empty space above the navigation bar.

   

Antechinus

Haven't used EZ Portal myself, but does it have a search block like some of the other portals? That'd be the easy way of moving the search out of the header. Just delete it and use a portal block instead.

Robomcd

 :)   :laugh:   :-*   8)

I managed.

Replaced the forum logo in the top section right with the search block

Removed user welcome, news items, and search block from the upper section

Placed an image left-float in the upper section, just above the menu bar.

BUT

Everything functions ok but something is weird.

I inserted the image directly above the "define upper_section toggle" using the code
   
      
Quoteecho '
         <div id="bannerleft">
         <img src="', $settings['images_url'], '/NotW-banner-1080.jpg" alt="wrong picture" />';

// Define the upper_section toggle in JavaScript.

Q1) I added a new id=bannerleft in css (float: left, padding 0 0 10px 16 px). Otherwise the banner sits directly on top of the menu bar and against the side. However, if I make the padding bigger, like 50px bottom, suddenly the whole banner moves up and gets its own section around it, so it now looks if there are two upper sections, one with the banner and one with the menu bar. Or maybe better explanation, the banner pushes the menu bar out of the upper section. How can that happen when I only change the padding?

Q2) The banner does not move into the higher area of the upper section (with the darker gradient color) but pushes it up. How can I limit the size of the upper_section so that the image and the menu bar sit in there comfortably with max 30 pix or so between the top of the image and the top of the upper section? 
 

Antechinus

You don't need to float that div. The image will sit at the left anyway. In fact, you don't even really need a div there. You could get the same result by ditching your new div, and just putting the image straight into the default #upper_section.

Advertisement: