-2

I'm working on a chat application called Candy, based on jQuery/Strophe/mustache. Now I want to modify the CSS-file, but the problem is: How can I do that? I have no HTML-code to see how the CSS-tags are used.

/**
 * Chat CSS
 *
 * @author Michael <michael.weibel@gmail.com>
 * @author Patrick <patrick.stadler@gmail.com>
 * @copyright 2011 Amiado Group AG, All rights reserved.
 */
html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

#candy {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #ccc;
    color: #333;
    overflow: hidden;
}

a {
    color: #333;
    text-decoration: none;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#chat-tabs {
    list-style: none;
    margin: 0 200px 0 0;
    padding: 0;
    overflow: auto;
    overflow-y: hidden;
}



#chat-tabs li {
    margin: 0;
    float: left;
    position: relative;
    border-right: 1px solid #aaa;
    white-space: nowrap;
}

#chat-tabs li a {
    background-color: #ddd;
    padding: 6px 50px 4px 10px;
    display: inline-block;
    color: #666;
    height: 20px;
}

#chat-tabs li.active a {
    background-color: white;
    color: black;
}

#chat-tabs li a.transition {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
    width: 0px;
    height: 0px;
    background: url(img/tab-transitions.png) repeat-y left;
}

#chat-tabs li a.close {
    background-color: transparent;
    position: absolute;
    top: 0;
    right: 0;
    height: auto;
    padding: 5px;
    margin: 1px 5px 0 2px;
    color: #999;
}

#chat-tabs li.active a.transition {
    color: gray;
    background: url(img/tab-transitions.png) repeat-y -50px;
}

#chat-tabs li a.close:hover, #chat-tabs li.active a.close:hover {
    color: black;
}

#chat-tabs li .unread {
    color: white;
    background-color: #9b1414;
    padding: 2px 4px;
    font-weight: bold;
    font-size: 10px;
    position: absolute;
    top: 6px;
    right: 22px;
    border-radius: 3px;
}

#chat-tabs li.offline a.label {
    text-decoration: line-through;
}

#chat-toolbar {
    position: fixed;
    bottom: 0;
    right: 0;
    font-size: 11px;
    color: #666;
    width: 200px;
    height: 24px;
    padding-top: 7px;
    border-top: 1px solid #aaa;
    background-color: #d9d9d9;
    display: none;
}

#chat-toolbar li {
    width: 16px;
    height: 16px;
    margin-left: 5px;
    float: left;
    display: inline-block;
    cursor: pointer;
    background-position: top left;
    background-repeat: no-repeat;
}

#chat-toolbar #emoticons-icon {
    background-image: url(img/action/emoticons.png);
}

#chat-toolbar .context {
    background-image: url(img/action/settings.png);
    display: none;
}

.role-moderator #chat-toolbar .context, .affiliation-owner #chat-toolbar .context {
    display: inline-block;
}

#chat-sound-control {
    background-image: url(img/action/sound-off.png);
}

#chat-sound-control.checked {
    background-image: url(img/action/sound-on.png);
}

#chat-autoscroll-control {
    background-image: url(img/action/autoscroll-off.png);
}

#chat-autoscroll-control.checked {
    background-image: url(img/action/autoscroll-on.png);
}

#chat-statusmessage-control {
    background: url(img/action/statusmessage-off.png);
}

#chat-statusmessage-control.checked {
    background: url(img/action/statusmessage-on.png);
}

#chat-toolbar .usercount {
    background-image: url(img/action/usercount.png);
    cursor: default;
    padding-left: 20px;
    width: auto;
    margin-right: 5px;
    float: right;
}

.usercount span {
    display: inline-block;
    padding: 1px 3px;
    background-color: #ccc;
    font-weight: bold;
    border-radius: 3px;
}

.room-pane {
    display: none;
}

.roster-pane {
    position: absolute;
    overflow: auto;
    top: 0;
    right: 0;
    bottom: 0;
    width: 200px;
    margin: 30px 0 32px 0;
}

.roster-pane .user {
    cursor: pointer;
    padding: 4px 7px;
    font-size: 12px;
    margin: 0 4px 2px 4px;
    opacity: 0;
    display: none;
    color: #666;
    clear: both;
    height: 15px;
    background-color: #ddd;
}

.roster-pane .user:hover {
    background-color: #eee;
}

.roster-pane .user.status-ignored {
    cursor: default;
}

.roster-pane .user.me {
    font-weight: bold;
    cursor: default;
}

.roster-pane .user.me:hover {
    background-color: #ddd;
}

.roster-pane .label {
    float: left;
    width: 110px;
    overflow: hidden;
    white-space: nowrap;
}

.roster-pane li {
    width: 16px;
    height: 16px;
    float: right;
    display: block;
    margin-left: 3px;
    background-repeat: no-repeat;
    background-position: center;
}

