Logo Quality / Fixed Bar

This topic has 16 replies, 2 voices, and was last updated 9 years, 1 month ago by Andrew Misplon.

Tagged: banner logo ultra

Author
Posts
October 12, 2015 at 5:04 pm #2544

Command
Participant
Hi Andrew I have a few questions,
I am having an issue making the logo on my home page appear clearly. I have added a retina logo that shows up crystal clear on my mac, but the regular version appears blurry and pixelated. Can you please advise me on how to fix this problem?
Additionally, I am attempting to create a fixed slim photo banner for some pages on my site. I have created the banner and attempted to center the text atop the banner however I cannot get the banner to be fixed so it gets distorted when making the page larger/smaller or when viewed on a mobile phone. If you can help me with this issue it’d be greatly appreciated!
– Command
October 12, 2015 at 7:32 pm #2546

Andrew Misplon
Keymaster
Hi Command
I’m sure I can get these challenges sorted. Could you perhaps send your site link so I can take a look. Please let me know which page I can see the banner on. You can use the private reply checkbox below the comment field to keep your site URL private.
Thanks
October 12, 2015 at 7:36 pm #2549

Command
Participant
This reply has been marked as private.
October 12, 2015 at 7:49 pm #2550
Andrew Misplon
Keymaster
Thanks.
A friendly reminder that all WordPress.org themes completely overwrite their own folder during theme updates. Any changes made via Appearance > Editor to the parent theme will be lost on theme update if an update is ever run.
Go to Appearance > Editor > style.css and search for:
```
.entry-header h1.entry-title,
.entry-header h1.page-title,
.page-header h1.entry-title,
.page-header h1.page-title {
  font-size: 1.78571em;
  line-height: 2em;
  margin: 0;
  text-align: center;
  margin-left: 4.5cm;
}
```
The following line has been added, please remove it for now:
margin-left: 4.5cm;
If you don’t have a Custom CSS plugin, try installing one called SiteOrigin CSS from Plugins > Add New. Once activated go to Appearance > Custom CSS and insert:
```
/* Content Heading */

.single .entry-header h1.entry-title, .page .site-content > .entry-header h1.entry-title, .blog .page-header h1.page-title, .search-results .page-header h1.page-title, .search-no-results .page-header h1.page-title, .error404 .page-header h1.page-title {
    width: 100%;
    text-align: center;
}
```
This should resolve the banner issue. I’ll come back to you on the logo shortly.
October 12, 2015 at 7:53 pm #2551

Andrew Misplon
Keymaster
I ran a quick diff comparison on your stylesheet. The above rule is the only one edited so after this we’ll be update safe.
October 12, 2015 at 7:56 pm #2553

Andrew Misplon
Keymaster
For the logo, perhaps try uploading this version as your main logo.
https://purothemes.com/wp-content/uploads/2015/10/command-security-logo-184h.png
Let me know if that makes any difference.
I think the problem on regular resolutions might just be that the logo text doesn’t render well at that size. We can next look at enlarging the header to accommodate it.
October 12, 2015 at 8:03 pm #2554

Command
Participant
This reply has been marked as private.
October 12, 2015 at 8:05 pm #2556

Command
Participant
Thank you greatly! That version of the logo worked!
October 12, 2015 at 8:33 pm #2558
Andrew Misplon
Keymaster
Glad to hear that helped.
For the banner, go to Appearance > Editor > style.css, locate these two lines:
```
text-align: center;
margin-left: 4.5cm;
```
and remove them.
October 12, 2015 at 9:20 pm #2559

Command
Participant
This reply has been marked as private.
October 12, 2015 at 9:23 pm #2560
Andrew Misplon
Keymaster
Thanks for your feedback. At Appearance > Editor > style.css. Try searching for:
```
/*--------------------------------------------------------------
13.6.3 - General Post and Page Header
--------------------------------------------------------------*/
```
Underneath that you’ll find:
```
.entry-header h1.entry-title,
.entry-header h1.page-title,
.page-header h1.entry-title,
.page-header h1.page-title {
  font-size: 1.78571em;
  line-height: 2em;
  margin: 0;
  text-align: center;
  margin-left: 4.5cm;
}
```
The two lines we need to remove are:
```
  text-align: center;
  margin-left: 4.5cm;
```
The left margin is the main issue.
(If at all possible, could we perhaps save “private reply” for passwords and URLS etc. That way the thread might be helpful to others. You’re a premium user so we could also move to email if you ever wanted. Thanks for your consideration).
October 12, 2015 at 9:32 pm #2561

Command
Participant
Absolutely!
I checked that location and this is what is showing up for me.
/*————————————————————–
13.6.3 – General Post and Page Header
————————————————————–*/
.entry-header h1.entry-title,
.entry-header h1.page-title,
.page-header h1.entry-title,
.page-header h1.page-title {
font-size: 1.78571em;
line-height: 2em;
margin: 0;
text-align: center;
}
October 12, 2015 at 9:49 pm #2562
Andrew Misplon
Keymaster
Thanks 🙂
Apologies, that was a caching issue on my side. Thanks for double-checking.
We can now try the following in Custom CSS:
```
.single .entry-header, .page .site-content > .entry-header, .blog .page-header, .archive .page-header, .search-results .page-header, .search-no-results .page-header, .error404 .page-header {
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: center center !important;
}

@media (max-width: 1280px) {
	.page .site-content > .entry-header {
		padding: 1em 0;
	}
}
```
Managing the padding for mobile gets tricky. See what you think. I tried to reduce it a bit, you could reduce it more. It’s the last value there. 1em.
October 12, 2015 at 10:20 pm #2563

Command
Participant
That code worked perfectly for the desktop site the mobile however shows up as more of a black rectangle box with the image inside of it. I attempted to change the number in front of “em” which had little success in changing the appearance of the box.
Andrew you’ve been so helpful, it is greatly appreciated.
October 12, 2015 at 10:27 pm #2564
Andrew Misplon
Keymaster
Glad to hear we’re making progress. We can try add another media query like this:
```
@media (max-width: 480px) {
	.page .site-content > .entry-header {
		padding: 6px 0;
	}
}
```
OR we could drop the background image for mobile. If you wanted to that we’d say:
```
@media (max-width: 680px) {
	.single .entry-header, .page .site-content > .entry-header, .blog .page-header, .archive .page-header, .search-results .page-header, .search-no-results .page-header, .error404 .page-header {
		background-image: none !important;
	}	
}
```
Author
Posts

Viewing 15 posts - 1 through 15 (of 17 total)

1 2 →

You must be logged in to reply to this topic.