BranchesTags

Repository files navigation

Bricks

Setup dùng Style Manager là chính, tận dụng các global font, variables, classes.

Design

Màu sắc

Accent: #ff0000 Gradient: background: linear-gradient(180deg, #E0BE88 0%, #755627 100%);

Font

Font toàn trang là Play (Google Fonts).

Cách setup:

  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Font Manager
  • Chọn Google Fonts > tìm font Play > Add to Favorites
  • Sau đó vào admin > Bricks > Settings > Builder > Control panel, phần Font family: Options chọn Show favorites only để khi edit các element thì chỉ cho phép chọn các font favorite thôi (để tránh chọn nhiều font trên web).

Cách setup font cho các element:

  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Style Manager > Tạo 1 style là DongA
  • Chỉnh sửa các style cho body, h1, h2, ...

Elements

Setup chung trong Style Manager: Edit 1 page bất kỳ (trang chủ) > Click icon Settings > Style Manager

  • Button

Class chung

.text-gradient: chữ màu đồng gradient .section-border: có border gradient cuối section .bg-gradient: background màu đồng gradient .image-zoom: zoom ảnh khi hover. Dùng cho wrapper. Nếu dùng trực tiếp cho ảnh thì set HTML tag của ảnh là figure. .center-x: căn giữa theo chiều ngang .slide-arrows: để style 2 nút prev/next của slider .border-gradient: làm border gradient màu đồng

Bricks

Settings:

  • Disable Bricks Open Graph meta tags
  • Disable Bricks SEO meta tags
  • Disable "Skip links"
  • Smooth scroll (CSS)

Notes

  • LƯU Ý QUAN TRỌNG: cần dùng đúng các elements sau:
    • section: dùng cho các
      (semantic), như ở trang chủ
    • block: tương đương với flex wrapper, dùng cho các block nhỏ
    • div: thẻ div thường
    • container: có container width cho content
  • Đối với slider, phân biệt các element sau:
    • Slider: bản cũ, không nên dùng vì tuỳ biến ít
    • Carousel: cũng khó tuỳ biến các element bên trong
    • Slider (nested): nên dùng, cho phép thêm các element bên trong dễ dàng => đang dùng cho trang chủ => không cần dùng custom slider (slick) nữa
  • Social icons: ở trong footer, dùng element button + svg
  • Header: CSS và JS cho toggle menu đều để ở trong element Code (button open menu) trong template Header.
  • Background cho body: để trong Bricks > Settings > Custom Code để được apply khi dùng builder. Nếu cho vào trong theme CSS thì sẽ không xem được khi build.
  • Theme bỏ hết các custom CSS thừa đi (Bamboo, SASS) vì viết vô tội vạ. Các custom CSS trước đây viết trong Customizer cũng bị bỏ đi. Hiện chỉ cần 1 ít CSS nhỏ cho .font-light thì đang để trong Bricks > Settings > Custom Code cho tiện, và không cần enqueue style của theme nữa.
  • Một số block dùng đi dùng lại thì tạo thành component (có màu tím). Trong site này có Header logo, quote open/close, danh sách công ty thành viên, đối tác, ...

Chỉnh sửa khác so với design:

Do design setup cho màn 1920, nên khi xem trên laptop sẽ thấy to. Do đó sửa lại code cho phù hợp hơn (nhỏ đi). Cụ thể:

  • Container: 1440px => 1110px (mặc định của Bricks)
  • Body: 20px => 16px
  • h1 (trên banner): 64px => 48px
  • h2 (title section, gradient): 48px => 36px
  • h3 (tên công ty con): 36px => 24px

About

