Res2

Hi MrYawn

It’s an interesting code, and thank you for presenting it, but which file should I add it to? Do you know?
Thing is, it should only appear on the top of the post index.
I’m having trouble locating it in the php files…

I’ve made a child theme before making any adjustments, and would of course copy any file to it, that I wished to make lasting changes to.

In other words: all the other pages have their titles and written texts appear – why not the page with the post index, too?

I’d like to make a few static comments on that page, before the list begins. Where or how might I make such comments appear before the ul index begins?

I still wish to make use of raindrops-mobile-menu but I do not know how to.

Where, in which php file, should I add the ul with my menu points, in order to make that ul appear in the mobile menu, when it is activated?

For now, the mobile menu (which appears on small screens with width<641 px) is empty, except for a placeholder word: ‘menu’.
Unfortunately, it seems that the place (in functions.php) where it says ‘menu’ cannot contain a ul properly (since it becomes permanently visible which is not the idea of having the mobile menu), so that is apparently not the right place for it…

Hi nobita

no, that is not what I wish for.
Instead, I’d like to remove the horizontal menu on 641+ screens
by placing it in raindrops-mobile-menu.

How is this done?
I can find no interface for the mobile menu anywhere.

Thanks, nobita! This looks a lot nicer! ??
And it solves number (2) of my small screens issues.

I’m still trying to figure out how to put my horizontal menu links (presently colored purple for ease of reference) under the mobile menu wrapper…? (My number 1 issue on the list.)
I expect it will have to be added to some php file, right?
Somewhere in the header, perhaps?

And is there some way to specify the sidebar styling separately for the small screens format, without interfering with the big screens styling?

all the best

In regards to (1), I’ve added this code to functions.php, to serve up some menu points:
<ul class="mobilmenu"><li><a class="mobilmenu" href="https://gestaltudvikling.dk">Forside</a></li><li><a class="mobilmenu" href="https://gestaltudvikling.dk/metoder">Metoder</a></li><li><a class="mobilmenu" href="https://gestaltudvikling.dk/problemtyper">Problemtyper</a></li><li><a class="mobilmenu" href="https://gestaltudvikling.dk/priser">Priser</a></li><li><a class="mobilmenu" href="https://gestaltudvikling.dk/artikler">Artikler</a></li><li><a class="mobilmenu" href="https://gestaltudvikling.dk/kontakt">Kontakt</a></li></ul>

There are a few crucial problems with this solution, though:
(1) a
The entire code addition will be automatically deleted once the theme is updated.

(1) b
This menu doesn’t collapse above 640px screens, like it should.
I don’t know how to correct that.

Regarding (1) I’ve located the mobile menu in functions.php, but I hesitate to modify it at this point for two reasons:
First, whatever I alter there (links and menu points added) will be overwritten first time the theme is updated.
Second, it seems that there must be another way to modify this menu, than relying on my own coding ignorance to go bumping through something as vital as the functions.php of (the parent theme) Raindrops?

Any advice on how to proceed?

I’ve found a solution for this question elsewhere.

For the record, it can be done this way: In wp’s Edit post/page, choose the text mode and then frame the WORD you want to give an info popup in this manner:
<a>WORD<span>the info content you wish</span></a>

In your child style.css, you can use this template
First, we need to hide the info content:
'Appropriate div adress of the word you've given a popup link' a span {display: none;}

Then, we set the popup location and style. For example:

'Appropriate div adress of the word you've given a popup link' a:hover span{
	display: block;
	position: absolute;
	top: inherit;
	left: inherit;
	width: 125px;
	padding: 5px;
	margin: 10px;
	z-index: 100;
	color: #AAA; background: black;
	font: 10px Verdana, sans-serif;
	text-align: center;
}

Finally, you might want to style these info popups in a particular way, so that they might be recognized as different from ordinary links, for example:

a.popup{
	color: #833022;
	font-weight: bold;
}

An example of an alternate css template for popup location:

[aproppriate adress of the popable word(s)] a:hover span{
	display: block;
	position: absolute;
	top: 200px;
	left: 200px;
	width: 125px;
	padding: 5px;
	margin: 10px;
	z-index: 100;
	color: #AAA; background: black;
	font: 10px Verdana, sans-serif;
	text-align: center;
}

modify as you like. Cheers

Ah! That works! ??

Many thanks, nobita!

I’ll probably be back with questions on the small-screen issues mentioned by ygspasov, tomorrow… ??

All the best!

@ygspasov:
ok, yeah, I see what you mean ??
(notably, below 640px would be mobilephone size screens.)
If you take another look, you can see that I’ve corrected at least part of the problem. Using the more appropriate sub- div:
.yui-t2 #yui-main .yui-b for the
margin-left: 180px rule
circumvents my clumsy use of an !important which left the white field hanging, once the mobile sized screen kicked in.

I must admit that (scrolling down on a mobile screen) the default menu coming last still seems rather messy, from an orientation point of view… It might help if the two menus were placed side by side, rather than on top of each other…
I hope I’ll figure out a solution for that later, maybe with nobitas help.
For now, in this thread, my main concern is just to make the header and the #yui-main parts align, without the space between them. ??

@nobita

Ok, thanks. I’ve deleted the @import rule.
I’ve also deleted the padding-bottom: 0px !important of the #top.
It turns out it made no difference, anyhow.
The margin-bottom: -4px !important aims to minimize the margin between top and #yui-main.
I’m presently struggling to nullify this margin between top and yui-main, completely.

@ygspasov
It didn’t solve them all, true enough, but I’ve made some %-corrections to div.yui-u:nth-child(1) (the white field) and div.yui-u:nth-child(2) (the container of the right sidebar) which helped.
Take a look. Better, right?

Thanks nibita… The addition corrected the width.

I’m still having trouble with correcting the height, though.

ok, thanks!

I’ve discovered something weird:
Under inspect element, it is possible to correct the margin-bottom of the header, but any kind of stylesheet correction of the same, is neglected.

The freaky effect is that before you correct the stylesheet with -4px, you can correct it in the inspect element presentation of the page. After you’ve corrected it in the stylesheet, the correction will appear under inspect element, but now you need to add -4 to the margin-bottom (making it -8) in order to align the bottom of the header, and so forth… ??

I can only assume that the stylesheet correction is being overruled by some sort of php code?

I have one problem which occurred after the code applied here, though:

The header image (which is 1200×139) does not fill out the top
(#top) which has become 1280×143…

Can you help me on how to get the header image to fill out the top, so that it matches the doc3 part of the theme?

(also, the max-height: 100% and max-width: 100% seem to serve no function, for now, but that is less important than correcting the size of the banner image to fit the rest of the page.)

Ah, ok!

I’ve changed the header back to the original, and your added code to the (otherwise empty) functions.php in my child-theme is now functional! ??

Much obliged! Thank you!