Motif header CSS

• 

  sarahcv · Member · Apr 2, 2014 at 11:21 am

  • Copy link
  • Add topic to favorites

  I’m having issues with customising the header size in the Motif theme. I’ve tried various combinations and now have:

  .site-image {
      background: url("http://sarahstesting.files.wordpress.com/2014/04/logoblog.jpg") no-repeat scroll center top / contain rgba(0, 0, 0, 0);
      height: 200px; width: 970px;
  }

  but the image I have is still coming out tiny… any suggestions?

  The blog I need help with is: (visible only to logged in users)

• 

  sarahcv · Member · Apr 2, 2014 at 11:41 am

  • Copy link

  *EDIT*

  I’ve fiddled a bit and can get the header the right size but then there is loads of white space around it. Is there a way to get rid of that?

  .site-image {
  	background: url('http://sarahstesting.files.wordpress.com/2014/04/logoblog.jpg') no-repeat center top / contain rgba(0,0,0,0);
  	height: 800px;
  	width: 970px;
  }

• 

  designsimply · Member · Apr 2, 2014 at 9:29 pm

  • Copy link

  Adding the background image to “.site-branding” instead of “.site-image” might work better. Here is an example if you want to try it out:

  Remove this:

  .site-image {
  	background: url('http://sarahstesting.files.wordpress.com/2014/04/logoblog6.jpg') no-repeat center top / contain rgba(0, 0, 0, 0);
  	height:200px;
  	width:900px
  }

  Add this:

  .site-branding {
  	background: url('http://sarahstesting.files.wordpress.com/2014/04/logoblog6.jpg') no-repeat center top / contain;
  	height: 200px;
  }

• 

  sarahcv · Member · Apr 6, 2014 at 6:35 pm

  • Copy link

  Thanks! It works really well now :)

• 

  tmbagency · Member · Apr 23, 2014 at 1:23 am

  • Copy link

  Hello,
  I would like to remove some of the white space above the logo and give more room for the logo image, the site is http://www.tmbagency.com.

  Thank you

• 

  thesacredpath · Member · Apr 23, 2014 at 3:07 am

  • Copy link

  @thebloggerboutique, add the following and adjust the top padding value as desired.

  .site-branding {
  padding-top: 34px;
  }

  If that isn’t enough, add the following and adjust the top margin value, but start with the site-branding padding first. You can even set it to 0.

  .site {
  margin-top: 34px;
  }

• 

  tmbagency · Member · Apr 23, 2014 at 11:52 am

  • Copy link

  Hello @thesacredpath,

  Thanks so much, it worked!

  Wondering if this code gave me more room for the logo? Right now, it only allows 300 x 100 image and I would like at least 500 wide.

  Thanks, again.

• 

  tmbagency · Member · Apr 23, 2014 at 4:08 pm

  • Copy link

  Hello again,

  Can I add social media icons above the logo, placed to the far right?

  Thanks again for your help.

• 

  thesacredpath · Member · Apr 23, 2014 at 9:55 pm

  • Copy link

  The theme itself sets the width and height for headers uploaded through Appearance > Header, but we can add a header and hide the existing. What you would want to do is create a header image and upload it to your media library (107px is the height of the existing). Get the URL of that image and replace URL_OF_IMAGE between the quote marks in the background declaration.

  .site-image {
  background: url("URL_OF_IMAGE") no-repeat scroll top left rgba(0, 0, 0, 0);
  }
  
  .site-image img {
  visibility: hidden;
  }

  To add social media icons, you can put them into a text widget and link them as you desire. Then we can move that text widget up and into the header area. To do this, after adding the text widget, you get the unique text widget CSS ID from viewing the source code (browser view menu > view source). It will look something like this: text-34.

  You can then modify the following by replacing the numeric part of the CSS ID selector with the number of the widget you put your icons into.

  .site {
      position: relative;
  }
  #text-34 {
      float: right;
      position: absolute;
      top: 0;
      right: 0;
      width: 200px;
  }

  This will be a starting point. I’ve put in arbitrary values since I have not yet seen your widget. Width, top and right values may have to be adjusted.

• 

  tmbagency · Member · Apr 23, 2014 at 10:41 pm

  • Copy link

  Positively awesome!

  I will let you know when I’ve made the changes.

  Thank you, @thescaredpath. You’ve been wonderfully helpful.

• 

  thesacredpath · Member · Apr 23, 2014 at 11:41 pm

  • Copy link

  You are welcome and thanks.

• 

  tmbagency · Member · Apr 24, 2014 at 7:41 pm

  • Copy link

  Hello @thesacredpath,

  How are you? I managed to add the social media icons successfully and they look great. However, these only appear on the home page.

  Does this mean I need to add a widget on each page and repeat the code?

  Thanks for your help.

• 

  thesacredpath · Member · Apr 24, 2014 at 10:35 pm

  • Copy link

  Hi, it looks like you have the widget visibility set to just show on the home page. Open your social widget and change the visibility.

• 

  tmbagency · Member · Apr 24, 2014 at 11:42 pm

  • Copy link

  Hi, Visible on all pages. Thanks again for your help.

• 

  thesacredpath · Member · Apr 25, 2014 at 3:55 am

  • Copy link

  You are welcome.