Possible to add text eft of post-text?

Hey Nicolas,

I’m afraid that isn’t an option in Tracks. The area with the categories and tags isn’t fully widgetized for adding different content like this.

It could be done with some custom development. I can put you in the right direction if you’re comfortable writing some code, or you can always hire someone from codeable.io to build this for you.

Hi Ben

I was afraid you would say that :). Ok, can you point me in the right direction then? I’ll try, and if I can’t do it, I’ll contact codeable.io.

Just a curious question: it seems what I really wanted was a left-side widget area – are there any plans about implementing this – and further: a three column layout – in the future? Maybe as an upgrade posibility?

And just another question about integration Google Maps: Is it possible to make a map full-width in a post just like with the pictures, in this post e.g.?
https://gastronomicus.dk/spisekort/

Okay the first step will be to download an empty Tracks child theme. We have a child theme and instructions for uploading it here: https://www.competethemes.com/help/child-theme-tracks/

Then copy the content.php file from Tracks into the Tracks Child theme. Lastly, include the content for the map on line 18 inside the “.entry-meta-bottom” div.

To make that map full-width in content area, add the following CSS:

.entry-content .full-width {
	position: relative;
	max-width: none;
	width: 113%;
	left: -6.5%;
}
@media all and (min-width: 43.75em) {

	.entry-content .full-width {
		width: 128.6%;
    	left: -14.3%;
	}
}
@media all and (min-width: 56.25em) {

	.entry-content .full-width {
	 	width: 150%;
    	left: -25%;
	}
}
@media all and (min-width: 68.75em) {

	.entry-content .full-width {
		width: 163.6%;
		left: -31.8%;
	}
}
@media all and (min-width: 75em) {

	.entry-content .full-width {
		width: 179.9%;
    	left: -39.95%;
	}
}

You can copy and paste that code into the “Custom CSS” section in the Customizer (Appearance > Customize). Once added there, it should take affect right away.

Then place the map in a div container with a class of full-width like this:

<div class="full-width>
[map_shortcode]
</div>

I’m assuming a shortcode is being used, but anything can be placed in the full-width div container.

Make sure to switch the post editor from “Visual” mode to “Text” mode before adding the div.

Thanks, but it doesn’t seem to work – I pasted the code above into the “custom CSS” and
wrapped the mac-code into the div-container, like

<div class=”full-width>
[google_maps id=”601″]
</div>

…and it looks like this: https://gastronomicus.dk/spisekort/

You’ll notice that the Google Maps code is referring to a customised map I made using a plugin, so first I tried to alter the width to something very wide like 2000 pal, but same result.

I then tried to add ‘normal’ Google Maps embed-code delivered directly from Google Maps (that is, not generated or influenced by the WP-plugin) as in:

<div class=”full-width>
<iframe src=”https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d17988.364198471067!2d12.548182500000001!3d55.6968888!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sda!2sdk!4v1436732012272&#8243; width=”1200″ height=”600″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe></div>

…but then the map doesn’t show at all. Any idea where the problem is?

Thanks
Nicolas

What you have now is close, but there is a ” missing after the class="full-width" part. Add the missing ” and I think it should then work.

Arhhh, I’m an donkey! Of course, thanks a lot, everything works fine now. And kudos for your patience. I’ll probably return at some point with hideous details, but thanks for now ??

You’re welcome! Glad it’s working well now ??

arhrmm …. sorry I just saw, that the code has made the background picture disappear in the mobile-version of the theme.

When you go to https://www.gastronomicus.dk from a computer, you se a picture of floor boards as a background picture, but when you enter the site from a smartphone – e.g. my iPhone – the background is black.

I tried to remove the code you gave me (above), and the background picture comes right back on the mobile, so the issue is within this code… Can you see where?

.entry-content .full-width {
position: relative;
max-width: none;
width: 113%;
left: -6.5%;
}
@media all and (min-width: 43.75em) {

.entry-content .full-width {
position: relative;
max-width: none;
width: 113%;
left: -6.5%;
}
@media all and (min-width: 43.75em) {

.entry-content .full-width {
width: 128.6%;
left: -14.3%;
}
}
@media all and (min-width: 56.25em) {

.entry-content .full-width {
width: 150%;
left: -25%;
}
}
@media all and (min-width: 68.75em) {

.entry-content .full-width {
width: 163.6%;
left: -31.8%;
}
}
@media all and (min-width: 75em) {

.entry-content .full-width {
width: 179.9%;
left: -39.95%;
}
}

Looks like the CSS got a bit out of order which is messing up the background image as a side-effect.

Take out this section from the CSS you shared: https://pics.competethemes.com/image/1N2n2K1i0f2Q

Thanks, you are indeed the magician. Now it works perfect on my iPhone, too.

Sure thing!