Some Mission News Theme questions

Thanks for the kind feedback ??

This CSS should work for changing the mobile menu background to white:

.menu-primary-container {
	background: #fff;
}

For the header image, try switching it to “fixed” mode. This will keep the header image the same height across all screen sizes, which should make it larger on mobile devices.

As for the borders throughout the theme, try this code to hide them:

.menu-primary-container {
	border: none;
}
.content-container:before,
.content-container:after {
	display: none;
}

That will remove the borders above and below the primary menu, and also remove the borders separating the sidebars from the main content.

For a grid view, try switching the blog layout to one of the “no sidebar” layouts, and then update the Post Preview layout to “Double.” It isn’t a masonry-style grid but does create a full-page grid layout.

The background image is a PRO option. As for the footer image, are you looking to use a separate logo or a different background image?

Dude, you’re awesome! Best support ever! Such a quick and helpfull response. Thank you so much!

Is there a way to get rid of the remaining borders? In the fake grid view the images and post previews are separated by grey borders.

For the footer I’d like a have an image stretch over the page width. I guess that’d be the background then?

Haha you’re welcome ??

Try adding this to remove the remaining borders:

.entry {
	border: none !important;
}
.pagination {
	border: none;
}

If borders are still showing anywhere let me know. I might need a link to the site to check it out.

As for the footer background, Mission News doesn’t have this in an option in the PRO upgrade either. That said, it’s not too hard to pull off with some more CSS:

.site-footer {
	background-image: url('https://website.com/image.jpg');
	background-size: cover;
	background-position: 50%;
}

There’s a placeholder for the image URL in that snippet. You just need to replace it with the URL of a real image and then it should show up in the background.

Thanks! So far most of it worked. But how exactly do I turn the header to fixed mode? I’m not able to find the most obvious buttons it seems… ??

How do I show a different image in the footer than in the header or remove the logo in the footer if I only want to have the background image shown?

There’s still several lines even though some were removed by your CSS code.
– The mobile menu has lines separating each entry
– There’s a line separating the footer from the rest of the page
– There’s a line separating the author’s box and the word cloud as well as the post suggestions underneath posts

Could the text of the menu in desktop view be as wide as the image if the preview of the first post is stretched to full screen? So that the writing aligns with the edges of the image and there’s more space between the menu categories?

When I click on the menu, the category opens and in German it says something like: “posts published in category ABC” – how can I remove that or change that text?

I’d like to show the category of each post with each title. Either on top of it or as an addition to “by author” “in category ABC”. And then the category “Published in XXX” underneath each post would have to be removed. Is that possible somehow? It’s more logical if the viewer directly sees the category of a post.

The tagline of the page… How to change the font and how to not make it italic? Or maybe I just add it to the image of the header.

Is it possible to hide the headline 2 in text previews so that the preview starts with the actual text of a post. Maybe by hiding the first box after the actual headline or so?

• This reply was modified 3 years, 9 months ago by jayjay2626.

If you’ve got the PRO plugin installed, you will see a Sticky Header section near the top of the Customizer.

I am working on an update for Mission News right now that adds the option to hide the logo in the footer. I may be able to include an option for an alternate footer logo in this update as well, but if not then in the next update.

This should remove the remaining borders.

.menu-primary li,
.menu-secondary li, 
.post-meta {
	border-bottom: none;
}
.site-footer,
.post-author {
	border-top: none;
}
.more-from-category .category-container,
.more-from-category li {
	border: none !important;
}

The menu text should expand as wide as the image. Do you have a link to the site or a screenshot I can see?

You can hide the text at the top of the archives pages from the Show/Hide Elements > Archives section. You can also add the post category to the byline via the Show/Hide Elements > Blog & Archives section.

Italics can be removed from the tagline like this:

.tagline {
  font-style: normal;
}

Lastly, I’m not quite sure I understand heading modification. Could you explain further or share a marked-up screenshot?

Hey Ben, I bought the pro version and so far it works well ??

I’m still continously trying to play around with design in order to get the page to meet my expectations.

– Is it possible to deactivate comments on the entire blog without having to do this for each post individually?
– Is it possible to hide the “comments deactivated” notification below each post?
– Can I change the size of the menu font in the footer as it is smaller than the primary menu? Can I also use CSS to adjust the size of the post image on a post page?
– Very important: Can I change text width for posts in desktop view?
– Can I make the header clickable so that it links to the start page?
– I show the first post larger on the blog page. Is it possible to adjust the size of that image? I don’t want it to be as small as the other preview pics below but not as big as it currently is
– I use a header depicting the logo and name of the page, so that I didn’t use the website information form. But because of this I don’t have the name of the page shown on a tab. And the header is by far too small on mobile view.
– I guess it’s not possible to show a text preview when hovering over an image on the blog page, right?
– On a category page the headlines of the post previews aren’t centered as they are on the blog page

So for bombing you with questions and thanks in advance… ??

• This reply was modified 3 years, 9 months ago by jayjay2626.

Thanks for upgrading!

