a thoughtful use of digital
If you want, for example, delete all styles tag within several html in an epub file, keeping only the stylesheet linked in them, you can use this command:
<style type="text/css">(.|\n)*?<\/style>
Calibre editor in this case is better than Sigil, for epub files.
Today I managed to replace (in html file links and anchors) absolute paths with relative ones.
I needed to keep the anchors and links number.
I did so:
search: href="#_ftn([0-9])">
replace: href="#_ftnref\1" id="_ftn\1">
In this way href=”#_ftn1 was replaced by href="#_ftnref1" id="_ftn1", href=”#_ftn2 was replaced by href="#_ftnref2" id="_ftn2", and so on.
For numbers with two digits
search: href="#_ftn([0-9][0-9])">
replace: href="#_ftnref\1" id="_ftn\1">
Only the search string is to be modified, if you have more digits (f.e. [0-9][0-9][0-9][0-9] if you have numbers with four digits, such as 1276), not the replace one (so don’t write \1\1).
To replace digits within brackets you have to escape the brackets with ‘\’, thus: ‘\(‘, or ‘\[‘. For example, if you plan to convert every ‘(some digits) ‘ with ‘</p><p>(some digits)’, you should use this code:
find: \(([0-9])\)
replace: </p><p>(\1)First of all backup your database follwing these insctructions.
wp-includes and wp-admin directories on your web host (through your FTPor shell access).wp-includes and wp-admin directories to your web host, in place of the previously deleted directories.wp-content folder to your existing wp-content folder, overwriting existing files. Do NOT delete your existing wp-content folder. Do NOT delete any files or folders in your existing wp-content directory (except for the one being overwritten by new files).NOTE – you should replace all the old WordPress files with the new ones in the wp-includes and wp-admin directories and sub-directories, and in the root directory (such as index.php, wp-login.php and so on). Don’t worry – your wp-config.php will be safe.
Be careful when you come to copying the wp-content directory. You should make sure that you only copy the files from inside this directory, rather than replacing your entire wp-content directory. This is where your themes and plugins live, so you will want to keep them. If you have customized the default or classic themes without renaming them, make sure not to overwrite those files, otherwise you will lose your changes. (Though you might want to compare them for new features or fixes..)
Lastly you should take a look at the wp-config-sample.php file, to see if any new settings have been introduced that you might want to add to your own wp-config.php.
More details here.
Today I noticed that if I write [b]BEGIN[/b] in a row that row is the beginning of a collapsable section, until a row with [b]END[/b].
F.e. /* — BEGIN common tags — / as beginnning and / — END common tags — */ as end.
And I can have nested collpsable sections, even in an html file ( , f. e.)
A good, simple and free, website is ImageMap Generator, but you have to save your code after defining 3 or 4 map areas, otherwise the code will result wrong.
All browsers have this limitation: they not allow to show an svg with an external image embedded, such as
<image x="2" y="2" width="somewidth" height="someheight" xlink:href="myimage.jpg">even though the image is in local.
For security reasons.
We managed to add an image map to the on-click expansible image.
This is the code:
<style type="text/css">
img[usemap] { zoom: 12%;}
img[usemap]:focus {zoom: 50%;}
</style>
<map name="mymap">
<area shape="rect" coords="1294,253,1420,434" title="mount" />
<area shape="rect" coords="1709,296,1835,477" title="tree" />
</map>
<img tabindex="0" src="path-to/myimage" usemap="#mymap" />
The problem is that to close the expansed image you must click either on a map area or outside the image.
We were looking for the simplest possible solution to enlarge an image on click, without javascript and with the least amount of code possible.
At first we found the pseudo-class focus as a solution: with this css code img:focus and in html (inside the img tag) tabindex="0".
In this way, the image expanded on click, but to make it return to the initial size, it was necessary to click outside the enlarged image. As in the following example:
Therefore we had to add other code, so that we could return to the original, small, size, clicking inside the image. We had to use the input tag.
This is the result:
This is the code:
<style type="text/css">
input:checked + label > img {max-width: 200px; transform:scale(1.0); left: 0px;}
input {display: none;}
img {
max-width: 200px;
transition: all 1s;
transition:transform 0.25s ease;
}
img:focus {
max-width: none;
transform:scale(2.8);
position: relative;
left: 5%;
outline:0;
}
</style>
<p>This the result:</p>
<input type="checkbox" checked id="myimage" />
<label for="myimage">
<img tabindex="0" src="path-to-my-image/myimage.jpg" width="200px" />
</label>We speak about this new feature in another article.
The child element of a flexbox may not obey to the css property min-height. Therefore you should use this code in the parent element: min-height: 100vh.
Otherwise the child element, f.e. the main div of a web page with few content, could end before the end of the page, in an inelegant way.
The width of a child element as well may not work as expected (and as it would do without flex). Therefore you should explicitly state the width of a child element within a flexbox.
Otherwise a web page (with few text, i.g.) could have a width considerably narrower that expected.
It is quite easy automatically alternate a (image) banner in a webpage with javascript. But if you want alternate automatically a complex text it is not so easy.
First of all you have to know that is not possible use php, because the “duty” of php ends with the “production” of a page, and it is not usable to change something in a page alrealdy “made”.
Therefore, the only way is javascript. I found a js to change automatically images (every x time) and I modified it according to my needs.
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slideIndex++; if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
// slides[slideIndex-1].style.display = "block";
// slides[slideIndex-1].className = slides[i].className.replace(" visible", "");
slides[slideIndex-1].style.display = "flex";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 4000); // Change image every 4 seconds
}
Afterward I was able to use, within the html proposed a php code, as in the following
$ads_verticale_dx="<code><p class=\"mySlides fade\"><span class=\"numbertext\">1 / 3</span><img src=\"someimage.jpg\" width=\"100px\" /><br />some <b>text</b> with<br /> <a rel=\"external\" href=\"somelink/\">some link</a></p>
<p class=\"mySlides fade\"><span class=\"numbertext\">2 / 3</span><img src=\"someotherimage.jpg\" width=\"100px\" /><br />some other <b>text</b> with a<br />
<a rel=\"external\" href=\"somelink/\">some other link</a></p>
<div style=\"text-align:center\"><span class=\"dot\"></span><span class=\"dot\"></span><span class=\"dot\"></span></div>
And this is the css to add
.mySlides {display: none;
}
/* Slideshow container */
.slideshow-container { vertical-align: middle;
}
/* Caption text */
.text {
display: none;
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
visibility: hidden;
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: none;
transition: background-color 0.6s ease;
}
.active {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.text {font-size: 11px}
}Last problem: how load the javascript. You can put it within the body, and this way it works without proiblems, but is a quite ugly solution. The best way is tu put the script within the head, or in a linked js file with all the other scripts, and then do (wihin the body tag) the command onLoad=”showSlides();”. But doing so, some browser, such as Chrome, could not understand the command. To fix this issue, be sure to use the correct case (onLoad, not onload) and try to delete the browser cache. This way you should force Chrome to recognize the script.
It works!