logo size

caddietravels · Member · Jul 28, 2016 at 3:22 am
Copy link

Add topic to favorites
is there a css that will enlarge the logo that displays in the header? also one that will keep the logo centered?

The blog I need help with is: (visible only to logged in users)
g471n · Member · Jul 28, 2016 at 7:02 am
Copy link
Hello caddietravels

Are you referring to the text “Caddie Travels”?

I see that you have added some custom CSS to alter the font size.

Are you happy with the result?
caddietravels · Member · Jul 28, 2016 at 12:28 pm
Copy link
no. I don’t have the logo up because its too small. I’m only using the Site Title and Tagline as of right now. I’d prefer to use my logo over the header. any help wth a css that enlarges the logo and keeps its centered?
g471n · Member · Jul 28, 2016 at 12:48 pm
Copy link
If you can put your logo back up, I will have a look at it for you.
caddietravels · Member · Jul 28, 2016 at 1:11 pm
Copy link
will do thanks
caddietravels · Member · Jul 28, 2016 at 1:14 pm
Copy link
i changed it back. I also notice the logo doesn’t show up on about or contact page
g471n · Member · Jul 28, 2016 at 1:29 pm
Copy link
The logo you are using is only 100px x 35px. If we use CSS to make the logo bigger the result will be pixelated.

You will need a bigger logo image for this to work.
caddietravels · Member · Jul 28, 2016 at 1:58 pm
Copy link
excuse my ignorance but can you tell me how to make it bigger? I have PS Elements. when I use the logo everyplace else it shows up with a perfect size. So I was a little confused why it so small on the header. I’m not sure how to make the PX x PX bigger.
g471n · Member · Jul 28, 2016 at 2:16 pm
Copy link
I haven’t used PS Elements before, but when you save/export the logo, are there not some options to specify the size?
caddietravels · Member · Jul 28, 2016 at 2:24 pm
Copy link
the Dimensions are 4319 × 1502. it won’t let me get much bigger than that if I edit on the edit page of wordpress. i’m assuming those dimensions aren’t the px you are talking about.
g471n · Member · Jul 28, 2016 at 2:43 pm
Copy link
I think they are, but the image that the theme is displaying is only 100 x 35px. I will need to investigate further.
hallluke · Member · Jul 28, 2016 at 2:45 pm
Copy link
Your theme restricts the size that the logo can be, from the theme page:

The site logo is resized to 100 x 60 [pixels]

If you want to use a larger image you’d need to include it with CSS. Seeing as you have an almost empty header and a gigantic logo file with a transparent background it’s hard to offer much advice but something like the following might work:
```
.masthead h1::before {
	content: "";
	display: block;
	height: 100px;
	width: 288px;
	background: url("https://caddietravelssite.files.wordpress.com/2016/07/caddie-travels-horizontal-032.png");
	background-size: contain;
}
```
I’d suggest you upload the logo image at the size you want to display it rather than 4000px wide. Also you shouldn’t have a blank site title or description as search engines really like having this information! If you don’t want them displayed it can be hidden with CSS – just let me know if that’s what you want.
caddietravels · Member · Jul 28, 2016 at 3:03 pm
Copy link
Thanks for the advice about the blank site title.

I used the css above and it did make it a little bigger but not big enough where you can see it that well. it would also need to be centered kinda at the top of the header. another problem with doing that is you can’t click on the logo to take you back to the first page of the site. I don’t use a home page so I need to be able to click on the logo so it can take you back to the front page.
hallluke · Member · Jul 28, 2016 at 3:53 pm
Copy link
If you get rid of the existing logo and add your site title text back in I will help with a way to replace the title with the image and make it a huge clickable link (hopefully).

I’m subscribed to this thread so reply here when it’s done and I’ll get an email and take another look.
caddietravels · Member · Jul 28, 2016 at 4:19 pm
Copy link
just changed it back over. Thanks
waterbillboards2 · Member · Jul 28, 2016 at 4:20 pm
Copy link
I seem to be having a similar issue. I can’t get my logo bigger or centered and I have tried many different things. The site is new.waterbillboards.com and it is the Awesome theme. I tried what you suggested for this user but it did not do anything
hallluke · Member · Jul 28, 2016 at 5:58 pm
Copy link
Your logo image and background image clash quite a bit so you might want to rethink one of them but here’s some code to get you up and running:
```
.masthead h1 a {
	display: block;
	height: 200px;
	width: 100%;
	background-image: url("https://caddietravelssite.files.wordpress.com/2016/07/caddie-travels-horizontal-032.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center top;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.masthead .menu {
	margin-bottom: 0;
}
.masthead .description {
	display: none;
}
```
@waterbillboards2 can you create a new post for your issue please. You’re using a different theme (it looks to be Karuna at the moment) and CSS depends heavily on the theme so it’s unlikely that CSS for other themes will work for you.

It also helps keep the forum tidy, more easily searchable and stops people getting notifications for replies on their posts that aren’t about the original issue.
caddietravels · Member · Jul 28, 2016 at 6:23 pm
Copy link
Thanks a lot. very helpful. only other question is if I wanted to change the logo do I just change URL for the background image in the CSS?
hallluke · Member · Jul 28, 2016 at 6:28 pm
Copy link
You’d need to upload the new image to your media library. I’d suggest uploading it at the specific size you want it to be to save on space and make it as fast as possible. Then you would just copy in the new URL and you can also set the image height too. Those are the only changes you should need to make.
waterbillboards2 · Member · Jul 28, 2016 at 6:31 pm
Copy link
I created a forum called awesome theme logo

No items found.