Adding Text to header question

[Hawk7173]

I need to add some text to the header to the right of the forum logo which is aligned at the left.

Please advise!

[Lynne]

Have you considered adding it via the Ad Manager?

[Hawk7173]

Will that put it in the header rather than below the header?

--------------- Added 1437442625 at 1437442625 ---------------

Found out that ad manager works, but in the other styles even if I change to logo to the new one, the logo goes in the top center and then the text (image) ad goes to the left and below the logo. If I remove the text (image) that is supposed to be in the center, the logo still remains in the center. Ultimately, What I am trying to accomplish is the logo to the left, an image containing text for the title in the center and then another text in image at the right. It all works on the new style that I have been working on, but screws up the other style headers.

www.m14br.com if you want to take a looksee. The new style I'm working on is green light. I had to disable the ads in the header until this is all sorted out.

I won't mind if I need to pay someone for the few minutes it will take them to fix this, but, I've been on this on and off for three days with no joy.

[Lynne]

Can you give us an image of what you want it to look like and then can you add in the text/image into some test style and then we can try to come up with some CSS to put things in their place.

[Hawk7173]

Here's what I want the end result to be give or take. I can do it with one style (green light), but when I go to the Team M14 Green style, it messes everything up. The left logo appears at the top in the center and the other two are at the bottom of the header. Ultimately, I would like to be able to do it with the logo as an image and the text as text rather than another two images. I would prefer it to be on all styles or if it can be done, the green light style and the other styles as they are with the other banner. Hope I'm not making this more confusing.....

https://vborg.vbsupport.ru/external/2015/07/6.png

--------------- Added 1437500924 at 1437500924 ---------------

This is what happens when I go to the team m14 green style

https://vborg.vbsupport.ru/external/2015/07/7.png

[Lynne]

We can't really help with CSS issues unless we can view the problem in the browser. (Your M14 Green Style looks fine on your site right now.)

[Hawk7173]

I've put the messed up header back together so that you can see the code. Please advise as soon as you can so that I can clean it back up, even if it's not what I want, in order to allow you time to fix/create code for it.

Thank you very much.

--------------- Added 1437512634 at 1437512634 ---------------

The only style that shows correctly, is the greenlight style. The mobile style has a different logo.

[Seven Skins]

This corrects the error in FireBug

.logo-image { float: left !important; }

[Hawk7173]

That should be in additional .css???

[Seven Skins]

yes

[Lynne]

It looks like Seven Skins was correct. :)

[Hawk7173]

It worked. In fact, for some reason in the additional .css template, it had float no. After the change it fixed the images problem. I'd like to replace the images with text so it is faster loading and doesn't take as much space in the header.

I'm assuming that I can just use the html for the text in the ad spots in place of the images.

[Hawk7173]

I looked at my forum on a 10" tablet and the header is all messed up like before. How do I float the entire header or forum width so that no matter what size screen the forum shows as it should?

[Skyrider]

You could try checking out:

http://www.vbulletin.com/forum/forum/vbulletin-4/vbulletin-4-questions-problems-and-troubleshooting/419347-header-size-issues

Altering the style to fluid rather than fixed makes it stretchable based on browser window size. I have no experience with this as I barely touch these fixed/fluid options. Not sure if it is the answer for you but you could give it a try.

I do believe that the:

doc_MaxWidth and doc_Width under Styles & Templates -> Style Manager -> "YOUR STYLE" -> Style Variable Editor should be set to auto for fluid.

[Seven Skins]

You need use "max-width: 100%" for your header images and they will get resized on smaller screen.

[Hawk7173]

Thanks for the replies.

You need use "max-width: 100%" for your header images and they will get resized on smaller screen.

Is this in additional .css or in stylevars?

If in additional .css what would the code be?

[Seven Skins]

Add this to additional.css

.logo-image, .ad_global_header1 img {
Max-width: 100% !important;
height: auto !important;
}

[Hawk7173]

I've added that to all styles. In testing it on my cell phone, it doesn't change anything. the images are still stacked vertically.

Tested in going from mobile style to full site.

--------------- Added 1437687460 at 1437687460 ---------------

I saw you posted the below code for someone with a similar problem, but I don't know if any of it would help in my situation.

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}

[notrious]

If you aren't much into coding just make a new banner with fixed width logo on right side and text on left ...

[Hawk7173]

I can make a single image to cover the entire header width, but that I fear won't be cell phone friendly. I've been looking into how to make the entire forum width to 100% or fluid whichever is better, but am not having very good luck with search results.

--------------- Added 1437696064 at 1437696064 ---------------

I've created a single image containing everything I wanted in the header. It solved the initial problem, but created another in that now the mobile style doesn't act accordingly. Looks ok when my 4g phone is vertical, but when I turn it horizontal to widen the screen, it has a large blank space to the left of everything except for the mobile logo

--------------- Added 1437697036 at 1437697036 ---------------

Below is what I have in .css

.logo-image { float: left !important; }

.logo-image, .ad_global_header1 img {
Max-width: 100% !important;
height: auto !important;
}

body {
margin: 0 auto;
max-width: 100%;
min-width: 100%;
width: auto;
}

[Hawk7173]

How would that be written for the additional .css?

.logo-image, {
Max-width: 100% !important;
height: auto !important;
}

--------------- Added 1437785181 at 1437785181 ---------------

I have reduced the three images to one..... What would be the best size to make the image itself?

[Seven Skins]

One large image is not suitable for header as we don't know what screen resolution a user is using whilst browsing a site.

At the moment you have horizontal scroll bar at your site even at 1920 px resolution. That is due to large image and some html tabs not closed properly.

---

Best solution I think is ..

- Make two images
- Float one image to left
- Other image to right
And use media queries to resize them according to browser size.

[Hawk7173]

I will certainly do that. I do have a couple of questions and sorry for all of the ????s

How do I discern which image is which as far as writing the .css?

How do I write the media .css?

I'm feeling dumber and dumber as we go....LOL

[Seven Skins]

I will see if I can hack something out for you tomorrow.

[Hawk7173]

I do appreciate all of the help. The other thing I don't know how to do is to add additional images or text to the header.

[CAG CheechDogg]

My Man do this ...



Leave your logo at a size of about 315x125 ... use this for your logo ... its hosted on my site for now , just right click and save it and then add it as your logo ...

https://www.cagclan.com/teamm14/m14brforums-logo.png


in your additional.css template add this:

.above_body {
background: #406754 url("https://www.cagclan.com/teamm14/m14brforums-header.png") repeat-x scroll 0 0;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin: 0 0 10px;
padding: 0;
}

The header is also hosted on my site, right click it and save:
https://www.cagclan.com/teamm14/m14brforums-header.png

That will allow you to add an image how ever you like it to your header ... you can modify it using photoshop to your liking ...

--------------- Added 1437980950 at 1437980950 ---------------

This is how it looks with the images added....

https://vborg.vbsupport.ru/external/2015/07/3.jpg

[Hawk7173]

Thanks for your suggestions. Seven Skins is working something up for me at the moment as well as working on another issue of mine.