.roster-pane li.role {
    cursor: default;
    display: none;
}

.roster-pane li.role-moderator {
    background-image: url(img/roster/role-moderator.png);
    display: block;
}

.roster-pane li.affiliation-owner {
    background-image: url(img/roster/affiliation-owner.png);
    display: block;
}

.roster-pane li.ignore {
    background-image: url(img/roster/ignore.png);
    display: none;
}

.roster-pane .status-ignored li.ignore {
    display: block;
}

.roster-pane .me li.context {
    display: none;
}

.roster-pane li.context {
    background-image: url(img/action/menu.png);
    cursor: pointer;
}

.roster-pane li.context:hover {
    background-color: #ccc;
    border-radius: 4px;
}

.message-pane-wrapper {
    clear: both;
    overflow: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    width: auto;
    margin: 30px 200px 32px 0;
    background-color: white;
    font-size: 13px;
}

.message-pane {
    margin: 0;
    padding: 5px 10px 2px 10px;
}

.message-pane dt {
    width: 55px;
    float: left;
    color: #888;
    font-size: 10px;
    text-align: right;
    padding-top: 4px;
}

.message-pane dd {
    overflow: auto;
    padding: 2px 0 1px 130px;
    margin: 0 0 2px 0;
    white-space: -o-pre-wrap; /* Opera */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.message-pane dd .label {
    font-weight: bold;
    white-space: nowrap;
    display: block;
    margin-left: -125px;
    width: 120px;
    float: left;
    overflow: hidden;
}

.message-pane .subject {
    color: #a00;
    font-weight: bold;
}

.message-pane .adminmessage {
    color: #a00;
    font-weight: bold;
}

.message-pane .infomessage {
    color: #888;
    font-style: italic;
    padding-left: 5px;
}

.message-pane .emoticon {
    vertical-align: text-bottom;
    height: 15px;
    width: 15px;
}

.message-form-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    margin-right: 200px;
    border-top: 1px solid #ccc;
    background-color: #f2f2f2;
    height: 31px;
}

.message-form {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin-right: 320px;
    padding: 0;
}

.message-form input {
    border: 0 none;
    padding: 5px 10px;
    font-size: 14px;
    width: 100%;
    display: block;
    outline-width: 0;
    background-color: #f2f2f2;
}

.message-form input.submit {
    cursor: pointer;
    background-color: #ccc;
    color: #666;
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 3px 203px 3px 3px;
    padding: 5px 7px;
    width: auto;
    font-size: 12px;
    line-height: 12px;
    height: 25px;
    font-weight: bold;
    border-radius: 10px;
}

#tooltip {
    position: absolute;
    z-index: 10;
    display: none;
    margin: 18px -18px 2px -2px;
    color: white;
    font-size: 11px;
    padding: 5px 0;
    background: url(img/tooltip-arrows.gif) no-repeat left bottom;
}

#tooltip div {
    background-color: black;
    padding: 2px 5px;
    zoom: 1;
}

#context-menu {
    position: absolute;
    z-index: 10;
    display: none;
    padding: 15px 10px;
    margin: 8px -28px -8px -12px;
    background: url(img/context-arrows.gif) no-repeat left bottom;
}

#context-menu ul {
    background-color: black;
    color: white;
    font-size: 12px;
    padding: 2px;
    zoom: 1;
}

#context-menu li {
    padding: 3px 5px 3px 20px;
    line-height: 12px;
    cursor: pointer;
    margin-bottom: 2px;
    background: 1px no-repeat;
    white-space: nowrap;
}

#context-menu li:hover {
    background-color: #666;
}

#context-menu li:last-child {
    margin-bottom: 0;
}

#context-menu .private {
    background-image: url(img/action/private.png);
}

#context-menu .ignore {
    background-image: url(img/action/ignore.png);
}

#context-menu .unignore {
    background-image: url(img/action/unignore.png);
}

#context-menu .kick {
    background-image: url(img/action/kick.png);
}

#context-menu .ban {
    background-image: url(img/action/ban.png);
}

#context-menu .subject {
    background-image: url(img/action/subject.png);
}

#context-menu .emoticons {
    padding-left: 5px;
    width: 85px;
    white-space: normal;
}

#context-menu .emoticons:hover {
    background-color: transparent;
}

#context-menu .emoticons img {
    cursor: pointer;
    margin: 3px;
    height: 15px;
    width: 15px;
}

#chat-modal {
    background: url(img/modal-bg.png);
    width: 300px;
    padding: 20px 5px;
    color: white;
    font-size: 16px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -155px;
    margin-top: -45px;
    text-align: center;
    display: none;
    z-index: 100;
    border-radius: 5px;
}

