Widgets

Examples of HTML elements. This should not be confused with the “widget area” that is at the bottom of each page and contains the “Search box”, “Recent posts” etc.

Examples of buttons.

The theme does not provide for special hovering effects. The button “Nosco” has a customized style (class ‘button1’): the button gets blue when the mouse is hovering over it. The following customization works in TwentyTwentyOne and in Astra themes.

.wp-block-button.button1 .wp-block-button__link:hover,
.wp-block-button.button1 .wp-block-button__link:active,
.wp-block-button.button1 .wp-block-button__link:focus {
	background: #99ddff!important;
	color: #fff !important;
	border-color: transparent !important;
}

Unfortunately, this effect is not shown during the editing of the page.

Table with input field and Javascript / JQuery

Input:
var $J = jQuery.noConflict();

function js_copy(in_id, out_id) {
	let input = document.getElementById(in_id);
	let output = document.getElementById(out_id);
	output.innerHTML = input.value;
}

function jq_copy(in_id, out_id) {
	let $input = jQuery("#" + in_id);	// method 1
	let $output = $J("#" + out_id);		// method 2: alias
	$output.html($input.val());
}

The Astra theme claims not to be using jQuery. But jQuery is available as you can verify with the widget above.

Remark: the table above is inserted using HTML code.

Directly included image

Paris

PDF

PDF files are usually uploaded to the Media Library. Inserting a file from the Media Library gives the following block with the PDF file in a desktop browser. Browsers on a mobile device do not show anything.

A simple link to the PDF file is inserted using standard ways of link creation. The URL of the media file is obtained by opening the Media Library, selecting the file and pressing “Copy URL to clipboard”. The URL can then be pasted anywhere, e.g. here: Linear Optimization with Simplex Method.

Leave a Comment

Your email address will not be published.