/css/ - Custom Themes

Custom Themes

Index Catalog Archive Bottom Refresh
Name
Options
Subject
Message

Max message length: 12000

files

Max file size: 32.00 MB

Total max file size: 50.00 MB

Max files: 5

Supported file types: GIF, JPG, PNG, WebM, OGG, and more

E-mail
Password

(used to delete files and posts)

Misc

Remember to follow the Rules

The backup domains are located at 8chan.se and 8chan.cc. TOR access can be found here, or you can access the TOR portal from the clearnet at Redchannit 3.0.

US Election Thread

8chan.moe is a hobby project with no affiliation whatsoever to the administration of any other "8chan" site, past or present.


(237.04 KB 1174x461 Midna OP post.png)

[Guide] Custom CSS theme tutorial [.innerOP] 07/28/2023 (Fri) 06:23:35 No. 1
Are you tired of the bland default theme? Do you want to make a new theme to stand out? Then, this is the guide for you, as you'll learn how to make a custom CSS theme either for yourself or share it with the anons, perhaps even make it so good that it becomes used as a board's theme! This task cannot be accomplished on mobile browsers as they do not have a means of bringing up the inspector or console, so go get on your desktop & fire up the browser of your choice. The names in the posts will refer to the elements in the CSS theme that you can lookup for reference. Here, I will discuss the OP posts of the thread. They usually have a separate property from the regular posts below it. On the default Yotsuba P theme, it only has display & width & no unique color properties, it thus simply works with the default background color + gradient. [code] .opCell > .innerOP { display: inline-block; width: 95%; } [/code] Most custom themes modify the OP posts to make them stand out more. Below is an example of the Purple Vidya theme used in /v/ where the OP has a slightly transparent background that the posts below it don't have. [code] div.innerOP { background: #E4E4F900; /* Original value was 'rgba(228, 228, 249, 0.6)', converted to hex */ /* display: inline-block; max-width: 100%; */ border: 1px solid var(--contrast-color); border-radius: 6px; } [/code]
up


Forms
Delete
Report
Quick Reply