• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Need help with Scribble header and image border css

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Need help with Scribble header and image border css

This topic is: not resolved

Tagged: css, header, image border, scribble

  • This topic has 5 replies, 2 voices, and was last updated 10 years, 2 months ago by SoZo.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 25, 2013 at 2:55 pm #14763
    djw2
    Member

    I have modified Scribble a bit and am now having trouble making the header work.

    http://darlingchampagne.com/

    I had a nice graphical header designed, but it won't work with the responsive design, it just disappears when screen is reduced. So I just made the header area to be a darker red and the header text font white. (after trying to use Nick the Geek's responsive header plugin which I couldn't get to work properly for some reason).

    Still the header won't work. I have done every conceivable thing I can think of with the css and I just need someone with more css skill and fresh eyes to look at it for me.

    With a cell phone you can see how strange it appears.

    Here is the css I have for the header.

     

    /* Header
    ------------------------------------------------------------ */

    #header {
    background-color: #7f0707 repeat x;
    min-height: 105px;
    margin: 0 352px 10px;
    overflow: hidden;
    }

    #header .wrap {
    margin: 0 auto;
    width: 1260px;
    }

    #title-area {
    background-color: #7f0707;
    float: left;
    height: 90px;
    overflow: hidden;
    padding: 20px 0 0 20px;
    text-align: left;
    width: 260px;
    }

    #title {
    font-family: 'Great Vibes', cursive, Arial, sans-serif;
    font-size: 66px;
    text-shadow: #938d84 2px 2px
    line-height: 42px;
    margin: 15px 0 0;
    }

    #title a,
    #title a:hover {
    color: #fff;
    text-decoration: none;
    }

    #description {
    color: #999;
    font-size: 12px;
    text-transform: uppercase;
    }

    #header .widget-area {
    float: right;
    width: 700px;
    }

    /* Image Header - Partial Width
    ------------------------------------------------------------ */

    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    display: block;
    float: left;
    height: 105px;
    overflow: hidden;
    padding: 0;
    text-indent: -9999px;
    width: 250px;
    }

    .header-image #description {
    display: block;
    overflow: hidden;
    }

    /* Image Header - Full Width
    ------------------------------------------------------------ */

    .header-full-width #title-area,
    .header-full-width #title,
    .header-full-width #title a {
    width: 1960px;
    }

    ~~~ END of CSS ~~~

    Ideally I would like to use a graphic image and have it respond to re-sizing properly.

    AND ...

    If you can tell me how to remove the white border around the social icons images too, I would be ecstatic! (Or I will start a new thread for that questions ...)

    Any help is appreciated.

    Thanks

    DJ

    January 25, 2013 at 3:16 pm #14785
    SoZo
    Member

    Set the margin of #header to "0 auto" and adjust your width in #header .wrap or move it to #header


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 25, 2013 at 3:49 pm #14813
    djw2
    Member

    Hey that worked!  Thanks so much, SoZo.

    Could I post the image css here too for some help with the social icons border, or do I need to start a new thread for that?

     

     

    January 25, 2013 at 3:55 pm #14820
    SoZo
    Member

    Ya, probably best to create a new topic


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

    January 25, 2013 at 4:33 pm #14841
    djw2
    Member

    Will do right now then.

    Thank you.

    January 25, 2013 at 4:59 pm #14848
    SoZo
    Member

    You're welcome


    John “Nicolas Flamel” Wright | SoZo’s design| John Wright Photography

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Need help with Scribble header and image border css’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble