Apparition Theme – Header and Header Right

Community Forums Forums Design Tips and Tricks Apparition Theme – Header and Header Right

This topic is: not resolved

Tagged: 

This topic contains 5 replies, has 3 voices, and was last updated by  kmmackey 8 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #59258

    lizbarnett
    Participant
    Post count: 10

    I am working on JenWPhotography.com and when I create a Header that is the suggested 1140 × 120 pixels but also add a widget in the Header Right widget box, it pushes the Header Image over to the left rather than putting the widget in an overlay over the image.

    For your convenience, here is some of the code as it is now:

    /* Wrap
    ------------------------------------------------------------ */
    
    .wrap {
    	margin: 0 auto;
    	width: 1140px;
    }
    
    /* Header
    ------------------------------------------------------------ */
    
    #wrap #header {
    background-color: #111111 !important;
    background-position: center !important;
    background-size: contain !important;
    min-height: 120px;
    overflow: hidden;
    width: 100%;
    }
    
    #title-area {
    	float: center;
    	margin: 32px 0 0;
    	width: 25%;
    }
    
    #title {
    	font-family: 'Lato', sans-serif;
    	font-size: 42px;
    	font-weight: normal;
    	line-height: 1.25;
    	margin: 0;
    	text-transform: uppercase;
    }
    
    #title a,
    #title a:hover {
    	color: #fff;
    	text-decoration: none;
    }
    
    .header-image #title-area,
    .header-image #title,
    .header-image #title a {
    	display: block;
    	float: center;
    	height: 120px;
    	overflow: visible;
    	text-indent: -9999px;
    }
    
    .header-image #title-area {
    	margin: 0;
    	width: 25%;
    }
    
    .header-full-width #title-area,
    .header-full-width #title,
    .header-full-width #title a,
    .header-image #title,
    .header-image #title a {
    	width: 100%;
    }
    
    #description {
    	color: #fff;
    	font-size: 16px;
    }
    
    .header-image #description {
    	display: block;
    	overflow: hidden;
    }
    
    #header .widget-area {
    	float: right;
    	width: 75%;
    }
    

    What do I need to change so that the Header image operates like a header background rather than shifting to the left to allow room for the widget?



    Liz Barnett http://www.LizBarnett.me

    http://www.jenwphotography.com
    #59283

    Sridhar Katakam
    Participant
    Post count: 926

    So you want this? -> http://i.imgur.com/Bv9hKHY.png

    I will write a detailed blog post tomorrow. Here is the summary:

    1) Comment out or delete theme support for genesis-custom-header in child theme’s functions.php.

    2) Upload this image as JenWPhotographylogo.jpg in child theme’s images directory.

    3) Add this code in child theme’s functions.php. (Source)

    4) Add the following at the end of child theme’s style.css (WP dashboard -> Appearance -> Editor):

    #header {
    	background: #060606;
    }
    
    .header-image #title-area, .header-image #title-area a {
    	text-indent: 0;
    }
    
    .header-image #title-area {
    	width: 60%;
    }
    
    #header .widget-area {
    	width: 40%;
    	color: #EFEFEF;
    	margin-top: 1.3rem;
    }

    #59288

    Sridhar Katakam
    Participant
    Post count: 926

    Bonus:

    If you would like to have the logo and widget take full width at mobile widths, use this sample CSS:

    @media only screen and (max-width: 500px) {
    	.header-image #title-area {
    		width: 100%;
    	}
    	#header .widget-area {
    		width: 100%;
    	}
    	#header .widget-area .widget {
    		padding: 1rem;
    	}
    	.header-image #title-area, .header-image #title, .header-image #title a {
    		height: auto;
    	}
    }

    Screenshot: http://i.imgur.com/PRsi8nd.png


    • This reply was modified 11 months, 1 week ago by  Sridhar Katakam. Reason: Added screenshot
    • This reply was modified 11 months, 1 week ago by  Sridhar Katakam. Reason: Added screenshot
    #59667

    lizbarnett
    Participant
    Post count: 10

    Thank you so much! I will look at this in more detail after I go to bed soon. But yes, you are correct. I want it to look like this:

    http://i.imgur.com/Bv9hKHY.png

    She has decided she does not like that logo, but I want to set it up so that when she does upload the logo she likes, it will be prepared for it and not move things around.



    Liz Barnett http://www.LizBarnett.me

    #59773

    lizbarnett
    Participant
    Post count: 10

    OK Here is the problem…

    I need to be able to have the header (or logo) to be able to be uploaded like this:

    >> Dashboard
    >> Appearance
    >> Header

    Because the photographer is having a graphic designer make the logo now. I told her that she will be able to upload it herself easily.

    So the image I shared isn’t the actual image, just one I was using as a “placeholder”.

    So whatever happens needs to be easy and dummy proof on the other end, so when I turn the site over to her she can just upload it and everything will function properly without her needing to contact me.

    So I don’t think this way of doing it is going to work since it involves going to the Control Panel of the host.

    Then it also needs to appear properly on mobile devices.

    So in summary:
    * The client needs to be able to upload and change her header as she wishes
    * The widget needs to overlay the header
    * The header (logo) should appear properly on mobile



    Liz Barnett http://www.LizBarnett.me

    #76956

    kmmackey
    Participant
    Post count: 7

    Hi,

    This may be similar to what I am trying with the lifestyle pro. At my test site – http://www.kathymackeywebservices.com/PGSPN/ – I currently have a full image header. I have another file that I want to add to the header. It is a transparent png that I need to be clickable. The image is in my media library – http://www.kathymackeywebservices.com/PGSPN/wp-content/uploads/2013/12/head2.png
    This is currently full width and if it could somehow overlay the first image or if not possible, can I crop the width and put that image into the header right. Maybe I could use your code but I think there are some specifics for the apparition theme that would need to be changed…..Help is appreciated.

    Kathy

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.