Is there a way to manage the font size of the function definition hover on ST3?
Here's what I see:
I've tried adding font.size to the theme for this element which is popup_control html_popup according to docs but it doesn't appear to accept this.
Update: I found that pasting this CSS in my color theme plist addresses the list/links but not the title. I have tried to use a plugin like ScopeHunter to find the context of the 'definitions' title but it doesn't work for popups.
<key>popupCss</key>
<string><![CDATA[
html {
background-color: #404238;
color: #F8F8F2;
}
a {
color: #66D9EF;
}
.error, .deleted {
color: #F92672;
}
.success, .inserted {
color: #A6E22E;
}
.warning, .modified {
color: #FD971F;
}
]]></string>
The best thing to do is look at the HTML that is used in the popup, to help decide what CSS selectors to use in the color scheme's popupCss to change the appearance of the popup.
In this case, the code is in Packages/Default/symbol.py, which you can view using https://packagecontrol.io/packages/PackageResourceViewer:
<body id=show-definitions>
<h1>Definition%s:</h1>
<p>
...
</p>
</body>
So you can use the following CSS in your popupCSS to target it and change the color of the "Definitions" text, for example - to prove the selector is working (the official recommendation is to use the id from the body tag):
#show-definitions h1 {
color: #b3bc20;
}
however, specifying the font-size seems to have no effect, at least in build 3154, so I think there is a bug in ST.
Related
I have switched from Dreamweaver CS6 to Dreamweaver CC 2021. CS6 allowed micro-selection of code highlighting colors; not so with 2021. The template code in 2021 is an indistinct grey on a black background, which is my preference for using the program. Please see http://artfromny.com/dwscreen.jpg
My problem is two-fold; I am relatively uneducated in code other than HTML and CSS (and far from expert there), and I have followed the Dreamweaver instructions at https://helpx.adobe.com/il_en/dreamweaver/using/customize-code-coloring.html to no avail.
Creating a copy of Raven, which I then renamed Ruby Blue, I appended the code from my Brackets Ruby Blue to the palce in main.less in Dreamweaver which indicated that was the proper location for any additional code. I also changed every instance of the main.less file that contained the word "comment" to display in yellow; that worked correctly for regular comments but not comments that contained template code. I was able to change the other selectors, tags, etc but could not change the template code.
The code I used to attempt to change the template comment code is below, followed by the code specifying all the colors of the theme. Any suggestions would be greatly appreciated. Image of the screen at http://artfromny.com/dwscreen.jpg
.cm-templateComment, .cm-templateAttrVal {
color: #98fb98;
}
.cm-comment {
color: #comment;
}
.cm-number {
color: #rb-lightblue;
}
.cm-string {
color: #rb-orange;
}
.cm-string.cm-property {
color: #rb-white;
}
.cm-error {
color: #rb-red !important;
}
.cm-meta,.cm-keyword,.cm-bracket {
color: #rb-magenta;
}
.cm-atom,.cm-link {
color: #rb-yellow;
}
.cm-attribute,.cm-property {
color: #66d9ef;
}
.cm-variable,.cm-variable-3,.cm-qualifier,.cm-def,.cm-operator {
color: #rb-white;
}
.cm-variable-2,.cm-tag {
color: #brightgreen;
}
.cm-builtin,.cm-special {
color: #ff9d00;
}
thanks in advance
Art
Resolved - I found a different copy of RubyBlue css - Theme RubyBlue Copyright (c) 2014 Eric Johnson
This file contained a better color for the template tags, so I did not pursue it any further.
I was able to successfully implement the Mapael map into my HTML page, and was able to configure the hover fill color to my liking via the JavaScript code.
I'm trying to change the fill color of specific individual countries.
I've worked briefly with SVGs before, and I used to open up a file with a text editor and update certain elements that way. Is there a different way to do this?
I was wondering if this is possible with Mapael?
and Where does one grab the SVG file from?
I downloaded and deploy the repository version (jQuery-Mapael-2.2.0).
See screenshot of the files and folders.
svg code file
You have to use Mapael special function/params:
$(function () {
$("yourMapElementSelector").mapael({
// Customize some areas of the map
areas: {
"US": {
attrs: {
fill: "#488402"
}
, attrsHover: {
fill: "#a4e100"
}
}
},
});
});
I am not sure how Mapael works, but normally what I would do with the SVG is add IDs to each country, something like:
<g id="france">
or
<path id="france">
Or whatever shapes you use and then just define a CSS class similar to this:
/* if the paths are inside a group */
.svgactive path {
fill: red;
}
/* if the paths are standalone */
path.svgactive {
fill: red;
}
And just toggle the class .svgactive on your specific id inside the SVG file.
I have a Header component that is used on a Layout component, which is used to structure the pages on my Gatsby site. There's a specific page where I need to give my header a different background-color. The problem is that there's no header component on that page, just the layout component. I've ended up making this work by adding a background-color prop to the header and to the layout. And I'm passing down the color down first to the layout which then passes it down to the Header...Is this the best approach? It doesn't feel great.
You could simply use react-helmet to add a class to your body on that specific page only. Let's say "dark-header", something like:
<Helmet>
<body class='dark-header' />
</Helmet>
Then, in your css code you could do something like:
.header { background-color: #FFFFFF; }
body.dark-header {
.header { background-color: #000000; }
}
Is it possible to add a before element in CSS like this:
ul {
li:before {
content: url('../icons/fancy-symbol.svg');
}
}
and have access to the svg's objects (e.g. a specific line or rectangle) and properties (e.g. the stroke-width, strike and fill color)?
Or is there a workaround for these kind of situations?
The use case is to color some lines on hover and animate the svg on click.
You can specify a fragment on the SVG URL, like ../icons/fancy-symbol.svg#red, then have CSS inside the file react to that:
<style>
#red:target ~ .some-element-here {
fill: red;
}
</style>
This won't let you specify properties dynamically, but it can be useful for interaction states, especially with a preprocessor.
Alternatively, if the SVG file is small enough, you can use preprocessors to change properties in a Data URI, like with sass-svg, or manually:
.li:before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
fill='#{$color}'%3E...");
}
(By the way, it might be easier to use ul { list-style-image: url(...) } instead of pseudo-elements.)
This may be obvious, but I can't find how to enlarge the font size of an SC.LabelView. What I have now is
title: SC.LabelView.design({
layout: { centerX: 0, centerY: 0, height: 36, width: 200 },
tagName: "h1",
value: "Contacts"
})
Although it is an h1, it stays 'normal' text, but it is a title, as suggested by the property name.
SproutCore includes a CSS reset so that you can style your page and make it look the same across all browsers.
The best way to edit your styles is to add some CSS to my_app/resources/main_page.css using the font-size property.
$theme h1 {
font-size: 30px;
}
There are some comments and links to additional resources in the main_page.css file, but you can learn more from the Chance guide.