No description, website, or topics provided.

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Bricks
Setup dùng Style Manager là chính, tận dụng các global font, variables, classes.
Design
Màu sắc
Accent: #ff0000
Gradient: background: linear-gradient(180deg, #E0BE88 0%, #755627 100%);
Font
Font toàn trang là Play (Google Fonts).
Cách setup:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Font Manager
  • Chọn Google Fonts > tìm font Play > Add to Favorites
  • Sau đó vào admin > Bricks > Settings > Builder > Control panel, phần Font family: Options chọn Show favorites only để khi edit các element thì chỉ cho phép chọn các font favorite thôi (để tránh chọn nhiều font trên web).
Cách setup font cho các element:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Style Manager > Tạo 1 style là DongA
  • Chỉnh sửa các style cho body, h1, h2, ...
Elements
Setup chung trong Style Manager: Edit 1 page bất kỳ (trang chủ) > Click icon Settings > Style Manager
  • Button
Class chung
.text-gradient: chữ màu đồng gradient
.section-border: có border gradient cuối section
.bg-gradient: background màu đồng gradient
.image-zoom: zoom ảnh khi hover. Dùng cho wrapper. Nếu dùng trực tiếp cho ảnh thì set HTML tag của ảnh là figure.
.center-x: căn giữa theo chiều ngang
.slide-arrows: để style 2 nút prev/next của slider
.border-gradient: làm border gradient màu đồng
Bricks
Settings:
  • Disable Bricks Open Graph meta tags
  • Disable Bricks SEO meta tags
  • Disable "Skip links"
  • Smooth scroll (CSS)
Notes
  • LƯU Ý QUAN TRỌNG: cần dùng đúng các elements sau:

    • section: dùng cho các 
       (semantic), như ở trang chủ
    • block: tương đương với flex wrapper, dùng cho các block nhỏ
    • div: thẻ div thường
    • container: có container width cho content
  • Đối với slider, phân biệt các element sau:

    • Slider: bản cũ, không nên dùng vì tuỳ biến ít
    • Carousel: cũng khó tuỳ biến các element bên trong
    • Slider (nested): nên dùng, cho phép thêm các element bên trong dễ dàng => đang dùng cho trang chủ => không cần dùng custom slider (slick) nữa
  • Social icons: ở trong footer, dùng element button + svg
  • Header: CSS và JS cho toggle menu đều để ở trong element Code (button open menu) trong template Header.
  • Background cho body: để trong Bricks > Settings > Custom Code để được apply khi dùng builder. Nếu cho vào trong theme CSS thì sẽ không xem được khi build.
  • Theme bỏ hết các custom CSS thừa đi (Bamboo, SASS) vì viết vô tội vạ. Các custom CSS trước đây viết trong Customizer cũng bị bỏ đi. Hiện chỉ cần 1 ít CSS nhỏ cho .font-light thì đang để trong Bricks > Settings > Custom Code cho tiện, và không cần enqueue style của theme nữa.
  • Một số block dùng đi dùng lại thì tạo thành component (có màu tím). Trong site này có Header logo, quote open/close, danh sách công ty thành viên, đối tác, ...
Chỉnh sửa khác so với design:
Do design setup cho màn 1920, nên khi xem trên laptop sẽ thấy to. Do đó sửa lại code cho phù hợp hơn (nhỏ đi). Cụ thể:
  • Container: 1440px => 1110px (mặc định của Bricks)
  • Body: 20px => 16px
  • h1 (trên banner): 64px => 48px
  • h2 (title section, gradient): 48px => 36px
  • h3 (tên công ty con): 36px => 24px
About
No description, website, or topics provided.
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Bricks
Setup dùng Style Manager là chính, tận dụng các global font, variables, classes.
Design
Màu sắc
Accent: #ff0000
Gradient: background: linear-gradient(180deg, #E0BE88 0%, #755627 100%);
Font
Font toàn trang là Play (Google Fonts).
Cách setup:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Font Manager
  • Chọn Google Fonts > tìm font Play > Add to Favorites
  • Sau đó vào admin > Bricks > Settings > Builder > Control panel, phần Font family: Options chọn Show favorites only để khi edit các element thì chỉ cho phép chọn các font favorite thôi (để tránh chọn nhiều font trên web).
Cách setup font cho các element:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Style Manager > Tạo 1 style là DongA
  • Chỉnh sửa các style cho body, h1, h2, ...
Elements
Setup chung trong Style Manager: Edit 1 page bất kỳ (trang chủ) > Click icon Settings > Style Manager
  • Button
Class chung
.text-gradient: chữ màu đồng gradient
.section-border: có border gradient cuối section
.bg-gradient: background màu đồng gradient
.image-zoom: zoom ảnh khi hover. Dùng cho wrapper. Nếu dùng trực tiếp cho ảnh thì set HTML tag của ảnh là figure.
.center-x: căn giữa theo chiều ngang
.slide-arrows: để style 2 nút prev/next của slider
.border-gradient: làm border gradient màu đồng
Bricks
Settings:
  • Disable Bricks Open Graph meta tags
  • Disable Bricks SEO meta tags
  • Disable "Skip links"
  • Smooth scroll (CSS)
Notes
  • LƯU Ý QUAN TRỌNG: cần dùng đúng các elements sau:

    • section: dùng cho các 
       (semantic), như ở trang chủ
    • block: tương đương với flex wrapper, dùng cho các block nhỏ
    • div: thẻ div thường
    • container: có container width cho content
  • Đối với slider, phân biệt các element sau:

    • Slider: bản cũ, không nên dùng vì tuỳ biến ít
    • Carousel: cũng khó tuỳ biến các element bên trong
    • Slider (nested): nên dùng, cho phép thêm các element bên trong dễ dàng => đang dùng cho trang chủ => không cần dùng custom slider (slick) nữa
  • Social icons: ở trong footer, dùng element button + svg
  • Header: CSS và JS cho toggle menu đều để ở trong element Code (button open menu) trong template Header.
  • Background cho body: để trong Bricks > Settings > Custom Code để được apply khi dùng builder. Nếu cho vào trong theme CSS thì sẽ không xem được khi build.
  • Theme bỏ hết các custom CSS thừa đi (Bamboo, SASS) vì viết vô tội vạ. Các custom CSS trước đây viết trong Customizer cũng bị bỏ đi. Hiện chỉ cần 1 ít CSS nhỏ cho .font-light thì đang để trong Bricks > Settings > Custom Code cho tiện, và không cần enqueue style của theme nữa.
  • Một số block dùng đi dùng lại thì tạo thành component (có màu tím). Trong site này có Header logo, quote open/close, danh sách công ty thành viên, đối tác, ...
Chỉnh sửa khác so với design:
Do design setup cho màn 1920, nên khi xem trên laptop sẽ thấy to. Do đó sửa lại code cho phù hợp hơn (nhỏ đi). Cụ thể:
  • Container: 1440px => 1110px (mặc định của Bricks)
  • Body: 20px => 16px
  • h1 (trên banner): 64px => 48px
  • h2 (title section, gradient): 48px => 36px
  • h3 (tên công ty con): 36px => 24px
About
No description, website, or topics provided.
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Bricks
Setup dùng Style Manager là chính, tận dụng các global font, variables, classes.
Design
Màu sắc
Accent: #ff0000
Gradient: background: linear-gradient(180deg, #E0BE88 0%, #755627 100%);
Font
Font toàn trang là Play (Google Fonts).
Cách setup:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Font Manager
  • Chọn Google Fonts > tìm font Play > Add to Favorites
  • Sau đó vào admin > Bricks > Settings > Builder > Control panel, phần Font family: Options chọn Show favorites only để khi edit các element thì chỉ cho phép chọn các font favorite thôi (để tránh chọn nhiều font trên web).
Cách setup font cho các element:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Style Manager > Tạo 1 style là DongA
  • Chỉnh sửa các style cho body, h1, h2, ...
Elements
Setup chung trong Style Manager: Edit 1 page bất kỳ (trang chủ) > Click icon Settings > Style Manager
  • Button
Class chung
.text-gradient: chữ màu đồng gradient
.section-border: có border gradient cuối section
.bg-gradient: background màu đồng gradient
.image-zoom: zoom ảnh khi hover. Dùng cho wrapper. Nếu dùng trực tiếp cho ảnh thì set HTML tag của ảnh là figure.
.center-x: căn giữa theo chiều ngang
.slide-arrows: để style 2 nút prev/next của slider
.border-gradient: làm border gradient màu đồng
Bricks
Settings:
  • Disable Bricks Open Graph meta tags
  • Disable Bricks SEO meta tags
  • Disable "Skip links"
  • Smooth scroll (CSS)
Notes
  • LƯU Ý QUAN TRỌNG: cần dùng đúng các elements sau:

    • section: dùng cho các 
       (semantic), như ở trang chủ
    • block: tương đương với flex wrapper, dùng cho các block nhỏ
    • div: thẻ div thường
    • container: có container width cho content
  • Đối với slider, phân biệt các element sau:

    • Slider: bản cũ, không nên dùng vì tuỳ biến ít
    • Carousel: cũng khó tuỳ biến các element bên trong
    • Slider (nested): nên dùng, cho phép thêm các element bên trong dễ dàng => đang dùng cho trang chủ => không cần dùng custom slider (slick) nữa
  • Social icons: ở trong footer, dùng element button + svg
  • Header: CSS và JS cho toggle menu đều để ở trong element Code (button open menu) trong template Header.
  • Background cho body: để trong Bricks > Settings > Custom Code để được apply khi dùng builder. Nếu cho vào trong theme CSS thì sẽ không xem được khi build.
  • Theme bỏ hết các custom CSS thừa đi (Bamboo, SASS) vì viết vô tội vạ. Các custom CSS trước đây viết trong Customizer cũng bị bỏ đi. Hiện chỉ cần 1 ít CSS nhỏ cho .font-light thì đang để trong Bricks > Settings > Custom Code cho tiện, và không cần enqueue style của theme nữa.
  • Một số block dùng đi dùng lại thì tạo thành component (có màu tím). Trong site này có Header logo, quote open/close, danh sách công ty thành viên, đối tác, ...
Chỉnh sửa khác so với design:
Do design setup cho màn 1920, nên khi xem trên laptop sẽ thấy to. Do đó sửa lại code cho phù hợp hơn (nhỏ đi). Cụ thể:
  • Container: 1440px => 1110px (mặc định của Bricks)
  • Body: 20px => 16px
  • h1 (trên banner): 64px => 48px
  • h2 (title section, gradient): 48px => 36px
  • h3 (tên công ty con): 36px => 24px
About
No description, website, or topics provided.
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
Bricks
Setup dùng Style Manager là chính, tận dụng các global font, variables, classes.
Design
Màu sắc
Accent: #ff0000
Gradient: background: linear-gradient(180deg, #E0BE88 0%, #755627 100%);
Font
Font toàn trang là Play (Google Fonts).
Cách setup:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Font Manager
  • Chọn Google Fonts > tìm font Play > Add to Favorites
  • Sau đó vào admin > Bricks > Settings > Builder > Control panel, phần Font family: Options chọn Show favorites only để khi edit các element thì chỉ cho phép chọn các font favorite thôi (để tránh chọn nhiều font trên web).
Cách setup font cho các element:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Style Manager > Tạo 1 style là DongA
  • Chỉnh sửa các style cho body, h1, h2, ...
Elements
Setup chung trong Style Manager: Edit 1 page bất kỳ (trang chủ) > Click icon Settings > Style Manager
  • Button
Class chung
.text-gradient: chữ màu đồng gradient
.section-border: có border gradient cuối section
.bg-gradient: background màu đồng gradient
.image-zoom: zoom ảnh khi hover. Dùng cho wrapper. Nếu dùng trực tiếp cho ảnh thì set HTML tag của ảnh là figure.
.center-x: căn giữa theo chiều ngang
.slide-arrows: để style 2 nút prev/next của slider
.border-gradient: làm border gradient màu đồng
Bricks
Settings:
  • Disable Bricks Open Graph meta tags
  • Disable Bricks SEO meta tags
  • Disable "Skip links"
  • Smooth scroll (CSS)
Notes
  • LƯU Ý QUAN TRỌNG: cần dùng đúng các elements sau:

    • section: dùng cho các 
       (semantic), như ở trang chủ
    • block: tương đương với flex wrapper, dùng cho các block nhỏ
    • div: thẻ div thường
    • container: có container width cho content
  • Đối với slider, phân biệt các element sau:

    • Slider: bản cũ, không nên dùng vì tuỳ biến ít
    • Carousel: cũng khó tuỳ biến các element bên trong
    • Slider (nested): nên dùng, cho phép thêm các element bên trong dễ dàng => đang dùng cho trang chủ => không cần dùng custom slider (slick) nữa
  • Social icons: ở trong footer, dùng element button + svg
  • Header: CSS và JS cho toggle menu đều để ở trong element Code (button open menu) trong template Header.
  • Background cho body: để trong Bricks > Settings > Custom Code để được apply khi dùng builder. Nếu cho vào trong theme CSS thì sẽ không xem được khi build.
  • Theme bỏ hết các custom CSS thừa đi (Bamboo, SASS) vì viết vô tội vạ. Các custom CSS trước đây viết trong Customizer cũng bị bỏ đi. Hiện chỉ cần 1 ít CSS nhỏ cho .font-light thì đang để trong Bricks > Settings > Custom Code cho tiện, và không cần enqueue style của theme nữa.
  • Một số block dùng đi dùng lại thì tạo thành component (có màu tím). Trong site này có Header logo, quote open/close, danh sách công ty thành viên, đối tác, ...
Chỉnh sửa khác so với design:
Do design setup cho màn 1920, nên khi xem trên laptop sẽ thấy to. Do đó sửa lại code cho phù hợp hơn (nhỏ đi). Cụ thể:
  • Container: 1440px => 1110px (mặc định của Bricks)
  • Body: 20px => 16px
  • h1 (trên banner): 64px => 48px
  • h2 (title section, gradient): 48px => 36px
  • h3 (tên công ty con): 36px => 24px
About
No description, website, or topics provided.
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Bricks
Setup dùng Style Manager là chính, tận dụng các global font, variables, classes.
Design
Màu sắc
Accent: #ff0000
Gradient: background: linear-gradient(180deg, #E0BE88 0%, #755627 100%);
Font
Font toàn trang là Play (Google Fonts).
Cách setup:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Font Manager
  • Chọn Google Fonts > tìm font Play > Add to Favorites
  • Sau đó vào admin > Bricks > Settings > Builder > Control panel, phần Font family: Options chọn Show favorites only để khi edit các element thì chỉ cho phép chọn các font favorite thôi (để tránh chọn nhiều font trên web).
Cách setup font cho các element:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Style Manager > Tạo 1 style là DongA
  • Chỉnh sửa các style cho body, h1, h2, ...
Elements
Setup chung trong Style Manager: Edit 1 page bất kỳ (trang chủ) > Click icon Settings > Style Manager
  • Button
Class chung
.text-gradient: chữ màu đồng gradient
.section-border: có border gradient cuối section
.bg-gradient: background màu đồng gradient
.image-zoom: zoom ảnh khi hover. Dùng cho wrapper. Nếu dùng trực tiếp cho ảnh thì set HTML tag của ảnh là figure.
.center-x: căn giữa theo chiều ngang
.slide-arrows: để style 2 nút prev/next của slider
.border-gradient: làm border gradient màu đồng
Bricks
Settings:
  • Disable Bricks Open Graph meta tags
  • Disable Bricks SEO meta tags
  • Disable "Skip links"
  • Smooth scroll (CSS)
Notes
  • LƯU Ý QUAN TRỌNG: cần dùng đúng các elements sau:

    • section: dùng cho các 
       (semantic), như ở trang chủ
    • block: tương đương với flex wrapper, dùng cho các block nhỏ
    • div: thẻ div thường
    • container: có container width cho content
  • Đối với slider, phân biệt các element sau:

    • Slider: bản cũ, không nên dùng vì tuỳ biến ít
    • Carousel: cũng khó tuỳ biến các element bên trong
    • Slider (nested): nên dùng, cho phép thêm các element bên trong dễ dàng => đang dùng cho trang chủ => không cần dùng custom slider (slick) nữa
  • Social icons: ở trong footer, dùng element button + svg
  • Header: CSS và JS cho toggle menu đều để ở trong element Code (button open menu) trong template Header.
  • Background cho body: để trong Bricks > Settings > Custom Code để được apply khi dùng builder. Nếu cho vào trong theme CSS thì sẽ không xem được khi build.
  • Theme bỏ hết các custom CSS thừa đi (Bamboo, SASS) vì viết vô tội vạ. Các custom CSS trước đây viết trong Customizer cũng bị bỏ đi. Hiện chỉ cần 1 ít CSS nhỏ cho .font-light thì đang để trong Bricks > Settings > Custom Code cho tiện, và không cần enqueue style của theme nữa.
  • Một số block dùng đi dùng lại thì tạo thành component (có màu tím). Trong site này có Header logo, quote open/close, danh sách công ty thành viên, đối tác, ...
Chỉnh sửa khác so với design:
Do design setup cho màn 1920, nên khi xem trên laptop sẽ thấy to. Do đó sửa lại code cho phù hợp hơn (nhỏ đi). Cụ thể:
  • Container: 1440px => 1110px (mặc định của Bricks)
  • Body: 20px => 16px
  • h1 (trên banner): 64px => 48px
  • h2 (title section, gradient): 48px => 36px
  • h3 (tên công ty con): 36px => 24px
About
No description, website, or topics provided.
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
Bricks
Setup dùng Style Manager là chính, tận dụng các global font, variables, classes.
Design
Màu sắc
Accent: #ff0000
Gradient: background: linear-gradient(180deg, #E0BE88 0%, #755627 100%);
Font
Font toàn trang là Play (Google Fonts).
Cách setup:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Font Manager
  • Chọn Google Fonts > tìm font Play > Add to Favorites
  • Sau đó vào admin > Bricks > Settings > Builder > Control panel, phần Font family: Options chọn Show favorites only để khi edit các element thì chỉ cho phép chọn các font favorite thôi (để tránh chọn nhiều font trên web).
Cách setup font cho các element:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Style Manager > Tạo 1 style là DongA
  • Chỉnh sửa các style cho body, h1, h2, ...
Elements
Setup chung trong Style Manager: Edit 1 page bất kỳ (trang chủ) > Click icon Settings > Style Manager
  • Button
Class chung
.text-gradient: chữ màu đồng gradient
.section-border: có border gradient cuối section
.bg-gradient: background màu đồng gradient
.image-zoom: zoom ảnh khi hover. Dùng cho wrapper. Nếu dùng trực tiếp cho ảnh thì set HTML tag của ảnh là figure.
.center-x: căn giữa theo chiều ngang
.slide-arrows: để style 2 nút prev/next của slider
.border-gradient: làm border gradient màu đồng
Bricks
Settings:
  • Disable Bricks Open Graph meta tags
  • Disable Bricks SEO meta tags
  • Disable "Skip links"
  • Smooth scroll (CSS)
Notes
  • LƯU Ý QUAN TRỌNG: cần dùng đúng các elements sau:

    • section: dùng cho các 
       (semantic), như ở trang chủ
    • block: tương đương với flex wrapper, dùng cho các block nhỏ
    • div: thẻ div thường
    • container: có container width cho content
  • Đối với slider, phân biệt các element sau:

    • Slider: bản cũ, không nên dùng vì tuỳ biến ít
    • Carousel: cũng khó tuỳ biến các element bên trong
    • Slider (nested): nên dùng, cho phép thêm các element bên trong dễ dàng => đang dùng cho trang chủ => không cần dùng custom slider (slick) nữa
  • Social icons: ở trong footer, dùng element button + svg
  • Header: CSS và JS cho toggle menu đều để ở trong element Code (button open menu) trong template Header.
  • Background cho body: để trong Bricks > Settings > Custom Code để được apply khi dùng builder. Nếu cho vào trong theme CSS thì sẽ không xem được khi build.
  • Theme bỏ hết các custom CSS thừa đi (Bamboo, SASS) vì viết vô tội vạ. Các custom CSS trước đây viết trong Customizer cũng bị bỏ đi. Hiện chỉ cần 1 ít CSS nhỏ cho .font-light thì đang để trong Bricks > Settings > Custom Code cho tiện, và không cần enqueue style của theme nữa.
  • Một số block dùng đi dùng lại thì tạo thành component (có màu tím). Trong site này có Header logo, quote open/close, danh sách công ty thành viên, đối tác, ...
Chỉnh sửa khác so với design:
Do design setup cho màn 1920, nên khi xem trên laptop sẽ thấy to. Do đó sửa lại code cho phù hợp hơn (nhỏ đi). Cụ thể:
  • Container: 1440px => 1110px (mặc định của Bricks)
  • Body: 20px => 16px
  • h1 (trên banner): 64px => 48px
  • h2 (title section, gradient): 48px => 36px
  • h3 (tên công ty con): 36px => 24px
About
No description, website, or topics provided.
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
Bricks
Setup dùng Style Manager là chính, tận dụng các global font, variables, classes.
Design
Màu sắc
Accent: #ff0000
Gradient: background: linear-gradient(180deg, #E0BE88 0%, #755627 100%);
Font
Font toàn trang là Play (Google Fonts).
Cách setup:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Font Manager
  • Chọn Google Fonts > tìm font Play > Add to Favorites
  • Sau đó vào admin > Bricks > Settings > Builder > Control panel, phần Font family: Options chọn Show favorites only để khi edit các element thì chỉ cho phép chọn các font favorite thôi (để tránh chọn nhiều font trên web).
Cách setup font cho các element:
  • Edit 1 page bất kỳ (trang chủ)
  • Click icon Settings > Style Manager > Tạo 1 style là DongA
  • Chỉnh sửa các style cho body, h1, h2, ...
Elements
Setup chung trong Style Manager: Edit 1 page bất kỳ (trang chủ) > Click icon Settings > Style Manager
  • Button
Class chung
.text-gradient: chữ màu đồng gradient
.section-border: có border gradient cuối section
.bg-gradient: background màu đồng gradient
.image-zoom: zoom ảnh khi hover. Dùng cho wrapper. Nếu dùng trực tiếp cho ảnh thì set HTML tag của ảnh là figure.
.center-x: căn giữa theo chiều ngang
.slide-arrows: để style 2 nút prev/next của slider
.border-gradient: làm border gradient màu đồng
Bricks
Settings:
  • Disable Bricks Open Graph meta tags
  • Disable Bricks SEO meta tags
  • Disable "Skip links"
  • Smooth scroll (CSS)
Notes
  • LƯU Ý QUAN TRỌNG: cần dùng đúng các elements sau:

    • section: dùng cho các 
       (semantic), như ở trang chủ
    • block: tương đương với flex wrapper, dùng cho các block nhỏ
    • div: thẻ div thường
    • container: có container width cho content
  • Đối với slider, phân biệt các element sau:

    • Slider: bản cũ, không nên dùng vì tuỳ biến ít
    • Carousel: cũng khó tuỳ biến các element bên trong
    • Slider (nested): nên dùng, cho phép thêm các element bên trong dễ dàng => đang dùng cho trang chủ => không cần dùng custom slider (slick) nữa
  • Social icons: ở trong footer, dùng element button + svg
  • Header: CSS và JS cho toggle menu đều để ở trong element Code (button open menu) trong template Header.
  • Background cho body: để trong Bricks > Settings > Custom Code để được apply khi dùng builder. Nếu cho vào trong theme CSS thì sẽ không xem được khi build.
  • Theme bỏ hết các custom CSS thừa đi (Bamboo, SASS) vì viết vô tội vạ. Các custom CSS trước đây viết trong Customizer cũng bị bỏ đi. Hiện chỉ cần 1 ít CSS nhỏ cho .font-light thì đang để trong Bricks > Settings > Custom Code cho tiện, và không cần enqueue style của theme nữa.
  • Một số block dùng đi dùng lại thì tạo thành component (có màu tím). Trong site này có Header logo, quote open/close, danh sách công ty thành viên, đối tác, ...
Chỉnh sửa khác so với design:
Do design setup cho màn 1920, nên khi xem trên laptop sẽ thấy to. Do đó sửa lại code cho phù hợp hơn (nhỏ đi). Cụ thể:
  • Container: 1440px => 1110px (mặc định của Bricks)
  • Body: 20px => 16px
  • h1 (trên banner): 64px => 48px
  • h2 (title section, gradient): 48px => 36px
  • h3 (tên công ty con): 36px => 24px
About
No description, website, or topics provided.
Resources
Readme
Activity
Custom properties
Stars
0 stars
Watchers
1 watching
Forks
0 forks
Report repository
Releases
Packages
Contributors
Languages