krischan941

Hi @zoonini
This font is installed on my computer, both Windows and Ubuntu. Also in WordPress I have installed all derivates of Source Serif Pro.

If so, your issue sounds like the one described in the following threads and tickets. Have a look and see what you think:

https://core.trac.www.ads-software.com/ticket/56332

https://www.ads-software.com/support/topic/font-weight-300-is-not-displayed/

https://github.com/WordPress/gutenberg/issues/42190

It is the same issue. Just now it loaded for a millisecond or so the correct font while rendering the page on Firefox (Windows 11), but then instantly switched back to the non desired font-weight.
I have no Apple Device to see how it behaves there on, just out of interest. Android is fine.

It isn’t a big issue for me so I wait until it is fixed and do not a workaround. Thanks for the clarification.

• This reply was modified 2 years ago by krischan941.
• This reply was modified 2 years ago by krischan941.
• This reply was modified 2 years ago by krischan941.

By headers I mean the “Alle St?rche auf den Weg nach Süden – Livestream 2022 offline” and the following ones (not visible on screenshots).

It would still be good if you can answer my question, since this would help me better understand if you actually need a child theme or not:

Have you been modifying other theme files in addition to style.css?

Ah I forgot. Yes, I have modified the style.css only.

So now, as you suggest I just use the Twenty Twenty Two theme with my css in the custom css editor ??

• This reply was modified 2 years, 3 months ago by krischan941.

Thank you for your reply.

To the css: I know it wasn’t clever to put my custom css in the stlye.css directly. As you recommended me elsewhere https://www.ads-software.com/support/topic/problems-with-creating-a-child-theme/ I used the Plugin “Create Block Theme” and “exported my current theme”. But I see it’s bad practice with edited style.css.

I just created a Child-Theme. I reset the style.css to the init state and created a Child Theme with “Create Block Theme” and loaded it aftwerwards. Is it then correct to put the custom css (with my customizations only) in the child style.css? If yes that did nothing unfortunately. The child style.css header has a correct header with “theme: twentytwentytwo”.
As long as the child theme doesn’t run properly I load the parent Twenty Twenty Two Theme with css customizations written down in https://storch.watch/wp-admin/customize.php as you suggested!

To the comment form: thanks for the information to the outline property, I wasn’t aware of it. I’ll see how I handle it.
Btw. have you any idea how one can see in the webbrowser devtools the :active, :focus, Focus-visible etc. properties?

Thank you very much for your good help.

• This reply was modified 2 years, 3 months ago by krischan941.

Hello @zoonini
thanks for your answer. Sorry I forgot to post a specific site. Here is one:
https://storch.watch/2022/07/11/der-storch-ist-online/

I’d like the comment form style to behave like the contact form stlye:
https://storch.watch/kontakt/

Thank you very much. This is a great Plugin. Everything works as expected.

For the sake of completeness:
I modified the script so it creates an img-element inside the div id=”random_header_image” – element.
The code looks now:

<script>
window.onload = function () {
	var elem = document.createElement("img");
	elem.setAttribute("id", "random_header_img");
    var pictures = new Array('https://storch.watch/wp-content/uploads/2022/06/header_edit4_06_500px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_05_500px-scaled.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_04_500px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_03_500px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_02_500px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_500px-scaled.jpg');
    var numPics = pictures.length;
    if (document.images) {
        var chosenPic = Math.floor((Math.random() * numPics));
		elem.setAttribute("src", pictures[chosenPic]);
		document.getElementById('random_header_image').appendChild(elem);
    }
}
</script>

Personally I could better treat the img-element in css than editing the div id=”random_header_image” – element as background-image in css and got it to scale as expected and stay centered on all devices.

This is my css:

css of surrounding div with id “random_header_image”:

#random_header_image {
	justify-content: center;
	align-items: center;
	padding: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	display: block;
	height: 400px;
	margin-left: calc(-1 * var(--wp--custom--spacing--outer)) !important;
	margin-right: calc(-1 * var(--wp--custom--spacing--outer)) !important;
}

css of img-element with id “random_header_img”:

