Atom styling for keyword "this" - this

Is it possible to give the keyword this custom styles in your Atom stylesheet? E.g. make it bold, so it stands out more?

This can be achieved by editing your styles.less file.
Assuming you're interested in assigning this from javascript to be bold, the following snippet will handle your question:
atom-text-editor::shadow {
.variable.language.js {
font-weight: 800;
}
}
The classes for the specific elements you are trying to style can be found easily by opening up Developer Tools (View > Developer > Toggle Developer Tools), clicking the magnifying glass located on the top-left of the dev-tools panel, and then hovering over the word(s) you are interested in styling.
See here for more information.

Related

how do i change the font in sublime text search bar / CTRL+ P key

I want to change the font of the search bar and also the results there, because I can't see it clearly
I saw your question still hanging so I installed Sublime on Debian to try to configure it.
First of all, you can read how to customize Sublime at here. And the part of interface you want to configure is called quick_panel, specifically class quick_panel_label.
At the end of theme configuration page, there is an example of customization file.
I don't know what theme are you using, but if you are using Default theme, you should create new file called Default.sublime-theme and place it in Packages/User/. You can quickly find that path by menu of sublime, Preferences -> Browse packages... .
Content of Default.sublime-theme should be:
[
{
"class": "quick_panel_label",
"font.size": 25
}
]
where font.size represent font size of menu you are trying to customize.
P.S.
If you don't know the name of the file your theme is using, from menu choose Preferences -> Theme... and all themes should be listed with their .sublime-theme file.
For example, I customized Arc Dark theme.
I hope this works for you.

How to turn off page breaks in Google Docs? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 2 years ago.
The community reviewed whether to reopen this question 4 months ago and left it closed:
Original close reason(s) were not resolved
Improve this question
How do I turn off page breaks in Google Docs so I just have a single continuous scrolling document?
I don't think this method applies anymore.
I never want to print out my Google Docs. The page breaks are distracting and mess up my formatting. (For example, when I have footnotes inside a table that crosses a page boundary, the footnotes break up the table!)
In 2016: Turn off "Print Layout" from the "View" menu.
Now, 2022, there is a specific feature extending these capabilities in "File / Page Setup" : https://support.google.com/docs/thread/150905607/google-docs-new-feature-pageless?hl=en
I also rarely want to print my google docs, and the breaks annoyed me as well.
I installed the Page Sizer add-on from the add-ons menu within google docs, and made the page really long.
The page settings work globally. So your collaborators will also enjoy a page page-break-free experience in google docs, unlike the style-bot solution.
Update
Google now provides this feature out of the box.
File > Page Setup > Pageless
One option is to just double click the page break line and Google will automatically removed them.
For reference: https://www.youtube.com/watch?v=5Qq3KxGHm3g
The solution I came up with was to use the publishing feature.
File > Publish to the web...
Then in the URL you can just replace the .../edit path with .../pub
This solves the problem described in the question of breaking up a table with footnotes.
The only way to remove the dotted line (to my knowledge) is with css hacking using plugin.
Install the User CSS (or User JS & CSS) plugin, which allows adding CSS rules per site.
Once on Google Docs, click the plugins icon, toggle the OFF to ON button, and add the following css code:
.
.kix-page-compact::before{
border-top: none;
}
Should work like a charm.
This answer is a summary of comments; but it really deserves its own answer.
The accepted answer (by #BjarkeCK) works, but as written, there is a maximum allowable page height of about 120 inches — roughly the height of 11 normal sized pages. So this is not a perfect solution.
However, there is a hack. You have to edit the source code of your local browser which renders the Page-Sizer settings window and either increase or delete the max attribute for the page height input. As shown in the following screen shot.
Page-Sizer Add-on
To access the source code you need to edit, position your cursor inside the custom height field, right-click, then choose inspect element.
Note that you also have to delete all the page breaks in your original document otherwise no data will render after the first one.
If You want to REMOVE page break from document
use Edit / Find-Replace \f with regex
If You want to TURN OFF (as You asked)
uncheck "Print Layout" from the "View" menu, but dotted lines will remain indicating page breaks
install stylebot extension from webstore
https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha
go to G-document, set appropriate minimal view mode
click stylebot icon (css) in toolbar of Chrome
click "Open Stylebot"
on very first line of new window, which is reading "select an element", insert text .kix-page-compact::before
set border-style to none
Other than that open the "View" menu at the top of the screen and un-check "Print Layout." Page breaks will now only be shown as a dashed line.
A long-term solution: userscript
You can use a userscript like Tampermonkey (if you are using Chrome or Edge-Chromium, here is the extension)
Then create a script and paste this in it:
// ==UserScript==
// #name Google docs
// #include https://*docs.google.*/document/*
// #grant GM_addStyle
// ==/UserScript==
GM_addStyle ( `
.kix-page-compact::before {
border-top: none;
}
` );
A temporary fix: developer console
You can use the developper console. In Chrome:
1. open your document on google docs
2. click in the url field and press ctrl+shift+I (or right click just above help and select "view page source)
Then modify the css (cf the steps on the printscreen below) :
1. once the console is loaded press ctrl+F and paste this : kix-page kix-page-compact
2. click on the div just below the one that is highlighted in yellow
3. in the right part, paste this in the filter box : .kix-page-compact::before
4. click on 1px dotted #aaa next to border-top and replace it by none

Highlight for Current Menu Item not highlighting correctly

I would like the current menu item to stay highlighted when a user is in that section. I set up styles for .current-menu-item. For some reason some styles work and some don't. I used all of these for testing purposes:
.current-menu-item {
color:#F90;
border-bottom:2px solid #fco;
text-decoration:line-through;
background:#000;
}
Background and Text-Decorationare the only styles that work. Any clues why the others do not? I really only want the text color to stay orange (highlighted #f90).
Thanks in advance for any help :)
sandra :)
Your color rule is likely being overridden by a more specific rule. You can investigate this further, using 'Inspect Element' in google chrome, and looking at the styles in the inspector.

How to move the search icon, in the search box of jquery mobile?

jQuery Mobile's search input comes with a search box, with a search glass icon that is to the left of the box. I want the search icon to the right side of the box. I'm looking at the css, but the only thing I see that controls it is...
.ui-icon-searchfield::after
but just not sure if that is the right css to use to move the icon around...or is there a class or data attribute I can use on the search element itself, to move the icon?
thanks!
You have identified the class correctly. All you need to do is override the background's position to be roughly textbox's width + 73px, e.g.:
.ui-icon-searchfield::after {
left: 173px !important;
}
​Check my example here: http://jsfiddle.net/ruslans/wyeUu/
not sure what you want to do about the "clear" icon, which appears on the right when you type.

Sharepoint 2010. Add custom background and frame for content editor webpart

I need to create custom webpart with complex (few divs, or other html elements) background and borders.
How can i use default sharepoint content editor and just add predefined background and frame!?
Thanks.
You tagged your question with Sharepoint 2007 and 2010, the content editors are different though. This answer is for SP2010:
You can just add CSS to a custom CSS file. background-image for .ms-rte-layoutzone-inner-editable will do the image trick. If you want to add a "frame" as in border, you can add border attributes to .ms-rte-layoutzone-outer and make it e.g. red.
An example for a background image:
.ms-rte-layoutzone-inner-editable {
border-image: url(/PublishingImages/Mylogo.gif);
}
But please do your users a favor and don't include anything blinking or distracting to the content editor's background - if you wanna go for some very light grey or something like that it's OK.
For MOSS2007 you need to check the specific styles you can override.

Resources