How do I Reduce the Height of This Portion of the Banner?

5 replies
  • WEB DESIGN
  • |
How do I reduce the height of this part of the banner on this Wordpress site?

To reduce the lower part of the banner (that contains the image of the city skyline) I had to enter this into the function.php file:

Code:
define( 'HEADER_IMAGE_HEIGHT', apply_filters( 'twentyeleven_header_image_height', 150 ) );
I highlighted the portion of the header that I'm now trying to reduce (using Firebug), and noticed that the div id above that portion of code is labelled "page."

When I highlight (from within Firebug) the image in the banner that I successfully shortened, the div id is "header-image".

So I tried to put "two and two together", and that that I would enter the following into the functions.php:

Code:
 define( 'PAGE_HEIGHT', apply_filters( 'twentyeleven_page_height', 300 ) );
Unfortunately, nothing happened.

Am I close? I'm trying to make that top part of the banner as small as I can to increase the amount of information a site visitor can see "above the fold."

Obviously, I don't know CSS, but I'm doing my best to figure this out. Any help you can provide is appreciated.

#banner #height #portion #reduce
  • Profile picture of the author Abledragon
    Changing the height and any other styling characteristics should always be done with CSS.

    You've already discovered the div id via Firebug so go to your stylesheet and look for the same div there, it will be described as:

    #header-image

    Then, within the curly brackets - { } - look for the attribute 'height' (no quotes). If it's there adjust its value to the height you want and if it's not there add it like this:

    height: 20px;

    (But specify the height you want - it will be more than 20px!)

    Cheers,

    Martin.
    Signature
    WealthyDragon - Earning My Living Online
    {{ DiscussionBoard.errors[6858680].message }}
    • Profile picture of the author mrniceguy123
      Thanks for taking the time to reply.

      Modifying this section of code modifies the image below the one I want to shrink.

      I want to modify the area above the banner pointed to in the image above; the portion that contains the words.

      I only found the #header-image code in one spot in my stylesheet.

      Below are the contents of my stylesheet.

      Code:
      /*
      Theme Name: BlogoLife
      Theme URI: http://wplook.com/blogolifewpo
      Author: wplook
      Author URI: http://wplook.com/
      Description: BlogoLife is a simple and perfect HTML5&CSS3 theme for personal blogging that supports post formats, and several customization options. The custom background, custom header, and multiple color schemes gives you the possibility to adapt your blog as you wish.
      Version: 2.0
      License: GNU General Public License
      License URI: license.txt
      Tags: black, blue, green, orange, pink, red, white, two-columns, right-sidebar, fixed-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, front-page-post-form, microformats, post-formats, sticky-post, theme-options, threaded-comments, translation-ready, blavatar
      */
      
      /* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
       -------------------------------------------------------------- */
       #header-image a img {margin:0px; padding:0px; height: 50px;}
       
      html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, figure, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
          border: 0;
          font-family: inherit;
          font-size: 100%;
          font-style: inherit;
          font-weight: inherit;
          margin: 0;
          outline: 0;
          padding: 0;
          vertical-align: baseline;
      }
      :focus {/* remember to define focus styles! */
          outline: 0;
      }
      ol, ul {
          list-style: none;
      }
      table {/* tables still need 'cellspacing="0"' in the markup */
          border-collapse: separate;
          border-spacing: 0;
      }
      caption, th, td {
          font-weight: normal;
          text-align: left;
      }
      blockquote:before, blockquote:after, q:before, q:after {
          content: "";
      }
      blockquote, q {
          quotes: "" "";
      }
      a img {
          border: 0;
      }
      a {
          outline:0 none;
      }
      article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
          display: block;
      }
      body {
          font-family: 'Oswald', sans-serif;
      }
      #page {
          border: 1px solid #c5d1d9;
          margin: 20px auto 0 auto;
          width: 960px;
          background: #ffffff; /* Old browsers */
      }
      #branding {
          background: #ffffff url(images/sky.png) top left repeat-x;
          margin-bottom: 5px;
          }
      #branding hgroup {
          margin: 20px 0 20px 15px;
          width: 450px;
      }
      .header-desc {
          width: 468px;
          margin: 25px 20px 10px 0;
          min-height: 60px;
      }
      .header-widget p {
          font-family: Arial, Helvetica, sans-serif;
          font-style: italic;
          font-size: 14px;
          margin: 0px;
      }
      .social-icons img {
          margin: 0 20px 0 0;
      }
      
      /* --- --- [Typography] --- --- */
      h1, h2, h3, h4, h5, h6 {
          color: #666;
      }
      #site-title {
          margin: 0px 0 10px 0;
          text-shadow: 1px 2px 1px #c5d1d9;
          font-size:  30px;
      }
      #site-title a {
          color: #666;
          text-decoration: none;
      }
      #site-description {
          font-size: 15px;
          font-style: italic;
          font-family: Arial, Helvetica, sans-serif;
          font-weight: normal;
      }
      p {
          color: #666;
          line-height: 20px;
          font-family: Arial, Helvetica, sans-serif;
          font-size:  15px;
      }
      a:hover {
          text-decoration: none;
      }
      nav {
          display: block;
          margin: 10px -10px 0 -10px;
          font-size: 14px;
          position: relative;
          padding: 0 30px;
      }
      nav a {
          color: #fff;
          text-decoration: none;
      }
      nav a:hover {
          border-bottom: 1px dashed #fff;
          color: #fff;
      }
      nav ul {
          list-style: none;
          margin: 0px 0px;
          padding: 9px 0 0 0;
          display: inline-block;
      }
      nav ul li {
          float: left;
          position: relative;
          margin: 0 20px 5px 0;
      }
      nav ul ul {
          display: none;
          position: absolute;
          top: 21px;
          left: 0px;
          float: left;
          width: 180px;
          z-index: 99999;
      }
      nav ul ul li {
          min-width: 180px;
          padding: 0px 0 10px 0;
      }
      nav ul ul li a {
          margin: 10px;
      }
      nav ul ul ul {
          left: 100%;
          top: 0;
      }
      nav ul li:hover > ul {
          display: block;
      }
      nav ul li.current_page_item > a, nav ul li.current-menu-ancestor > a, nav ul li.current-menu-item > a, nav ul li.current-menu-parent > a {
          border-bottom: 1px dashed #fff;
          color:#FFF;
      }
      /* --- --- [ nav-below ] --- --- */
      #nav-below {
          margin: 0px 0 20px 0;
          padding: 0px;
      }
      #nav-below a {
          color: #FFF;
          text-decoration: none;
      }
      #nav-below a:hover {
          border-bottom:  1px dashed #fff;
      }
      #nav-below .nav-previous {
          margin-left: 20px;
          padding: 9px 0;
      }
      #nav-below .nav-next {
          margin-right: 10px;
          padding: 9px 0;
      }
      /* --- --- [ Main ] --- --- */
      /* --- [ Right Sidebar ] --- */
      #main {
          border-top: 1px solid #c5d1d9;
          margin-top: -4px;
      }
      
      .right-sidebar #main {
          background: #ffffff url(images/right-sidebar-border.png) top right repeat-y;
      }
      
      .right-sidebar #main {
          background-position: 510px top;
        }
      .right-sidebar #content {
          width: 500px;
          float: left;
          margin: 20px 0 0 -10px;
      }
      
      .right-sidebar #content .col2 {
          width: 453px;
      }
      .right-sidebar #secondary {
          width: 440px;
          float: right;
          margin: 20px -10px 0 0;
      }
      
      /*full wich page and single image*/
      .template-full-widch  #main, .fullimg {
          background: #fff;
      }
      .template-full-widch #content, .right-sidebar .fullimg #content {
          width:950px;
      }
      .template-full-widch .col2, .fullimg .col2 {
          width:903px;
      }
      
      .template-full-widch .depth-2 .col2, .fullimg .depth-2 .col2 {    width: 890px;}
      .template-full-widch .depth-3 .col2, .fullimg .depth-3 .col2 {    width: 880px;}
      .template-full-widch .depth-4 .col2, .fullimg .depth-4 .col2 {    width: 870px;}
      .template-full-widch .depth-5 .col2, .fullimg .depth-5 .col2 {    width: 860px;}
      
      .page-header {
          position: relative;
          margin-bottom: 29px;
      }
      .page-header a {
          text-decoration: none;
          border-bottom: 1px dashed #fff;
          color: #f3f3f3;
      }
      .page-header a:hover {
          text-decoration: none;
          border-bottom: 1px solid #fff;
          color: #fff;
      }
      .page-header h1 {
          color: #fff;
          margin-left: 30px;
          padding: 6px 0 5px 0;
          font-size: 20px;
      }
      .page-header h2 {
          color: #fff;
          margin-left: 30px;
          padding: 6px 0 5px 0;
          font-size: 20px;
      }
      article {
          margin-bottom: 20px;
      }
      .col1 {
          width:  45px;
      }
      .col2 {
          width: 603px;
          border: 1px solid #c5d1d9;
      }
      .postformat {
          position: relative;
          text-align:center;
          padding: 5px 5px 5px 10px;
      }
      .depth-2 .postformat {
          padding: 5px 5px 5px 23px;
      }
      .depth-3 .postformat {
          padding: 5px 5px 5px 33px;
      }
      .depth-4 .postformat {
          padding: 5px 5px 5px 43px;
      }
      .depth-5 .postformat {
          padding: 5px 5px 5px 53px;
      }
      .postformat img {
          border: 1px solid #c5d1d9;
      }
      .format-icon {
          width: 30px;
          height: 30px;
      }
      .format-standard .format-icon {
          background: transparent url(images/format-standard.png) center center no-repeat;
      }
      .format-image .format-icon {
          background: transparent url(images/format-image.png) center center no-repeat;
      }
      .format-video .format-icon {
          background: transparent url(images/format-video.png) center center no-repeat;
      }
      .format-aside .format-icon {
          background: transparent url(images/format-aside.png) center center no-repeat;
      }
      .format-quote .format-icon {
          background: transparent url(images/format-quote.png) center center no-repeat;
      }
      .format-gallery .format-icon {
          background: transparent url(images/format-gallery.png) center center no-repeat;
      }
      .format-link .format-icon, .pingback .format-icon, .trackback .format-icon {
          background: transparent url(images/format-link.png) center center no-repeat;
      }
      .format-audio .format-icon {
          background: transparent url(images/format-audio.png) center center no-repeat;
      }
      .format-status .format-icon {
          background: transparent url(images/format-status.png) center center no-repeat;
      }
      .format-chat .format-icon {
          background: transparent url(images/format-chat.png) center center no-repeat;
      }
      .chat, .chat pre {
          font-family: "Courier New", Courier, monospace;
          font-size: 13px;
          overflow: auto;
      }
      .chat pre strong {
          font-weight: bold;
          color: #000;
      }
      .nr-images {
          width: 300px;
          margin-bottom: 10px;
      }
      .quote blockquote {
          background: #f8f8f8 url(images/q.png) bottom right no-repeat;
          font-size: 19px;
          font-style: italic;
          line-height: 35px;
          padding: 10px 20px 20px 10px;
      }
      blockquote {
          background: #f8f8f8 url(images/q.png) bottom right no-repeat;
          font-size: 19px;
          font-style: italic;
          line-height: 35px;
          padding: 10px 20px 20px 10px;
      }
      .entry-header {
          background: transparent url(images/entry-header.png) top left repeat-x;
          border-bottom:  1px solid #c5d1d9;
      }
      .entry-title {
          font-size:  18px;
          margin: 0 20px;
          padding: 6px 0;
      }
      .entry-title a {
          color: #666;
          text-decoration: none;
          border: 0px;
      }
      .entry-content img {
          max-width:100%
      }
      .entry-content {
          margin: 20px;
          color: #666;
          font-family: Arial, Helvetica, sans-serif;
          font-size:  15px;
          line-height:30px;
      }
      .entry-content p {
          line-height:25px;
          margin-bottom: 10px;
      }
      .entry-content b, .entry-content strong {
          font-weight: bold;
      }
      .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
          font-weight:700;
          margin:10px 0;
      }
      .entry-content h1 {
          font-size:24px;
      }
      .entry-content h2 {
          font-size:22px;
      }
      .entry-content h3 {
          font-size:20px;
      }
      .entry-content h4 {
          font-size:18px;
      }
      .entry-content h5 {
          font-size:16px;
      }
      .entry-content h6 {
          font-size:14px;
      }
      /*list*/
      .entry-content ul, .entry-content ol {
          margin: 0 0 10px 2.5em;
      }
      .entry-content ul {
          list-style: square;
      }
      .entry-content ol {
          list-style-type: decimal;
      }
      .entry-content ol ol {
          list-style: upper-alpha;
      }
      .entry-content ol ol ol {
          list-style: lower-roman;
      }
      .entry-content ol ol ol ol {
          list-style: lower-alpha;
      }
      .entry-contentul ul, .entry-content ol ol, .entry-content ul ol, .entry-content ol ul {
          margin-bottom: 0;
      }
      .entry-content dl {
          margin: 0 10px;
      }
      .entry-content dt {
          font-weight: bold;
      }
      .entry-content dd {
          margin-bottom: 10px;
      }
      /*table*/
      .entry-content table, .comment-content table {
          border-bottom: 1px solid #ddd;
          margin: 0 0 1.625em;
          width: 100%;
      }
      .entry-content th, .comment-content th {
          color: #666;
          font-size: 14px;
          font-weight: 600;
          letter-spacing: 0.1em;
          line-height: 2.6em;
      }
      .entry-content td, .comment-content td {
          border-top: 1px solid #ddd;
          padding: 6px 10px 6px 0;
      }
      .comment-content ul, .comment-content ol {
          margin-bottom: 1.625em;
      }
      .comment-content ul ul, .comment-content ol ol, .comment-content ul ol, .comment-content ol ul {
          margin-bottom: 0;
      }
      /*elements*/
      cite, em, i {
          font-style: italic;
      }
      blockquote em, blockquote i, blockquote cite {
          font-style: normal;
      }
      blockquote cite {
          color: #666;
          font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
          font-weight: 300;
          letter-spacing: 0.05em;
          text-transform: uppercase;
      }
      pre {
          background: #f4f4f4;
          font: 13px "Courier 10 Pitch", Courier, monospace;
          line-height: 1.5;
          margin-bottom: 1.625em;
          overflow: auto;
          padding: 0.75em 1.625em;
      }
      code, kbd {
          font: 13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
      }
      abbr, acronym, dfn {
          border-bottom: 1px dotted #666;
          cursor: help;
      }
      address {
          display: block;
          margin: 0 0 1.625em;
      }
      ins {
          background: #fff9c0;
          text-decoration: none;
      }
      sup, sub {
          font-size: 10px;
          height: 0;
          line-height: 1;
          position: relative;
          vertical-align: baseline;
      }
      sup {
          bottom: 1ex;
      }
      sub {
          top: .5ex;
      }
      /* Forms */
      input[type=text], input[type=password], textarea {
          background: #fafafa;
          -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
          border: 1px solid #ddd;
          color: #888;
      }
      input[type=text]:focus, textarea:focus {
          color: #373737;
      }
      textarea {
          padding-left: 3px;
          width: 98%;
      }
      input[type=text] {
          padding: 3px;
      }
      .comment-content p label {
          margin:10px 0 0 0;
      }
      .entry-meta {
          background: transparent url(images/entry-meta.png) center left repeat-x;
          padding: 9px 20px;
          border-top:  1px solid #c5d1d9;
      }
      .entry-utility {
          margin: 20px 0 0 0;
          font-size: 12px;
          line-height: 15px;
      }
      .entry-utility .category {
          background: transparent url(images/categories.png) left top no-repeat;
          padding: 0 0 0 25px;
          float: left;
          margin: 0 20px 0px 0;
      }
      .entry-utility .tag {
          background: transparent url(images/tag.png) left top no-repeat;
          padding-left: 25px;
          float: left;
      }
      /* --- --- --- [ Images and Galleries ] --- --- --- */
      /* --- --- --- [ Gallery listing ] --- --- --- */
      .format-gallery .size-thumbnail img, .category-gallery .size-thumbnail img {
          border: 1px solid #ced8df;
          margin-bottom: 0;
      }
      .format-gallery .gallery-thumb, .category-gallery .gallery-thumb {
          float: left;
          margin-right: 20px;
          margin-top: -4px;
      }
      .gallery-thumb {width:150px; height:150px;}
      .home #content .format-gallery .entry-utility, .home #content .category-gallery .entry-utility {
          padding-top: 4px;
      }
      /* --- --- --- [ Images ] --- --- --- */
      img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img, .widget-area img {
          max-width: 100%;
          height:auto;
      }
      .alignleft, img.alignleft {
          display: inline;
          float: left;
          margin-right: 20px;
          margin-top: 4px;
      }
      .alignright, img.alignright {
          display: inline;
          float: right;
          margin-left: 20px;
          margin-top: 4px;
      }
      .aligncenter, img.aligncenter {
          clear: both;
          display: block;
          margin-left: auto;
          margin-right: auto;
      }
      img.alignleft, img.alignright, img.aligncenter {
          margin-bottom: 12px;
      }
      .wp-caption {
          border: 1px solid #ced8df;
          background: #F6F6F6;
          line-height: 18px;
          margin-bottom: 20px;
          max-width: 565px !important;
          padding: 0px;
          text-align: center;
      }
      .wp-caption img {
          margin: 5px 3px 0;
      }
      .wp-caption a img {
          width:98%
      }
      .wp-caption p.wp-caption-text {
          color: #888;
          font-size: 12px;
          margin: 3px;
          padding: 0px;
      }
      .wp-smiley {
          margin: 0;
      }
      .gallery {
          margin: 0 auto 18px;
      }
      .gallery .gallery-item {
          float: left;
          margin-top: 0;
          text-align: center;
          width: 33%;
      }
      .gallery-columns-2 .gallery-item {
          width: 50%;
      }
      .gallery-columns-4 .gallery-item {
          width: 25%;
      }
      .gallery img {
          border: 2px solid #ced8df;
      }
      .gallery-columns-2 .attachment-medium {
          max-width: 92%;
          height: auto;
      }
      .gallery-columns-4 .attachment-thumbnail {
          max-width: 84%;
          height: auto;
      }
      .gallery .gallery-caption {
          color: #888;
          font-size: 12px;
          margin: 0 0 12px;
      }
      .gallery dl {
          margin: 0;
      }
      .gallery img {
          border: 10px solid #f1f1f1;
      }
      .gallery br + br {
          display: none;
      }
      /* --- --- --- [ Attachments ] --- --- --- */
      .image-attachment div.attachment {
          background: #f9f9f9;
          border: 1px solid #ced8df;
          border-width: 1px 0;
          margin: 0 -8.9% 1.625em;
          overflow: hidden;
          padding: 1.625em 1.625em 0;
          text-align: center;
      }
      .entry-content .entry-attachment img {
          display: block;
          height: auto;
          margin: 0 auto 1.625em;
          width: 100%;
          height: auto;
      }
      .image-attachment .entry-caption p {
          font-size: 10px;
          letter-spacing: 0.1em;
          line-height: 2.6em;
          margin: 0 0 2.6em;
          text-transform: uppercase;
      }
      .attachment .entry-content .entry-caption {
          font-size: 140%;
          margin-top: 24px;
      }
      .attachment .entry-content .nav-previous a:before {
          content: '2190\00a0';
      }
      .attachment .entry-content .nav-next a:after {
          content: '\00a02192';
      }
      /* --- --- [ meta icons ] --- --- */
      .date-i, .comment-i, .author-i, .edit-i {
          font-size: 11px;
          margin-right:  20px;
          color: #666;
      }
      .date-i {
          background: transparent url(images/date.png) left top no-repeat;
          padding-left: 25px;
      }
      .comment-i {
          background: transparent url(images/comments.png) left top no-repeat;
          padding-left: 25px;
      }
      .author-i {
          background: transparent url(images/author.png) left top no-repeat;
          padding-left: 20px;
      }
      .edit-i {
          background: transparent url(images/edit.png) left top no-repeat;
          padding-left: 20px;
      }
      .edit-i a {
          text-decoration: none;
      }
      .comment-i a, .author-i a, .date-i a {
          color: #666;
          text-decoration: none;
      }
      /* --- --- [ Comments ] --- --- */
      .comment, .pingback, .trackback {
          margin-bottom: 20px;
      }
      .depth-2 .col2 {
          width: 590px;
      }
      .depth-2 .col1 {
          width: 58px;
          background: red;
      }
      .depth-3 .col2 {
          width: 580px;
      }
      .depth-3 .col1 {
          width: 68px;
          background: red;
      }
      .depth-4 .col2 {
          width: 570px;
      }
      .depth-4 .col1 {
          width: 78px;
          background: red;
      }
      .depth-5 .col2 {
          width: 560px;
      }
      .depth-5 .col1 {
          width: 88px;
          background: red;
      }
      #respond form {
          margin-left: 30px;
      }
      .comment-awaiting-moderation {
          font-style: italic;
      }
      /* --- --- --- [ Comments form ] --- --- --- */
      #respond .required {
          color: #ff4b33;
          font-weight: bold;
      }
      #respond label {
          color: #666;
          font-size: 14px;
          font-weight: bold;
      }
      #respond input {
          margin: 0 0 15px;
          width: 98%;
          padding: 5px;
      }
      #respond textarea {
          width: 98%;
      }
      #respond .form-submit {
          margin: 12px 0;
      }
      #respond .form-submit input {
          font-size: 14px;
          width: auto;
      }
      #respond .must-log-in {margin-left:30px;}
      #submit {
          font-family: 'Oswald', sans-serif;
          color: #fff;
          font-size: 10px;
          padding: 2px 10px;
          cursor: pointer;
      }
      #submit:hover {
          border: 1px solid #95a1aa;
          background: #fff url(images/entry-meta.png);
          color: #666;
      }
      .comment-notes {
          margin-bottom: 10px;
          color: #999;
          font-size: 12px;
      }
      .nocomments {
          margin-left: 40px;
          font-size: 12px;
      }
      /* --- --- [ Widget ] --- --- */
      
      aside {
          margin-bottom:  20px;
      }
      .widget-title {
          position: relative;
      }
      .widget-title h3 {
          color: #fff;
          padding: 6px 0 5px 20px;
          font-size: 20px;
      }
      .widget-title h3 a {
          color: #fff;
          border-bottom: 1px dashed #fff;
          text-decoration: none;
      }
      .widget-title h3 a:hover {
          color: #fff;
          border-bottom: 1px solid #fff;
          text-decoration: none;
      }
      aside ul, aside div {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 14px;
      }
      .widget .children {
          margin: 0px 0 0 5px;
          padding: 0px;
      }
      aside h3 {
          font-family: 'Oswald', sans-serif;
      }
      .textwidget {
          margin: 20px 30px 0 10px;
          color: #666;
          line-height: 20px;
      }
      .textwidget p {
          margin: 0px;
          color: #666;
          line-height: 20px;
      }
      #copy {
          width: 950px;
          margin: 0px auto;
          padding:5px;
          border: 1px solid #c5d1d9;
          border-top:none;
          background-color:#FFF;
          font-family: Arial, Helvetica, sans-serif;
          text-align: right;
      }
      #copy p {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 12px;
      }
      .widget ul {
          margin: 20px 30px 0 10px;
      }
      .widget ul li {
          border-bottom: 1px solid #ccc;
          display: block;
          padding: 8px 0;
          color: #666;
      }
      .widget ul .children li {
          border-bottom: none;
      }
      .widget ul li a {
          color: #666;
          text-decoration: none;
      }
      /* --- --- --- [ Recent Comments ] --- --- --- */
      #recentcomments li {
          padding: 8px 0;
      }
      #recentcomments li {
          border-bottom:  1px solid #ccc;
      }
      #recentcomments li a {
          text-decoration: none;
          border: none;
      }
      /* --- --- --- [ Category select ] --- --- --- */
      #cat {
          margin: 10px 0 0 10px;
          width: 250px;
      }
      /* --- --- --- [ Tagcloud ] --- --- --- */
      .tagcloud {
          margin: 10px 30px 0 10px;
      }
      .tagcloud a {
          margin: 5px 10px 5px 0;
      }
      /* --- --- --- [ Calendar ] --- --- --- */
      #calendar_wrap {
          margin: 10px 0 0px 10px;
          color: #666;
      }
      #wp-calendar, #wp-calendar th, #wp-calendar td {
          text-align: center;
          background: none;
          border: none;
      }
      #wp-calendar {
          background: none;
          empty-cells: hide;
          width: 260px;
          font: normal 11px / 200% Verdana, Arial, Helvetica, sans-serif;
      }
      #wp-calendar th {
          font-style: normal;
          font-weight: bold;
          text-transform: capitalize;
          border-bottom: 1px solid #666;
      }
      #wp-calendar td {
          text-align: center;
          background: transparent url(images/entry-meta.png) repeat-x top left;
          padding: 0px;
          border-bottom: 1px solid #ccc;
      }
      #wp-calendar td:hover {
          background-color: red;
      }
      #wp-calendar a {
          text-decoration: none;
          display: block;
          color: #fff;
      }
      #wp-calendar a:hover {
          background: #c5d1d9;
          color: #666;
      }
      #wp-calendar caption {
          font-weight: bold;
          text-align: center;
      }
      #wp-calendar #today {
          background-color: #FFFFFF;
      }
      #wp-calendar caption {
          text-align: center;
          width: 100%;
      }
      #wp-calendar .pad {
          background-color: #fff;
      }
      #wp-calendar #next a {
          padding-right: 10px;
          text-align: right;
          background: #f0f3f5;
          color: #666;
      }
      #wp-calendar #prev a {
          padding-left: 10px;
          text-align: left;
          background: #f0f3f5;
          color: #666;
      }
      #wp-calendar #prev a:hover, #wp-calendar #next a:hover {
          color: #fff;
      }
      #wp-calendar .pad, #wp-calendar .pad:hover {
          background: #fff;
      }
      /* --- --- --- [ search ] --- --- --- */
      #searchform {
          margin: 10px 0 20px 10px;
          height: 27px;
          position: relative;
      }
      #searchform label {
          display: none;
      }
      #searchform #s {
          border: 1px solid #ccc;
          background: none;
          padding: 5px;
      }
      #searchform #searchsubmit {
          font-family: 'Oswald', sans-serif;
          color: #fff;
          padding: 3px 5px;
          cursor: pointer;
      }
      #searchform #searchsubmit:hover {
          border: 1px solid #95a1aa;
          background: #fff url(images/entry-meta.png);
          color: #666;
      }
      /* --- --- [ General settings] --- --- */
      .clear {
          clear: both;
      }
      .fleft {
          float: left;
      }
      .fright {
          float: right;
      }
      .wp-caption {
      }
      .wp-caption-text {
      }
      .sticky {
      }
      .gallery-caption {
      }
      .bypostauthor {
      }
      .alignright {
      }
      .alignleft {
      }
      .aligncenter {
      }
      /* CSS Document, default*/
      /* color red */ /* #b41423 */
      
      a, a:hover, #site-title a:hover, .entry-title a:hover, #recentcomments li a, .widget ul li .rsswidget, .edit-i a, .comment-awaiting-moderation {
          color: #b41423;
      }
      nav, nav ul ul, .postformat, .page-header, .widget-title {
          background: #b41423 url(images/red/line.png) top left repeat-x;
      }
      .left-corner, .right-corner {
          background: transparent url(images/red/corners.png);
      }
      .entry-title a:hover, #copy a:hover, .comment-i a:hover, .author-i a:hover, .date-i a:hover, #recentcomments li:hover {
          border-bottom:  1px dashed #b41423;
      }
      .widget ul li a:hover {
          border-bottom:  1px dashed #b41423;
          color: #b41423;
      }
      #submit, #searchform #searchsubmit {
          background: #b41423 url(images/red/line.png) top left repeat-x;
          border: 1px solid #b41423;
      }
      #wp-calendar a, #wp-calendar #prev a:hover, #wp-calendar #next a:hover {
          background: #b41423 url(images/red/line.png) bottom left repeat-x;
      }
      .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
          color: #b41423;
      }
      /* --- --- [ Corners ] --- --- */
      
      .left-corner {
          position: absolute;
          bottom: -9px;
          left: 0;
          width: 9px;
          height: 9px;
          background-position: 0px 9px;
      }
      .right-corner {
          position: absolute;
          bottom: -9px;
          right: 0;
          width: 9px;
          height: 9px;
          background-position: 9px 9px;
      }
      /* --- --- [ Other from plugins ] --- --- */
      #disqus_thread {width: 600px; float: right;}
      {{ DiscussionBoard.errors[6880353].message }}
  • Profile picture of the author clickbump
    Add this to your CSS:

    Code:
    header#branding{height:70px}
    *You can adjust the height as you need.
    Signature
    {{ DiscussionBoard.errors[6880421].message }}
    • Profile picture of the author mrniceguy123
      Originally Posted by clickbump View Post

      Add this to your CSS:

      Code:
      header#branding{height:70px}
      *You can adjust the height as you need.
      Thanks for the suggestion.

      Unfortunately, adding/modifying the code you suggest shrinks the portion of code that I want to shrink, but it does it by expanding the maroon portion of the banner.

      I want to keep the maroon (menu-containing) portion of the banner at its current size, but make the top portion that contains the words smaller height-wise.

      Thanks again.
      {{ DiscussionBoard.errors[6880518].message }}
  • Profile picture of the author webpeon
    That page is weird.. The red bar isn't actually attached to the nav bar..

    If I was doing it, I would grab the image of the red bar and stamp it on the top of the image with all the buildings, then re-upload it and hide the current red bar.

    You'll then be able to easily adjust the header section using the height css attribute
    Signature
    Web 2 Mobile
    The Future of The Web
    {{ DiscussionBoard.errors[6882382].message }}

Trending Topics