Can't make Stylish script site specific - userscripts

I have a Stylish script on Firefox that moves the Search button on Starting Page, but the problem is that it will move the Search button on other pages, as well.
The lines
#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")
OR
#-moz-document domain("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")
do not work. The Search button will move on any page that has it.
Any ideas to make it site-specific?
Here’s the script:
#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query="){
}
input[value="Search"] /*isolates button*/
{
position: absolute;
top: 311px;
left: 660px;
}
Firefox 3.6.14, Win 2K

General answer:
That first line (#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")) should work. Does it only fail because other pages are also affected or does it fail because it never fires?
Anyway, things to check:
Was the opening brace omitted? Usually those lines are like:
#-moz-document url("http://www.google.com/hl=en&q=foo&aq=f") {
Note the brace at the end (But editing for the brace on the next line is fine, too.
Are the next pages, after the Starting Page, being loaded in by AJAX? For example, Google does this. You will notice that after entering a search term, the entire page does NOT reload.
If this is the case, then Stylish will still have the overwritten styles in effect; there is no help for it in Stylish.
So, confirm the problem with your first line. It would also be good to include exact links to the target pages and the full script.
If it is an AJAX issue, then you can easily convert the Stylish script to a Greasemonkey script -- which can, with a little logic, apply styles correctly, even on Ajaxified pages. (If that is the case: mark this question answered and open a new question, providing the full Stylish script and the desired results.)
Specific Answer, based on new information from the OP:
Based on the script provided, the error is that the braces are mispositioned. Also, you should provide a namespace.
So replace the script text with:
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document url("http://startingpage.com/eng/advanced-search.html?&cat=web&query=")
{
input[value="Search"] /*isolates button*/
{
position: absolute;
top: 311px;
left: 660px;
}
}

#-moz-document url-prefix("http://startingpage.com/eng")
or
#-moz-document domain(startingpage.com)

Related

Is there a way to customize the number of pages being printed on JavaScript / React?

I am currently working on a React application that uses Chart.js. Recently, I have found a new bug when using Chrome: whenever I'm trying to print a page that contains the charts, over 600 additional blank pages are generated.
This happens whether I print using cmd + print or window.print().
It is important that people can print these reports on our application. This issue is currently happening on Chrome, but not on Safari.
Is there any way to set the number of pages being printed, either with CSS or JavaScript?
maybe some property on #media print ?
Your help will be greatly appreciated!
I investigated this issue further.
The v108 Google Chrome update brought issues on Print Preview for many users.
There is a workaround that involves applying this CSS:
.chartjs-size-monitor-expand > div {
position: fixed !important; // cannot stay “absolute”
}
chartjs-size-monitor,
.chartjs-size-monitor-shrink,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-expand > div {
position: fixed !important; // cannot stay “absolute”
}
Source: Hundreds of blank pages and/or disproportion when printing a web page, after chrome version ~103 release (solved)
This fixed my issue! Hope it can help anyone who needs it.

ExtJS Admin Dashboard Example from the docs

I am trying to understand how things connect in the Admin Dashboard example, the register page here: http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register
FYI, I have read the entire docs on the quick start and the guide (which includes almost everything), and yet I find few things that I cannot connect. Maybe the docs need improvement or maybe I'm just dumb. I'll find out if its the latter.
This is the entire source code for the application: https://github.com/bjornharrtell/extjs/tree/master/templates/admin-dashboard. I am working with the classic version.
Now for the register page, the main view is this: https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/src/view/authentication/Register.js
My questions are:
At line 25: cls: 'auth-dialog-register'. Which means an extra css class is being added to the component. Now I searched the scss files and did not find the style definitions for this class anywhere. Since this component is the 'authdialog', I looked at this file in particular: https://github.com/bjornharrtell/extjs/blob/master/templates/admin-dashboard/classic/sass/src/view/authentication/Dialog.scss, but I cannot find 'auth-dialog-register' anywhere. Where is that class defined? Or is it not being used(in that case, bummer)
Similarly at lines: Line 42, Line 57 also, there is a class 'auth-textbox' being attached to text boxes, but I cannot find where its styles are defined.
Moving on, on line 49, for the textfield, a 'triggers' config is defined. In the docs it is here: http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.field.Text.html#cfg-triggers , It really doesn't explain anything, just a bunch of code. Also on the next line in the Register.js file, on line 50, it has a 'glyphed' config inside triggers. Again, I cannot find out in the docs what it is used for. Sure the idea is clear, that it is used for a textbox trigger, but I need to be sure I know what is happening.
My next question is probably connected with the previous one. If you look at the example page: http://examples.sencha.com/extjs/6.5.0/examples/admin-dashboard/?classic#register, you see that all text boxes have an icon saying what the field is for: Email field has an email icon. How did that come? I'm pretty sure it had to do with the triggers config in my previous question. According to the documentation https://docs.sencha.com/extjs/6.0.2/guides/core_concepts/font_ext.html, I should use a 'iconCls' config, but here that is not used.
Please someone explain this. Is it reasonable to have these questions? Or should I have been able to figure them out? I am new to ExtJS and have just started learning it from 2 weeks.
1/2) Seems they are unused classes. I'll open a ticket to remove them.
3) The triggers are button like things that can be appended to the field. As it says in the docs, they are a set of configurations for Ext.form.trigger.Trigger, the options for those can be found here: http://docs.sencha.com/extjs/6.5.1/classic/Ext.form.trigger.Trigger.html
glyphed is not a config, but rather a "label" for that trigger in the field.
4) That is some custom css, applied by the classes used in the trigger.
.password-trigger,
.auth-email-trigger,
.auth-password-trigger,
.auth-envelope-trigger {
&:before{
top: 10px;
left: -18px;
position: relative;
color: $dialog-trigger-color;
font-size: 30px;
}
&.password-trigger:before,
&.auth-password-trigger:before {
content: "\f023";
}
&.auth-email-trigger:before {
content: "\f007";
}
&.auth-envelope-trigger:before {
content: "\f0e0";
}
}