#chat-modal-overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    background-image: url(img/overlay.png);
}

#chat-modal.modal-login {
    display: block;
    margin-top: -100px;
}

#chat-modal-spinner {
    display: none;
    margin-left: 15px;
}

#chat-modal form {
    margin: 15px 0;
}

#chat-modal label, #chat-modal input, #chat-modal select {
    display: block;
    float: left;
    line-height: 26px;
    font-size: 16px;
    margin: 5px 0;
}

#chat-modal input, #chat-modal select {
    padding: 2px;
    line-height: 16px;
    width: 150px;
}

#chat-modal label {
     text-align: right;
     padding-right: 1em;
     clear: both;
     width: 100px;
}

#chat-modal input.button {
    float: none;
    display: block;
    margin: 5px auto;
    clear: both;
    position: relative;
    top: 10px;
    width: 200px;
}

#chat-modal .close {
    position: absolute;
    right: 0;
    display: none;
    padding: 0 5px;
    margin: -17px 3px 0 0;
    color: white;
    border-radius: 3px;
}

#chat-modal .close:hover {
    background-color: #333;
}

Here's the HTML-code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Chat</title>
    <link rel="shortcut icon" href="../res/img/favicon.png" type="image/gif" />
    <link rel="stylesheet" type="text/css" href="../res/default.css" />


    <script type="text/javascript" src="libs/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="libs/libs.min.js"></script>
    <script type="text/javascript" src="candy.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            Candy.init('https://123.123.123.123/http-bind/', {
                core: { debug: false, autojoin: ['test@conference.mydomain.com']  },
                view: { resources: '../res/' }
            });

            Candy.Core.connect('example@mydommain.com','123');
        });
    </script>
</head>
<body>
    <div id="candy"></div>
</body>
</html>
user1273768
  • 43
  • 1
  • 8
  • 4
    Can you not just view source in the browser? Hit F12 and see what's there. – Kyle Oct 16 '12 at 06:41
  • You should really explain what this app is you're working with. Does Candy run in a web browser or is it something else entirely? Why can't you view the HTML using Ctrl-U or debugger tools? You can use this [edit] link to add more to your post. Good luck! – jamesmortensen Oct 16 '12 at 06:49
  • why dont you view the source of page. and inspect element you want to modify.fetch their **id** or **class** and update your CSS for same. – Milind Anantwar Oct 16 '12 at 06:43
  • That's the problem. If I look at the page source I can only see a few links to several Javascript libraries. That's all. Like I wrote before: I don't have HTML source – user1273768 Oct 16 '12 at 06:51
  • your js files appends the object to your div having id=candy. why dont you have look at candy.min.js and libs.min.js.im sure ull get the code that appends object to your div(id="candy")".you can modify their. – Milind Anantwar Oct 16 '12 at 07:07
  • .roster-pane { display: none }; .message-pane-wrapper { margin-right: 0; }; /* this will work. As others have said: use the developer toolbar of your browser and inspect the elements */ – Michael Weibel Oct 17 '12 at 06:05

1 Answers1

1

You can't. Like Kyle commented: Try to get the source code from the browser. Or did you write down all the CSS without testing it?

You can use Adobe Edge Code (is based on Brackets) to get a live preview while editing the CSS File, but you will need a HTML File that can be opened in the browser that makes use of your CSS Code!

SvenFinke
  • 1,254
  • 3
  • 15
  • 30
  • OK. So I have to change some things and just look what happens? – user1273768 Oct 16 '12 at 06:54
  • So you are completely new to CSS? Then that's something you can start with. Look for some beginner tutorials and try to find out, what you can do with CSS. – SvenFinke Oct 16 '12 at 07:29
  • 1
    Ah, I have just seen your HTML Code example. Which browser are you using? I prefer Chrome to do Frontend work, the developer Tools are much more mighty then Firebug. Using chrome you can open the developer Tools (hit F12) and inspect the HTML Code. You can also change the CSS Properties directly inside the browser. Thats a nice playground to try some changes. If they work, transfer them into your CSS Code. – SvenFinke Oct 16 '12 at 07:35
  • I don't think this is a valid answer. Adobe Edge Code won't help you imho as the javascript does render the elements dynamically. – Michael Weibel Oct 17 '12 at 06:08
  • That's why I did add a comment to this one. And I thought about the Live Preview Feature in Edge Code. That one should work. – SvenFinke Oct 17 '12 at 06:14
  • 1
    @MichaelWeibel: Edge Code's live preview functionality should work fine for this, since it's updating the stylesheet dynamically. All elements on the page are affected by stylesheet changes, including those created by JS. – peterflynn Jan 30 '13 at 19:52
  • @ytpete ok thanks for the hint, didn't knew that :) – Michael Weibel Jan 31 '13 at 07:08