Motif header

margaretrosestringer · Member · Jan 9, 2014 at 10:47 pm
Copy link

Add topic to favorites
(1) size of banner
(2) lack of tagline
Is there any which is which either of these things can be changed, please?

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jan 10, 2014 at 5:36 pm
Copy link
Hi there,

1. Are you talking about the 320px x 110px normal header? If so, yes it can be resized with CSS.

2. The tagline is actually there, but has been hidden, so the following CSS will bring it back.
```
.site-description {
    display: block;
}
```
margaretrosestringer · Member · Jan 10, 2014 at 6:10 pm
Copy link
Yes I am. Would you let me know how to turn that tiny little header into something that spans the top of the blog, please?
I would be interested to know why the tagline has been hidden … no, that’s not quite correct: I would like to know why, since it has been hidden, there is no information readily available (that I can see, anyway) telling the user of this …
thesacredpath · Member · Jan 11, 2014 at 12:28 am
Copy link
For whatever reason, the theme designer included it in the HTML and in the CSS, but decided to hide it. Luckily they left the associated HTML and CSS in the theme so it could be un-hidden.

The header area is about 940px in width and the height can be anything you want it to be. The following is a quick look idea of what would be needed and I arbitrarily put a height of 200px. You would upload your image to your media library, get the URL and replace URL_OF_IMAGE with the URL of your image.
```
.site-image {
background: url ("URL_OF_IMAGE") no-repeat scroll 0 0 rgba (0, 0, 0, 0);
height: 200px;
}

.site-image img {
display: none;
}
```
margaretrosestringer · Member · Jan 11, 2014 at 12:39 am
Copy link
THANK YOU a thousand times, Rich! – you’ve just made my day.
thesacredpath · Member · Jan 11, 2014 at 2:08 am
Copy link
You are welcome as always.
margaretrosestringer · Member · Jan 11, 2014 at 2:28 am
Copy link
Alas. I must have done something silly.
As you said it could be whatever size I like, I made it 940 X 300, and the size is there, no worries.
It’s just that it’s empty.
```
.site-image {
	background: url ("http://margaretrosestringer.files.wordpress.com/2014/01/headernew.jpg") no-repeat scroll 0 0 rgba (0,0,0,0);
	height: 200px;
}

.site-image img {
	display: none;
}
```
margaretrosestringer · Member · Jan 11, 2014 at 2:29 am
Copy link
Um. Something has just hit me between the eyes.
You possibly wish it was you.
:-(
Hang on …
margaretrosestringer · Member · Jan 11, 2014 at 2:30 am
Copy link
Nup. Correcting the size didn’t help. Still no image.
?
thesacredpath · Member · Jan 11, 2014 at 2:52 am
Copy link
Ok, got a syntax issue in the code. Replace the rule with the background image with this one. I sent it to Underwriters Laboratories for testing and verification and it came back with their seal of approval. :-)
```
.site-image {
    background: url("http://margaretrosestringer.files.wordpress.com/2014/01/headernew.jpg") no-repeat scroll center bottom / cover rgba(0, 0, 0, 0);
    height: 200px;
}
```
P.S. I also added and edited a bit based on your header image to get it to align better.
margaretrosestringer · Member · Jan 11, 2014 at 3:04 am
Copy link
WORKS! – looks luverly, Rich. All the usual, y’ know …
Erhmm … stretching the friendship to ask if it’s possible to both center the branding and also give it extra padding above/below?
You will admit/agree, I’m sure! ;-) that it needs both …
thesacredpath · Member · Jan 11, 2014 at 4:08 am
Copy link
Yeah, a little more white space would be nice. Add the following and adjust top and bottom margins as desired.
```
.site-title, .site-description {
    text-align: center;
}
.site-title {
    margin-top: 40px;
}
.site-description {
    margin-bottom: 10px;
}
```
margaretrosestringer · Member · Jan 11, 2014 at 4:13 am
Copy link
OK. That’s perfect. You’ve done it again.
I know you wish I’d go and learn CSS for myself – but I’m too old. Much. :-)
Whereas you are there with nothing at all to do; so you might as well accede to my never-ending requests for your knowledge, no?
[grin]
You’re appreciated, Rich.
Hoo-roo till next time.
margaretrosestringer · Member · Jan 18, 2014 at 3:10 am
Copy link
Nasty surprise! – me again.
Wondering (somewhat ungratefully – sorry!) if it’s possible to extend the header to match the size of the nav bar …?
timethief · Member · Jan 18, 2014 at 3:14 am
Copy link
@margaretrose
Just passing through to give you a big smile :) because I ♥ your spunk!
margaretrosestringer · Member · Jan 18, 2014 at 3:22 am
Copy link
Always nice to be smiled at, timethief! – AND it’s appreciated! :-)
thesacredpath · Member · Jan 20, 2014 at 5:32 pm
Copy link
Hi, to extend the header to the width of the navigation bar, add the following CSS.
```
.site-branding {
    padding-left: 0;
    padding-right: 0;
}
```
margaretrosestringer · Member · Jan 20, 2014 at 6:00 pm
Copy link
Hi yourself, Rich: did you see that timethief feels I’m giving you a hard time?
Sighh …
She’s right, of course.
I can only HOPE that I’m nearly there – so nearly …
Meanwhile, thank you. It’s all I can say, regardless of how many times I’ve said it to you for all the marvellous stuff you do.
Must be really nice to have a job wherein you constructively help people (even demanding old broads).
thesacredpath · Member · Jan 20, 2014 at 6:28 pm
Copy link
No worries, and I don’t think she thinks you are giving me a hard time, but as she says, admires your spunk. I do too. :)
neildenny · Member · Feb 9, 2014 at 8:57 am
Copy link
Hello, I’m struggling to get a 940×110 header to show on Motif as well.

I (think) I incorporated the CSS amends into the CSS editor over at neildenny.com. I’ve got a place holder image saved into my media library – the url is shown in the code – but no show.

Any ideas?

Many thanks… and is is possible to shrink the height of the menu bar?

No items found.