In Sencha Touch, exactly how do I change the icon in the Tab Panel to one of the existing picto icons included in Sencha Touch?

I have researched this issue thoroughly throughout Stackoverflow and have yet to find a precise answer, so here is my question.
I am using Sencha Touch 2.4. I am using its default theme, that is, the theme that you see when you first download Sencha Touch and get set up to develop in it for the first time. I am that new to Sencha.
In Sencha I am making a Tab Panel, and in the Tab Panel, I am trying to include in the tab bar one of the many nice little picto icons included in the development kit that is not included in the default theme, using the lines of code:
title: 'Transfer',
iconCls: 'photo2',
html: 'Text stuff'
In addition, all of the guidance I have read tells me to go into the appropriate .scss file for this theme and add a single line of code, like so:
#include pictos-iconmask(‘photo2’);
Obviously it seems that this line of code should be placed in Panel.scss in the tab directory in the default theme folder, but this does not work. Now I have no idea which .scss file it should be. I have since gone into every .scss file in my SDK labeled something related to my theme, such as "tab", "Panel", "all", "app", etc., and added this line of code, but the icon will not show up. I am obviously missing something. Someone please tell me, assuming the default theme, exactly which file and in which directory and on what line of code in that file do I place this piece of code known as
#include pictos-iconmask(‘photo2’);
Thank you for any help you can give.
In Sencha Touch 2.4, just include the icon (as opposed to pictos-iconmask). For example:
#include icon('photo2');
I would recommend doing this in a high level file, not a scoped file such as tab.Panel.scss. You can always narrow down your SCSS scope later on, however for debugging just toss the include into your base app.scss to ensure it works first.
You can use the following css code to accomplish your task:
.x-tab .x-button-icon.photo2:before, .x-button .x-button-icon.photo2:before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
font-family: "Pictos";
content: "N"; //mention your pictos character here like i have mentioned N here
}

CakePHP - Remove asterisk from required inputs

I'm building a CakePHP application that involves forms, and I'm looking for a way to remove the asterisk from required fields. I have several input fields that are required, but I do not want the asterisk to show.
I've tried using 'required'=>false, but that makes the field optional as well as removing the asterisk. I just want to remove the asterisk; the field needs to remain required.
You could modify the css that adds that. I've made changes in my css, so I'm not sure if it's the one that comes out of the box anymore (for that matter, I don't know if you are using the one that comes out of the box), but the css that adds those asterisk(s?) on my form is
label.required:after {
color: #EE3322;
content: "*";
display: inline;
}
And you should just replace that content:"*" with
content: "";
Now, if your css isn't the same as mine, inspect the label element, and look for a similar line (it's probably using a content: "*", so you know what you have to look for).
If you want to delete the asterisks for a single view, add an inline style in the view. If it is for the whole application, delete the line in the css file.

How to theme a menu block in Drupal?

This should really be a basic question but I simply don't get it after hours of searching. The question is, how do I theme menu blocks in Drupal 7?
I've created three different blocks all based on the main menu. Now I want to:
create unique HTML for all three blocks, that means modifing the surrounding wrapper and the <ul> and <li> that builds the menu. I wanna set special classes and remove all of the Drupal-added stuff
attach different classes to the different levels within each block. One of blocks will show two levels of the menu, i.e. it will display a submenu. I want to set a special class on the for the submenu...
This seems impossible... :(
Thank you in advance for the help!!!!
Theming is a tricky beast that often varies a lot depending what you need to do. Even with your very detailed description I can still say "it depends", but here are a couple steps that may help you get pointed in the right direction.
Step 1: Use a block tpl.php as suggested by Caffeine Addict. If you're not sure what to name the .tpl.php, I recommend the Theme Developer module. It's buggy, but you can use it to select an particular element and have it tell you suggestions for naming of .tpl.php files.
Step 2: Use a theme / preprocess function in template.php to modify the pre-defined variables and markup. Be sure to check on the theme_menu_tree & template_preprocess_menu_tree functions on api.drupal.org for starting points. If you're using the devel module, use dpm($variables); in each of those to see what you have to work with from the start.
I hope that helps! I agree with Caffeine Addict when he says that superfish might be an alternative. You should also probably check out the menu block module for breaking out conditional sub-sections into their own blocks.
In addition to what davidneedham said, to change what Drupal added to your menu HTML tags, you can override them. Here it is added classes:
<ul class="expanded">
<li class="firstleaf">...<li>
...
</ul>
i did not find a way to remove this classes, but you can override them in your block--system--main_menu.tpl.php file, like this:
li.expanded,
li.collapsed,
li.leaf {
padding: 0 0 0 0;
margin: 0;
}
ul.menu li {
margin: 0 0 0 0;
}
and then print your menu content:
<?php echo $content; ?>
I'm new in Drupal, wish my post can help you! :)
I would suggest to start with installing the Zen theme and follow the instructions inside the theme to setup a starter sub theme. This has all the information needed to learn theming in drupal and even how to add your own stylesheets etc.
This will allow you to start editing the templates for menu blocks and set your own html wrappers and classes.
For setting extra classes on blocks i would use this module:
http://drupal.org/project/block_class
Then just edit the block and you will see an extra section for adding additional classes to the block.

Resources