CODEWITHSUNDEEP
csscolorssyntaxsublimetext2
Claudiu
Claudiu

Reputation: 4109

How can I modify CSS color sets in Sublime Text 2?

In Sublime Text 2, for a specific theme, I want to have one color for the attribute and one color for the value.

background:#FFF url('some/img.png') 10px 10px;

background______ (the attribute name) should be a color

#FFF url('some/img.png') 10px 10px ____________ (the values) should be another color (one color for the entire value).

I know I have to modify the theme color set, but anyone have any idea how?

And one other thing, I don't want space after the colon (when hitting tab)

I want "float:left;" instead of "float: left;". Does anyone know where can I set this?

Upvotes: 1

Views: 2672

Answers (2)

AhmadAssaf
AhmadAssaf

Reputation: 3664

check this out http://tmtheme-editor.herokuapp.com/ this is very useful to style your elements .. however if you like your current theme and you only want to edit the tag,class,id ... etc in CSS then you have to edit the theme file you are using .. generally this is in Sublime Text 2\Packages\Color Scheme - Default\skin-name

after that you have to edit or add if they dont exist the following rules:

<dict>
        <key>name</key>
        <string>css tag-name</string>
        <key>scope</key>
        <string>meta.selector.css entity.name.tag</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#9EFFFF</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>css#id</string>
        <key>scope</key>
        <string>meta.selector.css entity.other.attribute-name.id</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#FFB454</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>css.class</string>
        <key>scope</key>
        <string>meta.selector.css entity.other.attribute-name.class</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#5FE461</string>
            <key>fontStyle</key>
            <string> underline</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>css property-name:</string>
        <key>scope</key>
        <string>support.type.property-name.css</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#9DF39F</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>css property-value;</string>
        <key>scope</key>
        <string>meta.property-group support.constant.property-value.css, meta.property-value support.constant.property-value.css</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#F6F080</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>css @at-rule</string>
        <key>scope</key>
        <string>meta.preprocessor.at-rule keyword.control.at-rule</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#F6AA11</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>css additional-constants</string>
        <key>scope</key>
        <string>meta.property-value support.constant.named-color.css, meta.property-value constant</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#EDF080</string>
        </dict>
    </dict>
    <dict>
        <key>name</key>
        <string>css constructor.argument</string>
        <key>scope</key>
        <string>meta.constructor.argument.css</string>
        <key>settings</key>
        <dict>
            <key>foreground</key>
            <string>#EB939A</string>
        </dict>
    </dict>

and of course you can fill in the values what colors u like

Upvotes: 3

runningRhetoric
runningRhetoric

Reputation: 2581

Not sure about the color attribute and value yet, but for the css spacing I may have an answer. Go to C:\Users\<username>\AppData\Roaming\Sublime Text 2\Packages\CSS\css_completions.py Line 190. Change l.append((p, p + ": ")) to l.append((p, p + ":"))

Upvotes: 2

Related Questions