#random_header_img {       
	object-fit: cover;
	display: flex;
      justify-content: center; 
      align-items: center;
	width: 100%; 
	height: 400px;
	padding: 0 !important;
	animation: fadeIn ease 4s;
	-webkit-animation: fadeIn ease 4s;
	-moz-animation: fadeIn ease 4s;
	-o-animation: fadeIn ease 4s;
	-ms-animation: fadeIn ease 4s;
}

• This reply was modified 2 years, 4 months ago by krischan941.

This one got solved. You can read the solution here: https://www.ads-software.com/support/topic/submenus-dont-work-anymore-2/#post-15853494

• This reply was modified 2 years, 4 months ago by krischan941.

Thank you very much!

You’re right, I must have accidentally clicked in Gutenberg Editor in the “radius” fieldbox of my surrounding element to create a “0” (because you can click and drag to generate values).

If I zoom in or resize the browser window to get a little bit of a stacked normal menu view I get this result:

Weird submenu behaviour

• This reply was modified 2 years, 4 months ago by krischan941.
• This reply was modified 2 years, 4 months ago by krischan941.

Thanks for the hint. I played around and got it to work! The actual script:

<script>
window.onload = function () {
    var header = document.getElementById('random_header_image');
    var pictures = new Array('https://storch.watch/wp-content/uploads/2022/06/header_random_edit4_06_400px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_random_edit4_05.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_04_500px-scaled.jpg','https://storch.watch/wp-content/uploads/2022/06/header_edit4_03_500px-scaled.jpg','https://storch.watch/wp-content/uploads/2022/06/header_random_edit4_02_400px.jpg','https://storch.watch/wp-content/uploads/2022/06/header_random_edit4_400px.jpg');
    var numPics = pictures.length;
    if (document.images) {
        var chosenPic = Math.floor((Math.random() * numPics));
        header.style.background = 'url(' + pictures[chosenPic] + ')';
    }
}
</script>

There was a typo in “getElementByClassName” which is correct “getElementsByClassName”. But that doesn’t work either. You need to take “getElementById”.
So I went to the Editor, deleted the cover block, created a custom html block

<div id="random_header_image"></div>

and customized the css

#random_header_image {
	background-attachment: fixed;       
    webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
	background-position: center center;
	background-repeat: repeat-x;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1em;
	box-sizing: border-box;
	min-height: 400px;
}

Now it works as expected except on mobile phones, the images don’t scale. Have you an idea how to solve that? Thank you

• This reply was modified 2 years, 5 months ago by Yui.
• This reply was modified 2 years, 5 months ago by Yui. Reason: formatting
• This reply was modified 2 years, 5 months ago by krischan941.
• This reply was modified 2 years, 5 months ago by krischan941.

Ok I did. Now I don’t need my 2 submenus in class “wp-block-navigation-link” anymore. It works without and my 4 submenu items look somehow nicer. Thanks!
But now when clicking menu items on mobile devices in >hamburger menu< they stay invisible except the 4 submenu items. If I turn my phone 90 degrees so it turns my display view, too I see the full navigation (no hamburger menu) and this works fine.

Thank you for your answer but I’d like to stay with Twenty Twenty Two if possible, I got used to it and really like it after spending time with it. It is my first WordPress Project so I don’t know any other Themes.

Thank you very much, again. After carefully reading again, yes your quotation was the problem for the two items in submenu “Bildungsangebote”. And I missed the !important statements in the css file too. My css now is:

.wp-block-navigation-item.current-menu-item.wp-block-navigation-link {
	text-decoration: underline; 
	text-decoration-style: solid; 
	text-decoration-color: #f6f6f6 !important;
	color: #f6f6f6 !important;
	background-color: #c27113 !important;
}

This however didn’t solve the problem for submenu-items “Wittgensdorfer St?rche” and “Bildungsangebote” when clicking themeselves. Or at least I couldn’t find an option to convert them to single-page links too. I circumvent this by adding the two items to class “wp-block-navigation-link”.

Now on mobile devices when clicking on one of the submenus it marks the whole submenu including it’s items. Any idea how to prevent this?
However my initial issue is solved, thanks again.

• This reply was modified 2 years, 5 months ago by krischan941.
• This reply was modified 2 years, 5 months ago by krischan941.
• This reply was modified 2 years, 5 months ago by krischan941.

resolved