Is there a way in Atom to fold an entire selection on a new line? I'm trying to make a package that lets me select multiple lines of code and fold them. My markup would look something like this:
/* Text Colors */
.text-red {
color: red;
}
.text-green {
color: green;
}
.text-blue {
color: blue;
}
/* Typography */
h1 {
font-size: 30px;
}
and then when I fold it, it would look something like this:
/* Text Colors */
[...]
/* Typography */
h1 {
font-size: 30px;
}
This way I can view looks of sections in my code at the same time. I've tried using foldSelectedLines but unfortunately that ends up folding it like this:
/* Text Colors */
.text-red {[...]
/* Typography */
h1 {
font-size: 30px;
}
Its CTRL-ALT-F on Linux & Windows or CTRL-⌥-⌘-F on mac.
Also in Atom press CTRL-SHIFT-P (or ⌘-SHIFT-P on mac) to open the command palette and type fold to get a list of all the possible fold options and related keyboard shortcuts.
I had the same problem - I wanted to fold arbitrary selections as in Textmate.
For Atom on the Mac at least ctrl-option-command-F works!
Related
I have an app for the 2018 World Cup calendar and I want to update it to 2022. I ran into a couple of problems:
The form in the title used to show a background image and now I can't get it to appear. I have tried with tbMenu.getTitleComponent().setUIID("TitleArea"); and it does not work.
TitleArea {
background-image: url(images/rojo.png);
background-color: red;
color: white;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
I also put buttons that change when pressing a forward or back command and now it only shows the first time and when I press the command the area appears blank.
Try "tbMenu.setTitleComponent(cnP);" which works for the first time but it doesn't update when i press the command.
I appreciate the support
Hi,
I have placed an image in drive because stackoverflow sends me an error when trying to place it. https://drive.google.com/drive/folders/1LVBZPMCTTTEZxEYfwrh3S2_fPzyktTiN
As you can see, I tried several combinations and not from what I deduced the problem is about the title area because in certain parts it works. I copy the changes I made to the CSS and the image shows the result in the hope that it will tell me which is the correct way.
Title {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: red;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
TitleArea {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: black;
text-align: center;
font-family: "native:MainBold";
font-size: 10mm;
}
TitleCommand {
background-image: url(images/titulo.png);
cn1-background-type: cn1-image-scaled-fill;
color: black;
text-align: center;
font-family: "native:MainBold";
font-size: 10mm;
}
TitleCustom {
background-color: transparent;
color: white;
text-align: center;
font-family: "native:MainBold";
font-size: 3.5mm;
}
I also include the method where I load the titles for the first time.
final Toolbar tbMenu = new Toolbar();
this.setToolBar(tbMenu);
Vector vGP = grupoResultadosActivos("A");
Container cnP = new Container(new BoxLayout(BoxLayout.Y_AXIS));
Label lbTitulo = new Label("GRUPO A");
lbTitulo.setUIID("Title");
cnP.addComponent(lbTitulo);
if (vGP.size() > 0) {
int cnt = contadorBarraPaises(vGP);
if (cnt > 0) {
cnP.addComponent(cargaBarraPaises(vGP, cnt));
}
}
cnTitleArea.add(cnP);
cnTitleArea.setUIID("TitleCustom");
tbMenu.setTitleComponent(cnTitleArea);
tbMenu.repaint();
It's hard to tell with things like this. I suggest using the component inspector and reviewing the components in the hierarchy to see what went through then editing the CSS dynamically to see the changes.
Important: sometimes changes don't apply in this way!
You will need to stop the simulator and delete the res file. Then do a clean build. It's rare but it happens in some configurations and might be misleading.
About the specific issues. For the first try adding:
cn1-background-type: cn1-image-scaled-fill;
setTitleComponent is problematic since it overrides the entire title area. Many generic behaviors will stop working if you do that. It's an all or nothing situation and might be the reason other things don't work.
I'm using Obsidian.md and have created a css snippet that lets me utilize a combination of **bold**, *italics* and ==highlights== to create three different colors; see image.
Markdown Colors
However, these colors are lost when I export the file to PDF, since the snippet doesn't govern that; I think it has to do with css printing, but I'm not sure. In the PDF it would look like this:
Would anyone here be able to help me figure out, how to have the colors appear the same in markdown and in PDF?
I'll share a part of the snippet below. This is for the red color, which is created by combining italics/asterisks and highlights/equal signs:
:root
{
--highlight-lred: #f0a6a6;
--highlight-dred: #c08484;
}
/* Red Highlight */
span.cm-em.cm-highlight {
font-style: unset !important;
background-color: var(--highlight-red);
color: #222;
}
body > .app-container div.markdown-preview-view em > mark {
/*font-style: initial !important; */
background-color: var(--highlight-red);
color: #222;
}
use media query for this:
Ex:
#media print {
span.cm-em.cm-highlight {
background-color: var(--highlight-red);
color: #222;
}
body>.app-container div.markdown-preview-view em>mark {
background-color: var(--highlight-red);
color: #222;
}
}
Beginner question. I have this code, which works fine
/* Start attribute labels bold */
.custom-attributes .attribute-label {
font-weight: bold;
}
/*End attribute labels bold */
/* Start attribute value color */
.custom-attributes .attribute-value {
color: red;
}
/* End attribute value color */
Now, I'd like to filter the .custom-attributes .attribute-label and look for the value 1, then print all the .custom-attributes .attribute-value to this label green. So basically
I hope this is understandable... How can I do this?
This is for a wordpress website to customise the output on the website.
I've been fiddling around and trying to figure out how to make the text from within a WordPress menu list bigger and I just can't figure it out.
The URL is here
http://www.playstoresales.com/top-charts/
And I just want the text in the main list(games, top free games, top adventure games, top action games, etc) to be bigger.
I can't seem to find out which CSS class(or whatever) that I should be targeting, and what the syntax for it is.
Depends on the level of control but a nuclear option that would change the font size of every li element that has a CSS class of .menu-item would be:
.menu-item {
font-size: 24px;
}
For a little more control you could target that specific menu with an additional CSS class. I see you already have class (.menu-=top-charts-container) and id (#menu-top-charts) to hook onto.
/* all elements with .menu-item class */
.menu-item {
font-size: 18px;
}
/* only elements with .menu-item within #menu-top-charts element */
#menu-top-charts .menu-item {
font-size: 24px;
}
I believe this should work:
.menu-item.parent > a { font-size: 30px; } /* Or whatever font you want */
That being said, you may want to try tagging all the links that you want to have bigger text with a css class, that way you can target the class instead of adding selectors.
Like this:
.main-link { font-size: 30px; } /* All hyperlinks you want to be bigger can have this class */
Targeting the anchor within the ul ID;
#menu-top-charts a {
font-size: 50px;
}
I'm trying to make a universal CSS layout for a large application my companies working on. I ran into a problem while trying to style all asp:label's to look a certain way. I was having the same problem with buttons but I figured that out:
input[type="submit"] {
background: red;
}
that will make all the buttons have a red background....
So, does anyone know how to style asp:label's ??? Everything that I've attempted is listed below, but to no avail:
label {
background: red;
}
asp:label {
background: red;
}
input[type="label"] {
background: red;
}
Since a label just outputs a span, I would imagine that it's like this:
span { background-color:Red; }