Forum Replies Created
-
Posts
-
Hi Victoria,
I tried again installing GMT again. It worked with the following code( the hook for the second function was wrong):
function google_tag_head_script() { ?> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX'); </script><?php } add_action( 'wp_head', 'google_tag_head_script' ); function google_tag_after_body_script() { ?> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --><?php } add_action('wp_footer', 'google_tag_after_body_script');Just a general question to finish this:
Is this way of installing GTM via the above code in functions.php of child theme sound and robust? Isn´t it even better than installing GTM via copying the header.php into child theme, like proposed in other threads in the forum?
Hi Ismael,
I just tried to implement GTM with my proposed code and your correction of using the correct hook.
It looks like it´s working as Google Tag Assist is showing that GTM is installed on the site.Just a general question because I am not confident in php and WP development:
Is this way of installing GTM via the above code in functions.php of child theme sound and robust? Isn´t it even better than installing GTM via copying the header.php into child theme, like proposed in other threads in the forum?Here is the correct code which goes into functions.php:
function google_tag_head_script() { ?> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX'); </script><?php } add_action( 'wp_head', 'google_tag_head_script' ); function google_tag_after_body_script() { ?> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --><?php } add_action('wp_footer', 'google_tag_after_body_script');The dimensions 845x321px look bad on “event-overview” just because the image has a small height while being very wide. The screenshot you are referring to does not contain an event with a resized image of 845x321px. The images in the screenshot you are referring to have dimensions of 2000x1200px.
The image of test event 1 is displayed fine on the details page while the image of the event “Clean Up Hagen – Runde 3” is cut off. Note again, both originally have the same dimensions.Why is the clean up Hagen image cut off while the test event 1 image is simply contained (resized smaller until it fits in the box)?
Hi,
I had the chance to spent 5 minutes on said laptop.
Firefox was up to date, the cache was cleared and firefox inspector showed that #socket max-heigt: 54px !important was being applied.
However, the socket was still way bigger than supposed to be (as seen in the screenshot).But I found out something. It seems that on Firefox on said laptop all WordPress pages have a bigger footer than supposed to be. I visited the other Enfold website I made and it also had a bigger socket than it should. I also visited a couple of other WP sites and all had a bigger footer. Therefore, it is not an Enfold issue.
All websites have the footer/socket displayed normal when using MS Edge on the same laptop (other browsers not installed).I think the socket actually has the correct height, but it just moves up a certain amount. It moves up even though the color section is set to 100% of the screen. On other pages there is a lot of content so you have to scroll down but the footer still has moved up and is displayed too big.
I don´t know what is causing it. I hope it´s just a very rare case.
Hi,
I have changed the dates of the test events so they are visible again on the main calendar overview. You need to login to see them because they are set to private.
I have made a 3rd test event with a title image with the dims of 845x321px. It is not getting cut. However, these dimension look weird on the overview page.
Note: Test event 1 has an image with the size of 2000x1200px and the image is not cut down on the detail page. The only difference between this image (the sandwich) and other ones is that this image was a dummy image which came with wordpress installation.
Hi Mike,
thank you for investigating. There are no double social media icons anymore. Thank you for helping out.
Best regards,
peterHi,
yes I have tried various sizes and formats.
Currently the sandwich image of the test event has a size of 2000 × 1200 and it is not cut off.
The clean-up Hagen event image has measures of 2362 × 1576 and it is being cut off to to bottom.
Test event 2 has an image of the same size as the img of test event 1 2000 x 1200 and it is being cut off.Hi Ismael,
I am not looking to insert just GA code.
I want to implement also other tracking(e.g. fb pixel tracking) and definitely want to manage all tracking via GTM.So are you saying that one could implement GTM by pasting the code into Enfold > Google Services panel > Tracking Code for GA?
GTM is not GA though. And what about the after body script which needs to use the after_body hook?I am asking if the code which I proposed above would work for a clean implementation of GTM with Enfold via functions.php in child theme. Do you see any problems with it? If that works then this would be a better solution than copying header.php into child theme, but I might well miss a point here.
Thank you for helping out.
Hi,
I know it´s strange. I wasn´t able to replicate the case either but I saw it on my friends laptop with my own eyes. I asked if the socket still appears bigger, but did not get answer yet.
It doesn´t seem to be an important thing to spend too much time on so let´s see.
I keep you updated….Hi guys,
thank you very much for the replies. I will soon work on this again. The svg solution sounds pretty optimal.
Hi Mike,
thanks for following up. Now, everything is a 100% clear and I know what to do if I need to custom change any font in the future.
Thank you. You can consider the topic as closed.
Hi Victoria,
basically the footer looks fine on pretty much every device and browser I tested on. However, not on Firefox using the laptop of my friend. He also had MS Edge installed. On Edge the footer was displayed correctly.
I checked if is Firefox was updated to the newest version, and yes it was. Not sure what his screen size was but approximately 15 inch.
Hi Ismael,
thank you for the response. The border is now displayed like desired.
You can close the topic now. Thanks for the support.
Hi,
thank you for taking time and explaining all this.
I just tried something. Under Enfold Child (EN)>quick css I changed the font-family to ‘Yellowtail’ to see if it would display the new font. However, the font was not displayed correctly. Instead it was some normal font, something like Arial or similar (it´s definitely not Lato which is set in the settings under Enfold Child (EN)>general styling>font).
I changed the CSS back to ‘Lobster’ and the front end is back to showing Lobster again.I did further tests by making various text boxes on a draft page which will not be published (find the link to the test page in private content).
The first text box has Yellowtail set as font-family. However, the font-family is not rendering on the front end. Some other font type is displayed (not Lato). The strange thing is that when you inspect the text box with chrome dev tools it says “font-family: Yellowtail” is being applied (Check for yourself). The font Yellowtail is a standard Google font and can be selected under Enfold Child>general styling>font and therefore it should not be necessary to upload it.
The second test box has, again, Lobster as it´s font and this one is getting the correct rendering.
Then I went ahead and uploaded the google font Yellowtail into Enfold Child (DE)>import/export>custom font manager. The exact naming of the file was ‘yellowtail-v8-latin’. I created a third test text with corresponding css to see if it would show ‘yellowtail-v8-latin’ on this one.
And indeed, the browser does render the Yellowtail font family!For a fourth text box I tried including @import url(‘https://fonts.googleapis.com/css?family=Yellowtail’) before the relevant css code. But this also did not help.
So my guess is that the css style sheet cannot import the google default fonts, which come pre-installed with the theme, for some reason. In order to change a font-family with custom css it seems necessary to upload that font in Enfold Child>import/export>custom font manager first.
When you have time, you might want to investigate this issue further. It doesn´t feel to me that it has anything to do with the plugin wpml at all though, but I don´t know.
My specific problem is solved, as I have the desired font correctly displayed. So, thank you for helping out.
Hi,
one question about this method of adding GTM.
Is copying the header.php file into the child theme and placing gtm code in there a robust method?
What if in future the structure of the header changes due to theme developments? Could it produce conflicts?
Isn´t it better to install GTM via a function in functions.php in child theme?
For another theme I worked with I had to insert the following code into functions.php to install GTMfunction google_tag_head_script() { ?> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-XXXXXXX'); </script><?php } add_action( 'wp_head', 'google_tag_head_script' ); function google_tag_after_body_script() { ?> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --><?php } add_action('after_body', 'google_tag_after_body_script');Can we do something similar with enfold?
Thanks in advance.
Hi,
thank you very much for investigating. I checked the site and both languages show the font. All other texts are still in Lato as far as I saw.
Concerning the uploading font-type Lobster into Enfold Theme Options > Import/Export > Custom Font Manager: I did not take steps to upload that font somewhere because I thought it comes as a default Google font with the theme. Was this a necessary step to make it work?
Concerning disabling JS & CSS file merging and compression: Does this need to stay disabled to make it work? As soon as I finish this site (hopefully very soon) I will look to increase the performance as much as possible. I will want to activate the css merging feature again. That should not cause this to break again, should it?
About the different theme options per language: I don´t know why these are different per language. I cannot remember to have changed something for only one language. Generally, I find it pretty confusing that there are different theme options per language anyway. I never saw this in other themes. I cannot imagine a case where I would want to have different theme options per language. However, I admit that there might be cases where this flexibility is nice to have.
So to conclude, I don´t know what has caused the problem and what solved it, but it seems to work fine now. In case I decide to use a different font-family for that text element. Should I upload it in import>custom font?
Thank you,
Hi Mike,
thank you for the reply.
It´s true the code `#av_section_1 .start-partner h4 {
font-family: ‘Lobster’ !important;
}`
is in quick CSS. It was my initial try to change the font-family. However, this is not what made the font-family change. What made the font-family change to lobster is the option in Enfold Child (DE)>advanced styling where we changed the styling of all H4 elements on the website (see screenshot: https://cl.ly/d2c2bfe73220).
When I delete the advanced styling for H4 elements in Enfold Child(DE)>Advanced Styling, then the font-family is not ‘Lobster’ anymore even though the CSS code above is still there.Changing the font-family with the Advanced Styling feature of Enfold is not optimal because it changes the style of all H4 elements on the website. I only want to change font-family for exclusively this one text element.
Well, I think the language switcher is not interrupting with the css functionality. This is what happens:
The Endold Child options panel is devided by language after installing WPML. Now there is Enfold Child (DE) and Enfold Child (EN). I can apply different settings for each of these. That is also why the css customization can vary for each language because for now I placed the CSS code in Enfold Child>Quick css. The quick CSS in Enfold Child (DE) is different to the quick CSS in Enfold Child (EN).
I am still hoping to find a good solution for what I want to achieve, which is: a smooth logo transition to a different logo when the header shrinks. I am looking to have a similar result to the header of this support forum.
I might have another approach to achieve this in the case of my website.
Can you put two logos on top of each other? In my case that would be the normal logo with the text and above the logo without text in exactly the same dimensions so they are perfectly overlapping (the second logo on top has a transparent background).
Then when you shrink the header you make a css transition effect with opacity going to 0 applied only to the first logo with text, leaving just the second logo visible in the shrinked header.You could probably pile two logo images on top of each other with a short php function, right? Can you help with this, because I am not yet able to write php code myself.
I am looking forward to your reply. Thanks…
Hi,
thank you for suggesting the advanced styling feature. It indeed changes the font-family.
However, the thing is I want the font-family changed only and exclusively for one specific text element which in this case happens to be an h4 element.
To my understanding the advanced styling will change the all the H4 elements on the website which is not desired.
How come that I cannot just overwrite the font-family attribute with simple css?
Hi,
I figured out a solution which is satisfactory:
1. With CSS hide the default avia/enfold language switcher.
2. Create a custom widget area inside the header.
3. make a wpml widget switcher and place it in the newly created header widget area.
4. Use css to move the widget to where desired.I also created a border-right for the DE li item to give it a similar look like the main menu.
However, there is a minor issue to which I struggle to find a solution. The border I created is bigger than the border between the menu items in the main menu. What do I need to do to make it appear in the same size as the main menu border?
I tried stuff with max-height. It made the border smaller but then it´s not vertically in the middle anymore.Thanks for the support and time.
Hi,
can you show a screenshot? On my end it doesn´t. I have looked through various browsers.
In private content find a screenshot of what I see in the front end.
Thank you for the support.
Hi,
thank you for reaching out.
I cannot find an option to change the default language switcher. In the wpml settings there are options for a switcher in the menu, a switcher in the footer or a switcher as a widget. The language switcher with the flags which is currently displayed on the website to the right of the main menu is neither one of them.
Note: don´t want a language switcher in the main menu. I want on which is to the right of the main menu or the left of the hamburger icon on mobile.
Thank you for your support.
Note:
You can compare the results by switching between English and German language.
English language has content:url(….)
German language has background-image:url(…)Hi Jordan,
I have tried that, but the result is not satisfactory. The images are not exactly overlapping, which is important though. Otherwise, the transition is not smooth.
I guess the images are not exactly overlapping because for the normal header it is a a normal img and for the scrolled header it is a background-image.
I have changed the css to the following:.header-scrolled .logo a{ content: url(https://sr-sourcing.de/wp-content/uploads/2019/01/srs-logo-circle.png) !important;This makes the logo exactly overlapping.
However, now the smooth transition is gone. Before, the text in the logo was fading away. This effect is now gone.
I have tried some css animation for the scrolled logo, but it wasn´t satisfactory.Do you have a solution for that?
Hi Rikard,
yes I want to target the h4 element.
I have put the code you suggested into quick css but the text still displays in the default font-family.Please check.
Thank you very much for the support.
