3 replies to this topic

[Ainz]

 

 

 

*Click the image for better view

 

Work done :-

Statbar

Experience Bar

Body (Header, Mid, and Footer)

Shoutbox

Tavern's news header

Font colour

 

Well, after countless hours of wasting my time doing this, i decided that its just not worth it since theres barely any market for it anymore, so im just gonna give it away. Its usable on most part but theres few here and there that stills need some fixing (e.g Guild Hall). Unfortunately, i lack skill to do it. So, if CSS is more of your thing, feel free to do it.

 

Code inside this spoiler box..

Spoiler

#pC:before
{
        content: '.';
        text-indent: -9999px;
        display: block;
        height: 107px;
        margin-bottom: -107px;
        background-image: url('https://i.ibb.co/d0Vph1K/Header.png');
}

#pC
{
        clear: both;
        float: left;
        background-image: url('https://i.ibb.co/QjGWTkH/Middle.png');
}

#pF
{
        background: url('https://i.ibb.co/TbSQDqD/Footer.png') no-repeat 0 0;
        width: 996px;
        height: 62px;
        clear: both;
}

.topbanner-stats-normal {
    position: absolute;
    left: 170px;
    top: 169px;
    width: 674px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    background: rgba(0,0,0, 0.30);
}

#statbar-xp
{
	position: absolute;
	width: 434px;
	height: 23px;
	top: 190px;
	left: 139px;
	text-align: center;
	z-index: 1;
}

#statbar-xp-progress-container
{
	position: relative;
	width: 434px;
	height: 23px;
	top: 190px;
	left: 139px;
}

#statbar-xp-progress
{
	position: absolute;
	top: 0px;
	left: 0px;
	height: 23px;
	width: 100%;
	background-image: url('https://i.ibb.co/3CVkzKt/xp-bar.png');
}

#statbar-container
{
	position: relative;
        top: 1px;
        right: 0px;
        left: -5px;
        margin-bottom: 0px;
	width: 1006px;
	height: 237px;
	background-image: url('https://i.ibb.co/PjP2Q6D/statbar.png');
	font-size: 11px;
}

#statbar
{
       top: 155px;
       left: 141px;
       margin: 0 0 0 0;
       width: 696px;
       height: 20px;
       position: relative
}

.statbar-tooltip {
	position: absolute;
	background: rgb(50, 66, 81);
	top: 48px;
	color: #FFF;
	font-size: 10px;
	padding: 5px;
	z-index: 3;
	border-radius: 0 0 5px 5px;
	border: solid 1px #020202;
	box-shadow: 0 1px 2px #000;
}

#statbar-character {
	position: relative;
	width: 123px;
	top: 30px;
	left: 16px;
	height: 20px;
	padding-left: 20px;
	width: 120px;
}

#statbar-stamina {
	position: relative;
	top: 30px;
	left: 19px;
	height: 20px;
	padding-left: 20px;
	width: 80px;
}

#statbar-equipment {
	position: relative;
	top: 30px;
	left: 21px;
	height: 20px;
	padding-left: 20px;
	width: 80px;
}

#statbar-inventory {
	position: relative;
	top: 30px;
	left: 23px;
	height: 20px;
	padding-left: 20px;
	width: 80px;
}

#statbar-fsp {
	position: relative;
	top: 30px;
	left: 25px;
	height: 20px;
	color: #FB5BC0;
	padding-left: 22px;
	width: 78px;
}

#statbar-gold {
	position: relative;
	top: 30px;
	left: 27px;
	height: 20px;
	color: #FED44A;
	padding-left: 21px;
	width: 122px;
}

#pCC {
	font-family: Helvetica, Arial;
	color: rgb(120, 197, 218);
}

a {
	color: rgb(120, 197, 218);
	text-decoration-style: dotted;
}

.news_head, .news_head_tavern {
	text-align: left;
	padding: 3px;
	border: 1px solid #3a5c7b;
	background: #36495a;
}

.news_head h1, .news_head_tavern h1 {
	font-size: 1.4em;
	font-weight: bold;
	text-align: left;
	margin: 0;
	text-shadow: 0 0 5px #6ac0bd;
}

.news_body, .news_body_tavern {
	position: relative;
	text-align: left;
	margin: 5px 1px;
	padding: 0 5px;
	color: #78c0d4;
}

.news_shoutbox h1 {
	font-size: 1.4em;
	font-weight: bold;
	margin-bottom: 3px;
	text-shadow: 0 0 5px #6ac0d4;
}

.shout_head {
	background: #36495a;
	width: auto;
	height: auto;
	overflow: hidden;
	border: 1px solid #3a5c7b;
	padding: 2px;
}

.shout_body {
	width: auto;
	height: auto;
	background: #00000029 none;
	overflow: hidden;
	color: #78c0d4;
	padding: 5px;
	text-align: center;
	font-size: 0.9em;
}

div.innerColumnHeader {
	width: 320px;
	background-color: #36495a;
	border: 1px solid #3a5c7b;
}

p.centered {
	text-align: center;
	background-color: #36495a;
	color: #569d9f;
	border: 1px solid #3a5c7b;
}

.profile-stat-bonus {
	color: #ffd145;
	float: right;
	margin: 0 5px 0 0;
}

td.header {
	font-size: 12px;
	background-color: rgb(54, 73, 90);
	border: 1px solid #3a5c7b;
}

td.header-dark {
	font-size: 12px;
	background-color: #36495A61;
	/* border: 1px solid #3a5c7b; */
}

 

To use it, simply copy the code and go to Character > Preferences > Theme and paste in inside the box there and save. Make sure you are using the DEFAULT THEME first before applying the theme. I also include the raw image file and code incase it get broken or the image hosting site that i used is unavailable. Last but not least. DO NOT GO AROUND AND SELL IT.

Attached Files

•  Blue Angel.zip   936.26KB   450 downloads

Edited by Ainz, 20 November 2020 - 19:37.

[Edith3000]

This is so good! (except the flashier neon headlines in the news tab)

[Edith3000]

Did anyone add more to the code? If anyone can change the following elements and know how to, please halp!

 

The shiny glowy headlines on the News feed/Home page. Glow no more please!

Menu font color in the AH (filter options that you can check)

Color of the name of the realm on the map

 

Any other changes are welcome too.

[Thoran]

I randomly ran across a link to this post.. its amazing.

At first it didnt work, then I re-read the instructions: "Make sure you are using the DEFAULT THEME first before applying",

works perfectly.