vb.org Archive - Mini Mods - Site Logo Image re-size

Page 1 of 2

Show 40 post(s) from this thread on one page

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vBulletin 5.x Template Modifications (https://vborg.vbsupport.ru/forumdisplay.php?f=259)

- - Mini Mods - Site Logo Image re-size (https://vborg.vbsupport.ru/showthread.php?t=306021)

Spangle

12-17-2013 11:00 PM

Site Logo Image re-size

1 Attachment(s)

The default width for the logo image in VB5 is only 320px, which may suit the VB logo itself, but doesn't help those wanting a bigger logo, the easiest and best way to do this is by altering the css, doing it this way means you don't mess up the rest of the header area.

You only need to complete two edits to one file.

Go to :
AdminCP>Styles and Templates>Style Manager

From the drop down menu select :

Edit Templates>CSS Templates> css_global.css

Find :

Code:

#header .site-logo {

        padding: 22px 10px 26px;

        background:transparent;

        min-width:90px;

        max-width:320px;

        position:relative;

        text-align:{vb:stylevar left};

}

Alter the max-width to the desired width in pixels, up to 720px works fine.

Find : (it should be directly underneath, the above)

Code:

#header .site-logo img {

        height:auto;

        width:auto;

        max-width:320px;

}

Once again edit the part in red to the same figure as the first.

One point to remember is that with the height and width set to "auto" the CSS will make you image "fit" the maximum width set.

Therefore if you plan to use a larger logo, it is best to design the logo to your maximum width, if you use a smaller image, it will appear pixelated when enlarged by the CSS.

ozzy47

12-18-2013 02:43 PM

Why don't you just add that to additional.css that wat it is safe from upgrades, when you have go revert the templates?

Spangle

12-18-2013 04:19 PM

I tried the lower of the two on it's own through the additonal_css but it didn't work, so I went into css_global_css and found the two instances, didn't think to try adding them both to additional and trying it again ! :o

BWalter74

05-31-2014 03:23 AM

How do I get rid of the search bar next to the logo?

https://vborg.vbsupport.ru/external/2014/06/30.jpg

I would like the banner to be the whole width

K4GAP

05-31-2014 07:23 AM

Quote:

Originally Posted by BWalter74 (Post 2500194)

How do I get rid of the search bar next to the logo?

https://vborg.vbsupport.ru/external/2014/06/30.jpg

I would like the banner to be the whole width

Start your own thread and I guarantee you will get better results. Not only that but it's protocol here.

BWalter74

05-31-2014 01:04 PM

Thank you, I will

Spangle

06-01-2014 04:18 PM

Quote:

Originally Posted by BWalter74 (Post 2500237)

Thank you, I will

Theres a fix on VB.com in the tutorials it moves the search bar to the Nav bar

but here it is any way :

Code:

/*Search in Navbar*/

#header { position: relative; }

#header .header-cell { width: 100%; }

#header .toolbar {

    position: absolute;

    {vb:stylevar right}: 0;

    bottom: -29px;

    padding: 0;

    display: block;

    width: auto;

}

If you want to reduce the size of the visible text entry box use this :

Code:

/* reduce search box width from 168px to 120px or any size if you want */

.search-container .search-box .search-term { width: 120px; }

Hope this helps, thanks go to Wayne

Spangle

06-01-2014 04:24 PM

Quote:

Originally Posted by BWalter74 (Post 2500194)

How do I get rid of the search bar next to the logo?

https://vborg.vbsupport.ru/external/2014/06/30.jpg

I would like the banner to be the whole width

The banner and the site logo are two separate images, you can load the banner via the header stylevar in edit templates.

The site logo is added through site builder.

posontyclanole

11-09-2014 01:36 PM

If I put the big logo will be expected to be misconfigured on mobile devices (phones, tablets, etc.)?

meissenation

02-19-2017 04:49 AM

Quote:

Originally Posted by Spangle (Post 2500357)

Theres a fix on VB.com in the tutorials it moves the search bar to the Nav bar

but here it is any way :

Code:

/*Search in Navbar*/

#header { position: relative; }

#header .header-cell { width: 100%; }

#header .toolbar {

    position: absolute;

    {vb:stylevar right}: 0;

    bottom: -29px;

    padding: 0;

    display: block;

    width: auto;

}

If you want to reduce the size of the visible text entry box use this :

Code:

/* reduce search box width from 168px to 120px or any size if you want */

.search-container .search-box .search-term { width: 120px; }

Hope this helps, thanks go to Wayne

thanks for sharing, worked perfectly on 5.2.6

All times are GMT. The time now is 02:29 PM.

Page 1 of 2

Show 40 post(s) from this thread on one page

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01148 seconds Memory Usage 1,740KB 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 (6)bbcode_code_printable (4)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)pagenav (1)pagenav_curpage (1)pagenav_pagelink (1)post_thanks_navbar_search (1)printthread (10)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 pagenav_page pagenav_complete bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: