Typography's and Writing Format for : LayZee UI Theme
Template Updated on : Jan 1, 2023
Download button (Timer)
https://blogkaily.blogspot.com
Notes
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et.
Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra.
Table of content (Semi-Automatic)
Table of Contents
Spoiler
Spoiler:
Your_text_is_here.
Accordion
Title_is_here
Your_text_is_here.
Title_is_here (alt)
Your_text_is_here.
Image with Caption and Auto Lightbox
 |
| All images in the article will automatically have a lightbox function except the images in the |
Grid Images
Image with Show All Function
Image with Scroll Layout
Paragraph with Text Indent
This feature is used to make the first line of a paragraph indent with a predetermined value. You can also apply it to several other paragraphs.
Paragraph with Drop Cap
A large capital letter used as decorative element in the first paragraph, the size is usually two lines or more.
Drop cap will resize the first letter so that it drops one or more lines down. Many types of media print use drop caps such as books, magazines, newspapers and others because they can add visual appeal.
Manual Related Post
You may want to read this post :
Post Break
blockquote Style-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus.
blockquote Style-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
- Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum.
- Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.
Social Blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus.
Table
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
-
white-space:nowrap;specifies the text to be a single line, it will not wrap to the next line and will continue untilbrtag is encountered min-width:100%;defines the minimum width of table, you can change it to px for example500px. Change it to0if you want the table width to be determined automatically.
Syntax Highlighter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>- Change classname
html to define another code format, there are 3 options available, namely:html ,css , andjs . - Value
white-space:pre-wrap;useful for disabling side scrolling, long code will be preserved and give a little scrolling function to keep it legible. max-height:none;defines the maximum height of syntax isn't set (automatic), change the value ofnoneto eg400pxto specify the maximum height of syntax is only 400 pixels.- Use
<i class='red'>code_here</i> to add red/orage color. - Use
<i class='blue'>code_here</i> to add blue color. - Use
<i class='green'>code_here</i> to add green color. - Use
<i class='gray'>code_here</i> to add gray color. - Use
<i class='block'>code_here</i> to add a block of blue color.
Multi Tab Syntax Highlighter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>/* Standar CSS */
::selection{color:#fff;background:var(--linkC)}
*, ::after, ::before{-webkit-box-sizing:border-box;box-sizing:border-box}
h1, h2, h3, h4, h5, h6{margin:0;font-weight:700;font-family:var(--fontH);color:var(--headC)}
h1{font-size:1.9rem}
h2{font-size:1.7rem}
h3{font-size:1.5rem}
h4{font-size:1.4rem}
h5{font-size:1.3rem}
h6{font-size:1.2rem}
a{color:var(--linkC);text-decoration:none}
a:hover{opacity:.9;transition:opacity .1s}{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "https://www.kaily.in/",
"name": "LayZee UI",
"alternateName": "LayZee UI",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.kaily.in/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}Multi Functional Syntax Highlighter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>Lazy YouTube
External Link
Click hereInternal Link
Click hereButton Link
Title_linkOr
Title_link
2 button in single line
Credit line
Credit:
www.kaily.in
Auto Chapter
now automatic!
