Category: css

Last updated date in WordPress

Posted on by Bian Xi Leave a Comment on Last updated date in WordPress

Last updated date in WordPress

There are a few methods to display last updated in WordPress

Change post date to last updated date

But default, post date is published date, if like to change it to last updated date, add additional CSS as below.

/* for post modified */
.entry-date.published { display: none; }
.updated:not(.published) { display: inline-block; }

/* for post that never been modified, theme uses .updated */
.entry-date.published.updated { display: inline-block; }

Change functions.php

function my_last_updated_date( $content ) {
    $u_time = get_the_time('U');
    $u_modified_time = get_the_modified_time('U');

    if ($u_modified_time >= $u_time + 86400) {
        $updated_date = get_the_modified_time('F jS, Y');
        $updated_time = get_the_modified_time('h:i a');
        $custom_content .= '<p class="last-updated entry-meta">Last updated on '. $updated_date . ' at '. $updated_time .'</p>';
    }

    $custom_content .= $content;
    return $custom_content;
}
add_filter( 'the_content', 'my_last_updated_date' );

Change template-tags.php

This is the PHP way to modify the code to display dates.

References

How to replace published date?

Bootstrap source map missing

Posted on by Bian Xi Leave a Comment on Bootstrap source map missing

Bootstrap source map missing

Description

When open web developement tools in web browser, followning error could appear.

Source map error: request failed with status 404
Resource URL: https://domainname.com/.../bootstrap.css?ver=4.4.1
Source Map URL: bootstrap.css.map

Fixes

Method 1

This file can be download from bootstrap web page Bootstrap v4.4.1, and put it into same folder as bootstrap.css.

Method 2

Remove comments like /# sourceMappingURL=bootstrap.min.css.map / in bootstrap.min.css, bootstrap.min.js.

Reason

Source map files are generated automatically during files minification/compiling process, and they are not needed for the production.

CSS Selectors

Posted on by Bian Xi Leave a Comment on CSS Selectors

CSS Selectors

To select DOM elements in CSS using selector.

Tag Selector

a {
  color: black;
}

h1 {
  font-size 24px;
}

Single selector

Selector Description
article Selects the element with the article tag
.post Selects all elements with the post class
#nav Selects the elements with the nav Id
div.row Selects all elements with the div tag and the row class
[hidden="true"] Selects all elements with the hidden attribute with a value of true

Note: Wildcard selector can be used to select all DOM elements.

Combine selector

Selector Description
div li DOM descendant combinator. All li tags that are a child of div tags
div.row * Selects all elements that are descendant (or child) of the elements with div tag and row class
div > li Difference combinator. Select direct descendants
div + li the adjacent combinator. It selects the element that is immediately preceded by the former element. In this case, only the first li after each div.
div, li Selects all li elements and all div elements.
div - li The sibling combinator. Selects li element following a div element.

Pseudo-selectors

Position of an element

Selector Description
:first-child Target the first element immediately inside (or child of) another element
:last-child Target the last element immediately inside (or child of) another element
:nth-child() Target the nth element immediately inside (or child of) another element. Admits integers, even, odd, or formulas
div:not(.name) Selects all div elements that are not of the .name class
::after Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads after HTML elements.
::before Allows inserting content onto a page from CSS, instead of HTML. While the end result is not actually in the DOM, it appears on the page as if it is. This content loads before HTML elements.

State of an element

Selector Description
:hover selects an element that is being hovered by a mouse pointer
:focus selects an element receiving focus from the keyboard or programattially
:active selects an element being clicked by a mouse pointer
:link selects all links that have not been clicked yet
:visited selects a link that has already been clicked

Example

The :nth-child can use pattern, such as odd, even, An+B

a:nth-child(3n) {
  /* Css goes here */
}