I want to set my live template for css like
df
After this I want to be displayed:
display: flex;
But in my Webstorm I have some predefined shourtcut and I cannot find any clues how to disable it in LiveTemplates. It's really annoying to always press bottom arrow when I want to write display: flex;
The IDE suggests existing HTML elements in completion; dfn is the Definition element; there is no way to remove it from completion list
Related
I would like to change the size of the text in my 'About' page of my big cartel shop (foundry theme). I would also like to change it from left-aligned to centralised layout. Where do I find these in the CSS?
To make this change it'd be best to add code to the very bottom of the CSS section in your admin, like so:
section.content .custom_page {
font-size: 16px;
text-align: center;
}
Simply adjust the font-size value to whatever you'd like (the theme default is 14px) and you'll be good to go.
I am using WebStorm 9 IDE, but i have faced annoying issue with Line comments in LESS/HTML/CSS using "CTRL+/" hotkey, e.g.:
.navbar-toggle {
// margin: 13px 15px 13px 0;
}
As you can see it makes line comments at first column, i don't need that, i need this:
.navbar-toggle {
//margin: 13px 15px 13px 0;
}
How can i do that for LESS/HTML/CSS?
For Javascript i can go in Settings -> Codestyle -> Javascript -> Wrapping and braces -> Uncheck "Comment at first column" and it works, but there's no such option for LESS/HTML/CSS. Need some help.
Not currently possible: such option has to exist on per language basis (it's not one-for-all option, unfortunately).
As I understand you have submitted new ticket already: https://youtrack.jetbrains.com/issue/WEB-14255
LESS specific ticket: https://youtrack.jetbrains.com/issue/WEB-12549
Does anybody know how to change the size of the fonts appearing in tags of the tag-it plug in? I went over the stylesheet but it does not seam obvious to me how to do it.
It is in the color specifc css file, tagit-stylish-yellow.css for example.
Look for
ul.tagit { cursor: text; font-size: 14px; color: #333; }
and change the font-size.
I found this by going to the demo site in Chrome, start the inspector by pressing F12, selecting the tag and looking at the css directives that affect it.
I’m trying to create a simple menu where I’ve got four menu items each have an image and then there is a special image for each item that is active.
I’m using Drupal so the HTML output can’t be changed (not easy anyway) so my question is if and how it can be done by using the HTML code provided below:
<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first">Question</li>
<li class="qtab-1">Lead</li>
<li class="qtab-2">Board</li>
<li class="qtab-3 last">Ready</li>
</ul>
</div>
I have created some that come close to my final wished result but I’m still having trouble with example to indent the text so it is not showed.
Here is my CSS so far:
ul.quicktabs_tabs li {display:inline; }
#quicktabs-2 li.active a {
background-image:url(question-active.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:135px;
padding-right:5px;
}
#quicktabs-2 li.qtab-1 a {
background-image:url(lead-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
background-image:url(board.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-3 a {
background-image:url(ready-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
This is my code so far and it shows my images correctly with the right spacing between them but the text within the a-href I just can’t get hidden.
I’m fairly certain that it is just a question of hitting the right style-class / id but I’ve tried a lot of different combination and I just can’t get it to work.
Any help would be very much appreciated.
Thank you
Sincere
- Mestika
If you want to hide your text within your anchor tag simply add {text-indent:-9999px} this will move your text to -9999px but will hide your text. This method is called IR - Image Replacement
Edit: Here is a Reference provided by #Faust
It sounds like your main concern is to replace the text in the link (no?).
If you have the access to alter the link text, and you're allowed to include markup with those values that does not get HTML-character encoded,
Then by surrounding each link text with spans ( e.g: Question --> <span>Question</span>), so that each line looks like:
<li class="qtab-0 active first"><span>Question<span></li>
...then you can hide the text with this CSS:
#quicktabs-2 a span {display:none;}
Otherwise, I think your only other recourse is to make the text extremely small and close to the color of the images:
#quicktabs-2 a {font-size:1px;text-decoration:none;color:grey}
I want to create a MediaWiki template which shows different text depending on where it is on a page.
Specifically, it is before the first heading it should show text like, "this template is applicable to this whole page"
Alternatively, if it is within a section on a page (after a heading) it should show text like, "this template is specifically applicable to this section".
I know there are templates that make use of "If" (like If pagename); is there any way of detecting the template's location on the page?
I don't think so. Your best bet would be to make multiple templates. That being said I'm sure you could write an extension that would do this.
Another way would be to add a variable in your template, that you change depending on which section it is in.
With a lot of help from a colleague the answer is below. Put this into a template (which you then call from all your other templates containing header / instruction / etc. text).
<includeonly><css>
div.headingText { color: blue; border: 2px solid blue; background: lightcyan; width: 461px; padding:0.5em 0.5em 0.5em 0.5em; display: none; margin-bottom:-6px; }
h2 + div.headingText, h3 + div.headingText, h4 + div.headingText, h5 + div.headingText, h6 + div.headingText { display:block; margin-top:5px; }
</css>
<div class="headingText">'''{{{1|This [[tag]] applies only to this section.}}}'''</div></includeonly><noinclude>
your explanatory text
</noinclude>
Notes:
This requires use of the CSS extension.
What this actually does is show certain text if the tag is included directly below a title and no text otherwise. (It has default text in parameter 1 in this example, which can be changed.)