Announcement

Collapse
No announcement yet.

Edit Header logo size

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Edit Header logo size

    I need to edit the size of the header logo for my site I would like to make it bigger does anyone know if there is a way to edit this in the header template ? or where it can be edited.

  • #2
    I used to do this in the Styles and Templates...look for the Header size then edit it to a larger size. It will be under the HEADER information you see...
    Save the original text before you do this, then play with it until you get what you are looking for. if you run into a problem just paste the original text back in and you will be back to the way it was.
    Here I go again...
    I have 15 Live members on my site...So even if you want to bash me stop in and visit please...
    www.freedomofspeech.cc
    ... Been around for yrs

    Comment


    • #3
      Edit it using site builder and it should take whatever size the logo is, up to the maximum width of 320px.
      MARK.B | vBULLETIN SUPPORT

      TalkNewsUK - My vBulletin 5.6.4 Demo
      AdminAmmo - My Cloud Demo

      Comment


      • #4
        Height and width

        Originally posted by Mark.B View Post
        Edit it using site builder and it should take whatever size the logo is, up to the maximum width of 320px.
        it also has a max width in the templates .. 80 x 320 I wanted a 388 width and 90 height and can not get either at this time.

        Comment


        • #5
          That is a bug, I would advise reporting it in the bug tracker.

          Comment


          • #6
            I think I suggested using the Style and vars editor, I know there you can set it to whatever you want once I made the top banner half page..lol so You can edit the raw code as I mentioned.
            Here I go again...
            I have 15 Live members on my site...So even if you want to bash me stop in and visit please...
            www.freedomofspeech.cc
            ... Been around for yrs

            Comment


            • #7
              I did go in and made size changes but it did not work there are several refrences to the size of the header logo and I do not want to tackle messing with it all , I am not a professional...I believe I reported it as a bug maybe they will change it in an up comming release.

              css_globle.css
              css_responsive.css
              css_sb2.css
              all have refrence to the header logo size.
              such as
              #header .site-logo {
              padding: 22px 10px 26px;
              background:transparent;
              min-width:80px;
              max-width:320px;
              position:relative;
              text-align:{vb:stylevar left};
              }
              #header .site-logo img {
              height:auto;
              width:auto;
              max-width:320px;

              and this
              * header elements: remove edit, resize logo */
              /* Delta: 16 px, 555px here is same as 539px in body width() */
              /*@media only screen and (max-width:440px) {#header .site-logo img{width:170%;}}*/
              @media only screen and (max-width:440px) {
              /* #header .site-logo img{width:80%;} */
              #header .site-logo.header-edit-box{padding-{vb:stylevar left}:8px;padding-{vb:stylevar right}:8px}
              }
              /* @media only screen and (max-width:767px) {.widget-content{font-size:.92em}} */


              /* ==========================================================================
              Header
              ========================================================================== */

              html.touch .edit-switch-container { display: none; }
              html.touch #main-navbar .main-nav { display: none; }
              @media only screen and (max-width:767px) {
              #header .site-logo {padding-{vb:stylevar left}: 20px;}
              /* Bring this under 320px or you get side-scrolling on iPhone portrait mode. */
              #header .header-cell {min-width:300px;}
              .search-container {display: none;}
              }
              @media only screen and (max-width:480px) {
              #vb-page-body .main-header,
              .content-entry-box .content-entry-box-header,
              .view-mode .canvas-layout-container .canvas-widget.profile-settings-widget .widget-header .module-title {
              /* Reduce the font size at narrower screen width */
              font-size: 24px;
              line-height: 24px;
              padding: 5px 0 10px;
              }
              #header .site-logo {
              padding-{vb:stylevar left}: 10px;
              }
              }
              @media only screen and (max-width:320px) {
              #vb-page-body .main-header,
              .content-entry-box .content-entry-box-header,
              .view-mode .canvas-layout-container .canvas-widget.profile-settings-widget .widget-header .module-title {
              font-size: 20px;
              line-height: 20px;
              }
              #header .site-logo {padding-{vb:stylevar left}: 10px;}
              }

              /* ==========================================================================
              Header Logo
              ========================================================================== */
              /**
              * In a change from the way we've been doing responsive, for the logo image,
              * we're going to try to constrain its _height_, based on the height of
              * the viewport. */
              #header .site-logo img {
              /* Let's just cap the max logo image height in all cases. */
              /* max-height: 100px; */
              }
              And there is more,

              Last edited by WhiskeyOSS; Tue 25 Dec '12, 6:24pm.

              Comment


              • #8
                May I make a suggestion?
                I assume you are familiar with Dreamweaver (I think you can still use it free for 30 days)
                or some sort of website building software...
                The way I would accomplish the edit of headers and footers is not too complicated I will explain here...as far as I can remember...If I am incorrect in all details I am sure a Genius in here will be glad to point it out and help us both...lol

                I would go where you were in the styles and copy the code.
                In Dreamweaver or any website design program, like front page there are a few out there, I would paste this information in there...In fact I would often times open the bulletin board up in IE or Firefox and then click on view source code...
                Past it into your program and you will see all kinds of crazy stuff...

                One thing you will see is the way your header information is displayed...You can also see code view or web page view this is the area you are looking for as you can then manipulate things and see the code changing or vice versa...

                Or copy your header information as discussed previously, then you can manipulate the varibles looking at immediate results. once you get them so when the web page is loaded the sizing looks correct, and you like it copy and then paste that code into your editor in the CP...
                save then view.

                I am sure there are better ways but since I dont speak Squirrel, html or any cms things like that it always seemed to work.
                I am like you have no scripting skills at all...but I always some how managed to get through.

                - - - Updated - - -

                Here is an example...
                Firefox Right click on actual web page then select View page source...
                this is what I get at my nothing going onb site...with a single member ME..lol


                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                <title>Coming Soon - Future home of something quite cool</title> <link href="http://p3nlhclust404.shr.prod.phx3.secureserver.net/SharedContent/404-etc-styles.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div class="body-coming-soon"> <h1> <span>Future home of something quite cool</span> </h1> <div class="info-container"> <div class="inner-border clear-fix"> <h3 class="coming-soon-owner"> If you're the <strong>site owner</strong>, <a href="https://hostingmanager.secureserver.net">log in</a> to launch this site. </h3> <h3 class="coming-soon-visitor"> If you are a <strong>visitor</strong>, please check back soon. </h3> </div> </div> </div> </body> </html>

                when pasted into the site building software you will be able to then size your logo and then save code...

                - - - Updated - - -

                Ok it did not keep format as page is displayed you try it and you will see what I mean
                It just block styled the entire thing...

                - - - Updated - - -

                Selecting the header information only is not difficult you jst look for the same code...if you try it you will understand what I mean...

                - - - Updated - - -

                wow that is some rough advice...lol
                I had attempted editing the header in html code...but am lost in it...
                the easiest way was to copy code
                paste into web site design software then view web page as web page not source...you will have boxes with catch edges on them so you can change the size location delete pictures and add more in and so on...
                Note if you were changing pictures you must have image loaded to web folder and remember to point to it..thats why I used dream weaver it copies your entire ftp website into local folders then when you change things you can have it auto upload into proper file location on server so then when you go back everything is perfect...
                Last edited by Inspector G; Tue 25 Dec '12, 7:18pm.
                Here I go again...
                I have 15 Live members on my site...So even if you want to bash me stop in and visit please...
                www.freedomofspeech.cc
                ... Been around for yrs

                Comment


                • #9
                  I will add...
                  I had become so angry at VBull...
                  I even used the method above to remove all comments and VBULL embedding...
                  did not really want to say that but my point was that as long as you edit it they way described above I was able to do anything I wanted to header body and footers...
                  Here I go again...
                  I have 15 Live members on my site...So even if you want to bash me stop in and visit please...
                  www.freedomofspeech.cc
                  ... Been around for yrs

                  Comment

                  Related Topics

                  Collapse

                  Working...
                  X