This plugin is the best solution for disabling comments: https://www.ads-software.com/plugins/disable-comments/. It removes all traces of comments from the site including the Comments menu.

In the Show/Hide Elements section, you can hide the “comments link” to remove the “commented deactivated” text.

I forgot to add a font size for the footer menu – sorry! You can use this CSS instead for now:

.menu-footer {
  font-size: 18px;
}

The width of the text area is highly dependent on the layout. Unless you’re using a double sidebar, you can switch to a wider layout. Otherwise, you can change the maximum site width from the Layout > Site Width section, and that will allow the post content to expand.

I’m not sure I understand the question about making the header clickable. Could you clarify that for me?

Mission News doesn’t crop the Featured Image and expands it to fill the available width. The best way to make it smaller is to crop it so it’s not as tall and then upload this shorter version.

You can use an SEO plugin like Yoast SEO to define a custom title for the homepage. This will show up in the browser tab, but not visually on the page. You might want to try switching the header image over to “Fixed” height to retain some of the size on mobile devices.

Showing an excerpt when hovering over an image is not an option as of now, so it will need to be added with a plugin or custom development.

As for the category page headlines, I will need to see this first hand since it’s not the normal behavior in the theme. If you can share a link to a page where this is happening and I come up with a solution.

I chose the following layout on the blog page: “no sidebar – wide” + “first post bigger” + “content preview double” in order to get a grid view like we discussed earlier. I like the size of the content preview pictures in grid view, but I’d like the image of the first post preview above the grid to be as wide as the grid so that it aligns with the other posts. I guess it needs to be as wide as the container or something? Cropping the image is no option as it will be third party images that need to remain in their original form. Most interestingly the same setting on category pages lead to aligning the first post image with the grid, but everything is smaller than on the blog page and too small for my favour.

Could I send you a screenshot? My page is password protected for certain reasons as I didn’t launch it yet.

Concerning text width: If I change the width of the entire page, my background image disappears and obviously this increases the size of images which I don’t want. On content page I chose “no sidebar” and I’m ok with image width, but text isn’t wide enough. But “no sidbar – wide” makes text and images too wide. So there really isn’t any CSS code to adjust the width?

By making the header clickable I meant that it serves as a link to the main page instead of having a home button on the menu or so.

• This reply was modified 3 years, 9 months ago by jayjay2626.

“Most interestingly the same setting on category pages lead to aligning the first post image with the grid, but everything is smaller than on the blog page and too small for my favour.” that problem and that the headlines weren’t centered is solved now.

Thought about it and if making the first image smaller doesn’t work, is there a way to have all previews in grid view? Because if I don’t chose “make first post larger” it shows me two posts right next to each other without any distance between the images which looks really bad. I don’t get why the first line of posts wouldn’t be the same as the lines below so that everything is symmetrical.

And another idea would be to add a text preview in grid view that aligns with the images instead of only having a text preview in wide mode on the first image.

• This reply was modified 3 years, 9 months ago by jayjay2626.
• This reply was modified 3 years, 9 months ago by jayjay2626.

I understand the alignment issue now. Please add this CSS, and it will make the first Featured Image smaller so that it fits in line with the grid:

.blog .entry:first-child .featured-image,
.archive .entry:first-child .featured-image,
.search .entry:first-child .featured-image {
	width: 100%;
	left: 0;
}

I can’t recreate the issue where the category pages show up smaller. Please double-check that the “No sidebar – wide” layout is being used in Layout > Archives, and not the regular “No sidebar” layout which would make it smaller.

The text width can be adjusted with CSS. I just needed to know the layout being used. Please add the following code, and it will expand the post content to be the same width as the Featured Image when using the “No sidebar” layout:

@media all and (min-width: 50em) {
	
	.single-post .post-header,
	.single-post .post-content,
	.single-post .post-meta,
	.single-post .more-from-category,
	.comments {
		position: relative;
		left: -28%;
		width: 156%;
	}
}

The image overlapping when “Make the first post larger?” is turned on is a bug that I will fix. I just added that feature last week so I hadn’t caught this yet.

As for the header image, you can use this field to link it to any page you’d like: https://screenshot.competethemes.com/8Luk1krp

Ben, I can’t thank you enough for your kind support! Incredibly good service.

Everything worked perfectly. I’m getting closer to finishing the page, but judging by my track-record I suppose there might be one or two more questions in the future, but I hope to be done terrorising you soon! ?? ?? ??

Haha that’s awesome. I’m glad these final tips helped you get closer to the site you want. You can post again here if anything else comes up ??

Ben, is it possible to increase the number of preview posts on the blog page by using CSS? Or infinite scrolling?

I like the width if chosing the no sidebar layout. Would it be possible to show all posts like the first post is shown when “show first post bigger” is chosen? So that the images are bigger as in chosing “text preview”. You know what I mean? Kind of a block layout of images being the same width as the text exactly as happens when the first post is shown bigger, I’d only like that for all post previews.

And if I have sticky post on the main page: How to remove the marker that says “featured” or so (don’t know what it says in English as it’s displayed in German).