Multiple browsers test (small)
Multiple browsers test (large)
Html codes for quotations and other symbols
Positioning (relative, absolute)
CSS transparent hover (sticky) header
JQuery multi-level slide accordion
Expand a div to take the remaining width
CSS thicker fonts / text-shadow
Height:auto (needs overflow:hidden)
CSS crop an image in the center (demo)
Style links depending on destination
Apply styles to just single, archive, page, home
Adding Disqus comments with functions and a shortcode
Making RSS mix feeds: How to from YouTube RSSMix RSSFeedWidget
Facebook comments: use plugin, grab app code from Facebook developers app (not sure if necessary), uncheck “every page” add the php, remove the website from within the double-quotation marks but leave the double-quotation marks
How to Create an Advanced Twitter Widget
Display Recent Tweets in WordPress with Twitter Widgets
Jason Mayes’ Twitter-Post-Fetcher
Nerijusgood’s Twitter custom widgets
Embedded tweet box (basic)
Display Most Popular Posts by Views in WordPress without a Plugin
Android app tutorial: YouTube playlist: TheNewBoston
Quick reference
Colors:
Transparent: #00ffffff (ie add two zeros to the 6-digit color code)
CSS backgrounds:
background-image: url(“images/starsolid.gif”);
External CSS backgrounds:
background: url(“http://example.com/background.jpg”);
CSS content (about)
content: “!”;
.csstarget:after {content: url(http://domain.com/permalink.png)}
CSS opacity:
Opacity has a default initial value of 1 (100% opaque). opacity: 0.2 is more transparent than 0.9.
Important:
color: red !important;
Commenting
<!- – This is an html comment – ->
// This is a one-line CSS comment
/*
This is a multi-line CSS comment
*/
// This is a one-line php comment
/*
This is a multi-line php comment
*/
@media
@media screen and (min-width: 480px)
!important
color: red !important;
Box shadow
box-shadow: 10px 10px 5px #888888;
Circle border radius
border-radius: 50%; (use not-percentages for Safari <5.1)
Font-weight
font-weight: 900;
Target
<a href=“https://thespeakernewsjournal.com/coding-resources/” target=“_blank”>Visible text</a>
Internal link styles
a.internal{}
Debug ghost CSS (source)
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
Prevent website content being shared to Pinterest (source):
In head: <meta name=”pinterest” content=”nopin” />
Or, to customize: <meta name = “pinterest” content = “nopin” description = “Sorry, you can’t save from my website!” />
https://www.youtube.com/feeds/videos.xml?channel_id=CHANNELIDhttps://www.youtube.com/feeds/videos.xml?user=USERNAMEhttps://www.youtube.com/feeds/videos.xml?playlist_id=YOUR_YOUTUBE_PLAYLIST_NUMBER
WordPress blog title shared to social media problem. Same problem as here. Solution (temporary until can find proper code): Install Yoast SEO and edit Search Appearance: Content Types: Posts so it reads %%title%% You can check the sharing title in the editor for any post in the Yoast SEO box.
Yoast causes image link problems. Remove Yoast. And do this inside the head section (fix the quote marks):
<title><?php the_title(); ?></title>
<meta name=”description” content=”.”/>
<div style=”display:none;”>
<meta property=”og:image” content=”<?php hitmag_single_post_thumbnail(); ?>” >
<meta name=”twitter:image” content=”<?php hitmag_single_post_thumbnail(); ?>” >
</div>
If it still doesn’t work the theme might be doing something (https://wordpress.stackexchange.com/questions/95147/remove-site-name-from-title-tag)
try adding this to the theme:
function wp_abdul0201_wp_title( $title ) {
if ( is_single() ) {
$title = single_post_title( '', false );
}
return $title;
}
add_filter( 'pre_get_document_title', 'wp_abdul0201_wp_title' );ie problems? Check …
- seems to be OK with absolute, but doesn’t do well with fixed
CSS coding resources (guy suggested when I was coding Arbol 50 words: https://www.w3schools.com/cssref/css_selectors.asp