85 replies to this topic

[Zorg]

The new UI theme options allow players to write their own CSS (Cascading Style-sheets) under the Themes tab.

To give you an idea of what you can accomplish with CSS, the classic theme is just the default theme with a few graphics and a CSS file. Before you try playing with it please make note of this link, if you break your template you'll need it to reset your theme.

http://www.fallenswo... ... =revertcss

Simply login, navigate to that link and it will fix any changes you've made. You should also make note of this link before trying out anyone else's CSS.

The easiest thing to change is the theme background...

html {
  background: yellow;
}

The above code when pasted in to the Customize Theme box will change your background to yellow. Similarly you could do...

html {
  background: url('http://www.huntedcow.com/media/images/team/hoof.jpg');
}

If you really like Hoofmaster, that would give you his avatar as your wallpaper!

You can find lots of guides about CSS on Google, feel free to post any cool theme changes you come up with in this thread.

[evilbry]

For those toying with background, if you have Hide Background Image (Beta): ticked under preferences, the css changes won't appear on your main game screen (even if you are just using a colour and not an image). The css changes will however appear on the buff pop up screen.

[koenvdv]

Great, love to play with CSS it has been to long XD.

Tried this and it works :

h1
{color: red;
font-family: Comic Sans MS,arial;
font-size: 30px;
font-weight:bold;
}

This one changes the player name colours, font type and font size (you can get the colour codes here: http://www.2createaw...hex-colors.html)

I have looked at the CSS further (http://huntedcow.cac...lobal.css?00002) and tried to change the colour from the guild members names in the guild online members box to other colours, but it didn't seem to change anything:

.online_0
{
	color: #34EF13;
}

did this also for .online_2, .online_3 and .online_4.

Did I do anything wrong or are the .online for something else (if so which ones are the ones I am looking for? )?

[gulp45]

Hey to change the back ground image just copy and paste this to the custom theme page:

html {
background: yellow;
}

replace the yell with url So i now becomes:

html {
background:url;
}

after this is not get a link of the picture u want and place it in perentices like this:

(http://images2.alpha...thumb-78320.jpg) ~ example photo u dont have to go with it

then insert the picture link in perentices next to url and ur good to go it should look like this at the end

html {
background:url(http://images2.alpha...thumb-78320.jpg);
}

Thats all and click save setting hope i helped
}


Tell me what u think and give feedback



:mrgreen:

[koenvdv]

sorry i know that already,but when i get to world screen or any other screen in the game behind is gray background idenpendent of game backgraund,i already have custom backgraund

yea, that is not the background, you'll have to find how they have put that in their CSS and change it on the right spot.

[Zorg]

sorry i know that already,but when i get to world screen or any other screen in the game behind is gray background idenpendent of game backgraund,i already have custom backgraund

Yes that is element #pCC so the CSS would be...

#pCC {
  background: green;
}

If you use chrome you can right click and inspect an element to see the CSS it is using and its class / ID.

[Ringhal]

Nevermind my last post. I've got it working now.

Would you like to share how you did that, please?

[koenvdv]

I've made a persanolised banner for my guild TTF (gray scale theme):
http://i1091.photobu...vdv/statbar.png

The code is as followed:

#statbar-container {
background-image: url('http://i1091.photobucket.com/albums/i387/koenvdv/statbar.png');
}

I added some more stuff to it, the code is as followed:

#statbar-container {
background-image: url('http://i1091.photobucket.com/albums/i387/koenvdv/statbar.png');
}

html {
  background: url('http://i1091.photobucket.com/albums/i387/koenvdv/backgroundrepeat.jpg');}

h1
{color: #280534;
font-family: Comic Sans MS,arial;
font-size: 30px;
font-weight:bold;
}

It looks like this now:

[thering66]

more codes please also is there a way to stretch a picture? i can't seem to find one big enough.

[koenvdv]

more codes please also is there a way to stretch a picture? i can't seem to find one big enough.

Sorry, I have tried, but I failed ... don't know how to do it trough CSS

But it is possible to stretch a image to 100% height and 100% width of your screen.