How to make a custom css theme for Neoxian City on your own

in neoxian •  7 days ago 

cover image

I will give you a step by step tutorial how to make an in-browser css stylesheet so that your website looks different. It is very simple. This is only partial beautification with which you can learn to make your own theme, a few others, complete ones that I have been putting together will include editor, more details and more pages.

Stuff that you will need are:

  1. Stylish browser extension for Firefox/Chrome/Brave ( You can find it on Userstyles)... and css stylesheet extension for Opera.
  2. This post.

When you install Stylish click on the extension's icon, then on it's Menu and chose Install new Style.
Enter a name for your style.
Then find Applies to everything, click on specify, chose URL starts with and paste "https://www.neoxian.city" in the form field.
Save.

Now you are going to fill the middle big field with the data explained below. You can chose which one you want to have in your theme, it is like choosing the clothes.

Place Neoxian dragon picture and link to the discord on a sidebar

This is a sample pic, if you want your own, make sure it fits. Same with the link. It is textual, not clickable link because this is a browser side theme, it has nothing to do with an actual page.

.c-sidebar--left::before {
    content: url("https://i.imgur.com/3ttl0lI.png?1")"LINK: https://discord.gg/RkvBGdS";
    text-align: center;
    color: #ffeaa7;
}


Change header into a gradient

Looks good and you can play with it. I chose dark and golden, because one of my themes will have those colors.


