vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)
-   -   Adding Text to header question (https://vborg.vbsupport.ru/showthread.php?t=319565)

Hawk7173 07-20-2015 12:35 AM
Adding Text to header question
 
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 07-20-2015 03:12 PM
Have you considered adding it via the Ad Manager?

Hawk7173 07-20-2015 06:51 PM
Will that put it in the header rather than below the header?

--------------- Added [DATE]1437442625[/DATE] at [TIME]1437442625[/TIME] ---------------

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 07-21-2015 03:00 PM
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 07-21-2015 03:38 PM
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 [DATE]1437500924[/DATE] at [TIME]1437500924[/TIME] ---------------

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

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

Lynne 07-21-2015 04:39 PM
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 07-21-2015 07:02 PM
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 [DATE]1437512634[/DATE] at [TIME]1437512634[/TIME] ---------------

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

Seven Skins 07-21-2015 07:57 PM
This corrects the error in FireBug

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

Hawk7173 07-21-2015 08:09 PM
That should be in additional .css???

Seven Skins 07-21-2015 08:25 PM
yes

Lynne 07-21-2015 09:56 PM
It looks like Seven Skins was correct. :)

Hawk7173 07-21-2015 10:35 PM
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 07-23-2015 02:39 AM
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 07-23-2015 05:37 AM
You could try checking out:

http://www.vbulletin.com/forum/forum...er-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 07-23-2015 07:28 AM
You need use "max-width: 100%" for your header images and they will get resized on smaller screen.

Hawk7173 07-23-2015 02:44 PM
Thanks for the replies.

Quote:
Originally Posted by Seven Skins (Post 2551134)
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 07-23-2015 04:46 PM
Add this to additional.css

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

Hawk7173 07-23-2015 07:30 PM
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 [DATE]1437687460[/DATE] at [TIME]1437687460[/TIME] ---------------

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.

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

notrious 07-23-2015 07:47 PM
If you aren't much into coding just make a new banner with fixed width logo on right side and text on left ...

Hawk7173 07-23-2015 08:56 PM
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 [DATE]1437696064[/DATE] at [TIME]1437696064[/TIME] ---------------

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 [DATE]1437697036[/DATE] at [TIME]1437697036[/TIME] ---------------

Below is what I have in .css

Code:
.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 07-24-2015 10:45 PM
How would that be written for the additional .css?

Code:
.logo-image, {
  Max-width: 100% !important;
  height: auto !important;
}
--------------- Added [DATE]1437785181[/DATE] at [TIME]1437785181[/TIME] ---------------

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

Seven Skins 07-25-2015 10:03 AM
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 07-25-2015 06:53 PM
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 07-26-2015 08:57 PM
I will see if I can hack something out for you tomorrow.

Hawk7173 07-26-2015 10:01 PM
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 07-27-2015 05:05 AM
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:

Code:
.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 [DATE]1437980950[/DATE] at [TIME]1437980950[/TIME] ---------------

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

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

Hawk7173 07-27-2015 06:12 PM
Thanks for your suggestions. Seven Skins is working something up for me at the moment as well as working on another issue of mine.


All times are GMT. The time now is 07:13 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01158 seconds
  • Memory Usage 1,797KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (4)bbcode_code_printable
  • (2)bbcode_html_printable
  • (1)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (27)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete