Adjusting logo

auntyclare · Member · Sep 17, 2015 at 1:14 pm
Copy link

Add topic to favorites
I’d like to make 2 changes to how the logo and title and tag line are displayed.

Most important is that I’d like the title and tag line to display to the left of the logo. Our logo is tall, not square, and I’d like the title and tag line to appear near the top right of the logo, so the logo extends lower than the text.

Second: can I put a border around the logo, coloured to match the title (#CC1013)

I know I can’t make this permanent until we’ve signed up for a premium site, but I have to show the mock site (yes, we’re not really in Narnia!) to the committee before I get the go-ahead. So I need to know this will be possible. I can make a screengrab from Preview to show them.

I’d be grateful for help with the CSS.

Thanks.
Clare

The blog I need help with is: (visible only to logged in users)
timethief · Member · Sep 17, 2015 at 11:07 pm
Copy link
All CSS editing is theme specific editing. Volunteers cannot view private blogs; only Staff can. Please be patient while waiting for Staff assistance.
auntyclare · Member · Sep 18, 2015 at 1:19 am
Copy link
@timethief
thanks for reminding me to mention the theme. Yoko.
auntyclare · Member · Sep 18, 2015 at 4:10 am
Copy link
Correction:
just realised I wrote I’d like title and tag line on left Oops. I want the logo on the left. Title and tag line just to the right of the logo, at the top.
thesacredpath · Member · Sep 18, 2015 at 6:35 am
Copy link
Hi, due to space considerations, we can only do this on screens 800px and wider, and if you add more menu items, then that 800px would need to increase. I’ve used a media query to limit things.
```
@media screen and (min-width: 800px) {
#site-title {
  position: relative;
}
#site-title h1 {
  position: absolute;
  padding-left: 120px
}
#site-title h2 {
  position: absolute;
  top: 60px;
  left: 125px;
}
}
```
See what you think and let me know.
thesacredpath · Member · Sep 18, 2015 at 6:36 am
Copy link
I should also mention that to apply this to your site will require the WordPress.com Premium Plan upgrade, which includes Custom Design.

You can try out and preview custom CSS before you buy as explained here.
auntyclare · Member · Sep 18, 2015 at 2:55 pm
Copy link
Thank you for working this out.

In the preview window, the site title word-wrapped onto a second line, overlying the tag line. I don’t understand much about CSS at all but wondered it this might be something to do with the 800px minimum width you mentioned. The preview screen has the customize sidebar on the left so isn’t full screen.

If there isn’t a CSS solution, I’m also wondering whether I can make an image file with the logo, title and tag line. Use it as a header image and turn of site identity info in WP.

I’ve had one try, using Paint. But although the image looks fine full-screen in Paint, it’s blurry and a bit pixelated when I set it as a header image. I don’t understand why. Not sure what else to try.
thesacredpath · Member · Sep 18, 2015 at 7:28 pm
Copy link
There are a lot of things that can gum up the works, so to speak when making changes like this, and some of them are totally out of our control, such as settings a visitor may make in their browser including minimum font size, zoom level, etc. In addition, no two browsers will render things exactly the same. On one browser, the title may break to two lines while on another it will not.

One of the issues we have is that the menu floats to the right inline with the image, title and tagline. It will demand a certain width and when the image/title/tagline and it meet in the middle, the text-based tagline and title will give and go to two lines.

Putting the title, tagline and image into an image instead of separately solves the one problem with the text breaking to two lines, but then we have to deal with what happens to a 500px wide image on a 480px or 320px wide mobile browser in a phone. We can certainly let he image resize smaller by applying the correct CSS.

I would suggest using GIMP, which is a very capable and full-featured image editing program, for creating the image with the title and tagline in it. It is open source, so nothing to buy, just download it and use it.

I would suggest saving the image as a PNG with a transparent background. That is going to make the text sharp more sharp and clear.

Once you have your image, upload it to your media library and I’ll work on the CSS to get that into your site and get things to work on all screen/window widths.

No items found.