.Header {
    background-color: #12181c;
    background-image: linear-gradient(315deg, #ffeaa7 0%, #12181c 10%);
}


Change sidebar modules into a gradient
    
.c-sidebar__module {
    background-color: #12181c;
    background-image: linear-gradient(315deg, #ffeaa7 0%, #12181c 25%);
}    


Change opacity of images

Change the opacity of a thumbnail images, make rounded corners, and add more saturation to make a bit vivid images.


.articles__feature-img {
    opacity: 0.9;
    filter: alpha(opacity=90);
    -webkit-filter: saturate(3);
    filter: saturate(3);
}
.articles__feature-img-container {
    border-radius: 4px;
}


Change assets into SILVER and add neoxag icon

This is definitely just for fun. If you add this one, this will work on all pages but on Transfers, because all tokens will be altered into silver, because this is only a css browser side.


.asset {
    display: none!important;
}
.integer {
    font-family: system-ui;
    color: silver!important;
    text-shadow: 1px 1px gray;
    font-weight: bold;
}
.decimal {
    font-family: system-ui;
    color: silver!important;
    text-shadow: 1px 1px gray;
}
.decimal::after {
    font-weight: bold;
    color: silver;
    content:" SILVER " url("https://i.imgur.com/1YqRSFt.png?4");
}


Huge reply button on a sidebar

Fix reply button, place it on the right sidebar in post pages. This will overlap if you use narrow screen, but for desktop browsers is ok. I like it because I don't need to scroll in case I want to start writing while I am in the middle of the text.


.PostFull__reply {
    position:fixed;
    right:1px;
    top: 120px;
    font-size: 250%;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    color: #000000;
    font-family: system-ui;
    background: black !important;
}


Big user pictures

Make user pictures larger so that you don't need a microscope.

.Userpic {
    width: 85px;
    height: 85px;
    border-radius: 20px;
}


Make your profile info larger

You can also separate these instances and make an each of a different color, size.

.UserProfile__banner .UserProfile__stats, .UserProfile__banner .UserProfile__info, .UserProfile__banner .UserProfile__bio  {
    font-weight:bold;
    font-size:130%;
}


Make blockquotes obvious

Quoting text is rare in my case, but when I have some, I wish to make it look great.


blockquote {
  position: relative;
  display: inline-block;
  background: #12181C;
  padding: 40px 30px 30px 60px;
  border-radius: 10px;
  text-align: left;
}

This will be it for now, next I will post about Editor and pages and publish a few themes on Userstyles and in my next post. All the codes above for styling you can alter and find even more online, classes are taken from the neoxian city template, otherwise this theme would not work.


Cover Image Attribution


ℕ𝕠 𝕡𝕝𝕒𝕘𝕤, 𝕔𝕠𝕡𝕚𝕖𝕣𝕤 𝕒𝕟𝕕 𝕤𝕡𝕒𝕞 𝕠𝕟 ℕ𝕖𝕠𝕩𝕚𝕒𝕟 ℂ𝕚𝕥𝕪 𝕒𝕝𝕝𝕠𝕨𝕖𝕕. 𝕀𝕗 𝕪𝕠𝕦 𝕔𝕠𝕡𝕪, 𝕡𝕝𝕒𝕘𝕚𝕒𝕣𝕚𝕤𝕖 𝕒𝕟𝕕 𝕤𝕡𝕒𝕞, 𝕨𝕖 𝕨𝕚𝕝𝕝 𝕔𝕠𝕞𝕖, 𝕣𝕠𝕓 𝕒𝕟𝕕 𝕓𝕦𝕣𝕟.


Media content disclaimer: My content is mainly made of codes and text, made to be a tutorial and not visually appealing by purpose, but contains some composite design elements and banners. All composite cover design and digital art used in my posts, promo banners, design cover, icons and logos are all made with the free online apps like Canva, Flaming Text, Image Online, Pixabay, Wallpaperplay, HQwalls, and similar tools that contain free to use templates and patterns. In case of the advertising all samples are free attribution by contract, the banners, gifs, banners, icons and logos are received from the advertiser and adjusted to fit the content. Screenshots if any are taken by me, either made with Firefox native screen capture tool, ScrnLi extension for Chrome or some other similar in-browser tool. Additionally, for the purpose of the specific tutorial, if necessary, my post may contain videos, animations or sound files, either made by me, or in special cases made by a third party with appropriate source listed.



Tutorials

How to make static website with Dropbox and Pancake.Io
How to make Jekyll static blog with Github pages
How to get your STEEM posts and comments on external website/blog in a simple way
How to redirect GINAbot's links to Neoxian.City, your favorite STEEM tribe

Lists and tools

Short list of useful file sharing and upload services

Humor

"In the name of the Father..." - the Whaleshares eulogy

Polls

NEOXAG ( Neoxian Silver) Stakeholders - dLike and Buzzi??

Crypto

ALERT - STATE OF YOUR BITSHARES WALLET - SMOKE, GOLOS, WLS, BEARSHARES, WEKU??



Free coins Best Change faucet | iFaucet | The Crypto Faucet

Exchangex - exchange of e-currencies

Best Change - currency exchange list
LionexNet Exchange

Uplibra - early warmup, get free libra
Mannabase - Universal basic income for everyone
Presearch - Search internet and earn
WowApp Messanger - Chat with friends and family and earn



PAYWALL - NATIVE SPEAKERS NEEDED - INDONESIAN, INDIAN, KOREAN, CHINESE, THAI, SPANISH ... and similar


Add me on Twitter | Telegram | MeWe | Discord



JOIN NEOXIAN CITY DISCORD NOW

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

!trdo

!shop

Congratulations @cinelonga, you successfuly trended the post shared by @turbobro!
@turbobro will receive 0.00009113 TRDO & @cinelonga will get 0.00006075 TRDO curation in 3 Days from Post Created Date!

"Call TRDO, Your Comment Worth Something!"

To view or trade TRDO go to steem-engine.com
Join TRDO Discord Channel or Join TRDO Web Site

你好鸭,turbobro!

@cinelonga给您叫了一份外卖!

@cecilian 粥粥 迎着暴雨 跑着步 给您送来
美味的和牛

吃饱了吗?跟我猜拳吧! 石头,剪刀,布~

如果您对我的服务满意,请不要吝啬您的点赞~
@onepagex

Congratulations @turbobro, your post successfully recieved 0.00009113 TRDO from below listed TRENDO callers:

@cinelonga earned : 0.00006075 TRDO curation


To view or trade TRDO go to steem-engine.com
Join TRDO Discord Channel or Join TRDO Web Site