Redesign Cantr! --PUBLIC CSS/Styling THREAD--

[Cdls]

Not wanting to hijack the other threads out there, I am creating this one as more of a public showcase of players ideas on how they customize their pages. The main thread here will also be a quick outline of various elements that can be targeted for styling. Please PM me or add in a reply below any additional targetable elements to be added to the list!

Start off with some fun bits:
Eventgroups -- This targets specific event messages in the game (ie. radio chat, attacks, etc..)
The unknowns are due to me not coming across the specific event yet. Will update as I get the information!

Code: Select all

.eventgroup_1 = Attack against other Player
.eventgroup_2 = You are attacked
.eventgroup_3 = Other People Entering building
.eventgroup_4 = Other People Leaving Building
.eventgroup_5 = UNKNOWN
.eventgroup_6 = Project Related (Add/Completed)
.eventgroup_7 = UNKNOWN
.eventgroup_8 = Resources pulled to location
.eventgroup_9 = Radio Message
.eventgroup_10 = Eating Message
.eventgroup_11 = UNKNOWN
.eventgroup_12 = Player gives you note
.eventgroup_13 = UNKNOWN
.eventgroup_14 = Player giving you item
.eventgroup_15 = Player giving Player tools/weapon
.eventgroup_16 = Player giving you food
.eventgroup_17 = Player giving player resource
.eventgroup_18 = Vehicle movement/information (also ship travel sightings)
.eventgroup_19 = Player Storing item in container
.eventgroup_20 = Player taking item from container
.eventgroup_21 = Character Message | General chat
.eventgroup_22 = Character Whispers to other Character
.eventgroup_23 = Character whispers to you
.eventgroup_24 = You enter Building/Vehicle/Location
.eventgroup_25 = Dragging Player
.eventgroup_26 = You whisper to Character
.eventgroup_27 = Animal Action (Nonviolent?)
.eventgroup_28 = Pointing
.eventgroup_29 = UNKNOWN
.eventgroup_30 = Hunting
.eventgroup_31 = Object picked up/Dropped
.eventgroup_32 = Season Change Message


[Cdls]

Sample shots:

Radio messages toned down and easily skimmed over, hovering over a radio message brings it back to normal size:
URL being removed temporarily.


This example shows the ability to change the text icons to graphics (for those who are interested)

[Cdls]

CSS code examples:

To change events like the radio messages: ->This will change the color of the radio messages <-

Code: Select all

.eventsgroup_9 { /* Radio Message */
    color: #00B7A5;
   
  }

To change text icon to graphic icon: ->This example will change the Events text to a graphic icon. <-

Code: Select all

  input[value="Events"] {
    background:url(ENTER URL OF GRAPHIC);
  }

[*Wiro]

This sounds really nice. I didn't know it was possible to mess with events through CSS. Being able to make radio messages smaller is really nice for organisational purposes. I was wondering if it's possible to apply event filters automatically.

[Cdls]

Another option I am playing with is moving radio messages somewhere else entirely and strip them all from the general portion. The only downside is it wouldn't be compatible with mobile devices (not even sure what I have so far is either) on a functional scale.

A lot of the ideas I am gonna be throwing up probably wont mix well together either. I will post a real theme at a later date, but right now, just want to get examples and proofs out so those who are interested can see what they can do.


Theming/styling Cantr....the game within a game?

[computaertist]

There is a hack using pure CSS that achieves something like this (in recent versions of Firefox and Chrome, at least):

Code: Select all

body > table:first-of-type {
    background: none !important;
}

#ownCharId[value="314159"] ~ td:first-of-type b:first-of-type {
    outline: 9999px solid #400;
    background: #400;
    position: relative;
    z-index: -1;
}


Replace 314159 the ID of the character you wish to affect (which can be found in the HTML source of their character page, as something like: <input id="ownCharId" type="hidden" name="ocharid" value="314159">); change both instances of #400 to the background colour you want for that character; and then, on each main character page (notably excluding sub-pages like notes, hunting, and character descriptions, where I'm not sure it can be done with pure CSS) that background colour will (appear to) be used. You can make multiple copies of the second section, with each one affecting a different character.

This was working beautifully for me until just recently. Unless it's still working For SekoETC or anyone else, one of the recent changes, coupled with the fact that it was a hack to begin with, broke it. If it is still working for anyone else then there must be something I can do different on my end; I might have gotten it tangled with something that didn't matter until a recent change. (I've edited my custom skin a lot.)

But rather than continuing to hack away at the interface when it's breaking, could we maybe get that id added somewhere else on the page? Like maybe making the page's <body> tag <body id="c314159"> where 314159 is the unique id of the active character. (I preceded it with the letter c for character just because a CSS name must begin with an underscore (_), a hyphen (-), or a letter(a–z).

Giving body tags ids can be very handy.

[computaertist]

In case anyone is interested, I found a workaround to that broken hack. The line

Code: Select all

#ownCharId[value="314159"] ~ td:first-of-type b:first-of-type

changed to the much simpler line

Code: Select all

#ownCharId[value="314159"] + label

worked like a charm.

[Greek]

Not sure if there exists a more suitable thread, but I had some fun with restyling Cantr and that's skin I'm currently using:


It makes the font bigger, it also contains some of selectors to turn events I find uninteresting to grey.

Code: Select all

body, td, .cnt {
font-size: 13pt !important;
}

a {
color:#fadb14;
}
/*whisper, obj dragging, obj take/drop, radio */
div.eventsgroup_22, div.eventsgroup_8, div.eventsgroup_31, div.eventsgroup_9 {
font-size:8pt;
color:#888;
margin-top: -5px !important;
margin-bottom: 10px !important;
}

.titlebar {
  background-color: #207820 !important;
  margin:20px auto 0 !important;
  padding: 2px 7px !important;
  box-shadow: none !important;
}

center table, .page {
  padding: 2px 2px !important;
  background: rgba(0, 40, 0, 0.9) !important;
  box-shadow: none !important;
}

.page {
  padding: 2px 7px !important;
  box-shadow: none !important;
}

.button_action, .button_charmenu, .button_suggmenu, .button_form, .button_charmenuactive {
  box-shadow: none !important;
}

#footer_panel {
  background-color: transparent !important;
}


And, as an addition, that's the list of existing event group ids taken from the database:

Code: Select all

id    name    
1    Attacks (including animals)
2    Attacks (including animals) on me
3    People/vehicles entering
4    People/vehicles leaving
5    Spawning
6    Project setup/completion
7    Dragging on me
8    Dragging
9    Radio messages
10    Eating
11    Picking locks
12    Passing notes (to me)
13    Passing notes
14    Passing objects (to me)
15    Passing objects
16    Passing resouces (to me)
17    Passing resouces
18    Sailing and docking
19    Putting things into containers
20    Taking things out of containers
21    Talking
22    Whispers
23    Whispers to me
24    Others
25    Dragging characters
26    Your whispers
27    Domestication
28    Pointing
29    Healing near death
30    Hunting
31    Object take/drop
32    Weather
33    Destruction
34    Land travel