Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
Like Tree1Likes
  • 1 Post By Heypressto

Thread: How to change header banner in css

  1. #1
    Junior Member
    Join Date
    Feb 2014
    Posts
    4
    Member #
    38517
    Liked
    1 times

    How to change header banner in css

    Hello,

    Please could anyone tell me how to change the header in my client's site flyclopsfilming.com from a background with font to an image of the logo? Where do I insert the image and what do I need to comment out?

    Any assistance would be appreciated.

    /* HEADER
    ----------------------------------------------- */
    .site-header {
    padding: 20px 0 0;
    background: #16171b;
    }
    .site-branding {
    float: left;
    }
    .site-title {
    margin: 0;
    font-size: 4.25em;
    font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    line-height: 1;
    }
    .site-title a {
    color: #fff;
    text-decoration: none;
    }
    .site-description {
    color: #999;
    font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    }

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Just curious? What services do you offer that your "client" has asked you to do this and you do not know how?

    Within the header tag you have the clearfix container div. inside there you have the site branding div. that holds the "Flyclops Filming" and the "aerial filming and photography" text. To change the larger text you will use the H1 div with the class "site-title", the other text is found inside the div with the "site-description" class.

    If you just wish to add to what is already there you can add it to the inside of the div class="site-branding"


    Sent from my iPhone using Tapatalk

  4. #3
    Junior Member
    Join Date
    Feb 2014
    Posts
    4
    Member #
    38517
    Liked
    1 times
    Quote Originally Posted by Vapr_Arts View Post
    Just curious? What services do you offer that your "client" has asked you to do this and you do not know how?

    Within the header tag you have the clearfix container div. inside there you have the site branding div. that holds the "Flyclops Filming" and the "aerial filming and photography" text. To change the larger text you will use the H1 div with the class "site-title", the other text is found inside the div with the "site-description" class.

    If you just wish to add to what is already there you can add it to the inside of the div class="site-branding"


    Sent from my iPhone using Tapatalk
    Hi Vapr_Arts,

    Thank you for your reply. As a writer and photographer I specialise in providing content. However, I have put together customised websites for over 30 clients using Xoops CMS and made all updates for them. On this occasion the client wants to be able to add the site himself so this is my first foray in Wordpress. Most Wordpress theme banners can be changed using the header or theme files but that is not the case with the Hiero theme I am using. Hence my joining this website hoping to prevail upon the kind assistance of proper web designers such as yourself.

    The H1 code appears in a different part of the CSS file to the code above:

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
    margin: 1.25em 0 .5em;
    color: #222;
    font-weight: 700;
    font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    }
    h1 {
    font-size: 16px;
    font-size: 1.6rem;
    }
    h2 {
    font-size: 14px;
    font-size: 1.4rem;
    }
    h3 {
    font-size: 13px;
    font-size: 1.3rem;
    }
    h4 {
    font-size: 12px;
    font-size: 1.2rem;
    }
    h5 {
    font-size: 11px;
    font-size: 1.1rem;
    }
    h6 {
    font-size: 10px;
    font-size: 1rem;
    }

    So do I just replace
    h1 {
    font-size: 16px;
    font-size: 1.6rem;
    }
    with

    h1 {
    background-image: url(http://flyclopsfilming.com/images/lheaderlogo.jpg)
    }

    Your help is appreciated.

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    It's not going to be the h1. I don't have access to the site from where I am, but it's likely one of the parent elements.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Post link so we can see the code -

    I think you'll probably find that there is a class called "site-branding" or something similar - most of the free themes have something like that. That would be where you'd put the image in the CSS, as the background, and you'd also have to remove the Text and tagline.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  7. #6
    Junior Member
    Join Date
    Feb 2014
    Posts
    4
    Member #
    38517
    Liked
    1 times
    Thank Ronald Roe and Alpha Mare,

    The url is Flyclops Filming - Aerial Filming and Photography

    "site-branding" appears here:

    /* HEADER
    ----------------------------------------------- */
    .site-header {
    padding: 20px 0 0;
    background: #16171b;
    }
    .site-branding {
    float: left;
    }
    .site-title {
    margin: 0;
    font-size: 4.25em;
    font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    line-height: 1;
    }
    .site-title a {
    color: #fff;
    text-decoration: none;
    }
    .site-description {
    color: #999;
    font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    }

    Please could you tell me where to put the url and what to delete?

  8. #7
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    You are only showing the CSS which in this case is not the code you want to see..

    When i went thru your site i found that the "site-branding" contained a <h1class="site-title">Flyclops Filming</h1> as well as a <div class="site-description">aerial filming and photography</div>

    That is part of your HTML document not your CSS. This is also what you would comment out if you were wanting to remove that, and you can add your own branding to the "site-branding" div


    Sent from my iPhone using Tapatalk

  9. #8
    WDF Staff AlphaMare's Avatar
    Join Date
    Oct 2009
    Location
    Montreal, Canada
    Posts
    4,570
    Member #
    20277
    Liked
    878 times
    Quote Originally Posted by Vapr_Arts View Post
    You are only showing the CSS which in this case is not the code you want to see..

    When i went thru your site i found that the "site-branding" contained a <h1class="site-title">Flyclops Filming</h1> as well as a <div class="site-description">aerial filming and photography</div>

    That is part of your HTML document not your CSS. This is also what you would comment out if you were wanting to remove that, and you can add your own branding to the "site-branding" div
    Actually, in order to comment out the HTML in a WordPress theme, he'd have to do it in one of the PHP files, since the HTML in WP is generated by PHP.
    An easier way to do it would be to just remove the title and tagline from the site, using the "Customize" option under "Themes" in the dashboard.
    Then add your logo as a background in the CSS.

    I have edited it like this in Chrome and it worked:
    Code:
    .site-branding h1 {
    background: url("../logo.jpg") no-repeat;
    }
    Last edited by AlphaMare; Feb 21st, 2014 at 11:48 AM.
    Good design should never say "Look at me!"
    It should say "Look at this." ~ David Craib


    http://digitalinsite.ca ~ my current site . . info@digitalinsite.ca ~ my email

    If you feel that someone's post helped you fix your problem, answered your question, or just made you feel better, feel free to "Like" their post. The "Like" link is at the bottom right of each post, along side the "reply" link. And if you are being helped here, try to help someone else - pass it on!

  10. #9
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Quote Originally Posted by AlphaMare View Post
    Actually, in order to comment out the HTML in a WordPress theme, he'd have to do it in one of the PHP files, since the HTML in WP is generated by PHP.
    An easier way to do it would be to add visibility:hidden; to the site-title and site-description classes in the CSS

    I have edited it like this in Chrome and it worked:
    Code:
    .site-branding h1 {
    background: url("../logo.jpg") no-repeat;
    }
    
    .site-title {
    visibililty:hidden;
    }
    
    .site-description {
    visibililty:hidden;
    }
    Did not consider it being in Wordpress there would be a difference. I was able to see it as an HTML and just went from there, makes a lil more sense now that i think about how it was structured..


    Sent from my iPhone using Tapatalk

  11. #10
    Junior Member
    Join Date
    Feb 2014
    Posts
    4
    Member #
    38517
    Liked
    1 times
    Quote Originally Posted by Vapr_Arts View Post
    Did not consider it being in Wordpress there would be a difference. I was able to see it as an HTML and just went from there, makes a lil more sense now that i think about how it was structured..


    Sent from my iPhone using Tapatalk
    Thank you Vapr-Arts and AlphaMare, I've been trying various things with the code you kindly provided.

    I cannot find ".site-branding h1" in the css. There's ".site-branding" under HEADER and code for h1 in:

    /* HEADER
    ----------------------------------------------- */
    .site-header {
    padding: 20px 0 0;
    background: #16171b;
    }
    .site-branding {
    float: left;
    }

    .site-title {
    margin: 0;
    font-size: 4.25em;
    font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    line-height: 1;
    }
    .site-title a {
    color: #fff;
    text-decoration: none;
    }
    .site-description {
    color: #999;
    font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    }

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
    margin: 1.25em 0 .5em;
    color: #222;
    font-weight: 700;
    font-family: "Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    }
    h1 {
    font-size: 16px;
    font-size: 1.6rem;
    }
    h2 {
    font-size: 14px;
    font-size: 1.4rem;
    }


    etc,

    So far I managed to hide the the site title and description but not get the logo image to appear. I would be most grateful if you could suggest what code I replace with what. Your patience is appreciated.
    megatype likes this.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:40 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com