How can I add a new button in the WMD editor, like the code button? If I click on the button <info></info> tag will add on the selected text like code button.
There is a newer version of the repository called wmd-new. As described on the StackOverflow blog this version uses CSS sprites for better performance. So the toolbar is a single graphic:
There is a PSD (Photoshop) file for the toolbar in the repository that you can edit. Basically you need to add a new button to the wmd.css and the wmd.js files. Look around line 93 in the CSS and you'll see:
/* sprite button slicing style information */
#wmd-button-bar #wmd-bold-button {left: 0px; background-position: 0px 0;}
#wmd-button-bar #wmd-italic-button {left: 25px; background-position: -20px 0;}
#wmd-button-bar #wmd-spacer1 {left: 50px;}
#wmd-button-bar #wmd-link-button {left: 75px; background-position: -40px 0;}
#wmd-button-bar #wmd-quote-button {left: 100px; background-position: -60px 0;}
#wmd-button-bar #wmd-code-button {left: 125px; background-position: -80px 0;}
#wmd-button-bar #wmd-image-button {left: 150px; background-position: -100px 0;}
#wmd-button-bar #wmd-spacer2 {left: 175px;}
#wmd-button-bar #wmd-olist-button {left: 200px; background-position: -120px 0;}
#wmd-button-bar #wmd-ulist-button {left: 225px; background-position: -140px 0;}
#wmd-button-bar #wmd-heading-button {left: 250px; background-position: -160px 0;}
#wmd-button-bar #wmd-hr-button {left: 275px; background-position: -180px 0;}
#wmd-button-bar #wmd-spacer3 {left: 300px;}
#wmd-button-bar #wmd-undo-button {left: 325px; background-position: -200px 0;}
#wmd-button-bar #wmd-redo-button {left: 350px; background-position: -220px 0;}
#wmd-button-bar #wmd-help-button {right: 0px; background-position: -240px 0;}
Note how the original styling of wmd-button-bar and the how left is being used above.
Related
This absolutely positioned pseudo-element has a position:relative parent. We should expect its border styles to be applied, but they are not. Why?
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: #ffffff;
}
.tooltip-hard-coded {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid #e5e5e5;
background-color: #ffffff;
}
.tooltip-hard-coded::after {
position: absolute;
top: 11px;
right: 100%;
left: -9px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: red;
background-color: pink;
}
<div style="display: flex; flex-direction: column">
<div style="padding: 32px;">
<div class="tooltip">With CSS variables</div>
</div>
<div style="padding: 32px;">
<div class="tooltip-hard-coded">With hard-coded values</div>
</div>
</div>
<div class="tooltip">Hi</div>
no border with the following CSS:
:root {
--color-border: #E5E5E5;
--color-background: #FFFFFF;
}
.tooltip {
position: relative;
border-radius: 3px;
padding: 16px;
border: 1px solid var(--color-border);
background-color: var(--color-background);
}
.tooltip::after {
position: absolute;
top: 11px;
right: 100%;
left: -8px;
display: block;
width: 8px;
height: 16px;
pointer-events: none;
content: "";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
border-width: 1px;
border-style: solid;
border-color: var(--color-border);
background-color: var(--color-background);
}
when hard-coding a border color value, the pseudo-element only gets the style partially applied:
<div class="tooltip-hard-coded">With hard-coded values</div>
with hard-coded values:
<div class="tooltip-hard-coded">With hard-coded values</div>
What is the correct way to apply border styles to an absolutely positioned pseudo-element using CSS custom properties?
Tried several variations of the styles applied to pseudo-element; tried hard-coded values, tried changing display methods, etc
I have a media query that is working as it should in safari ios but text is not resizing on chrome ios.
I'm just simply trying to nest all of the breaking points for that particular h1 tag.
.page-h1 {
color: #000;
text-align: center;
z-index: 1001;
position: relative;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
padding-top: 20px;
#media screen and (min-width: 380px) {
font-size: 16px !important;
letter-spacing: 2px;
}
#media screen and(min-width: 420px) {
font-size: 22px !important;
letter-spacing: 2px;
}
#media screen and(min-width: 650px) {
font-size: 2em;
letter-spacing: 2px;
}
#media screen and(min-width: 980px) {
font-size: 3em;
letter-spacing: 2px;
}
#media screen and(min-width: 1400px) {
font-size: 3.5em;
letter-spacing: 2px;
}
}
It was a minor syntax issue. I just need to add the 'only'.
.landing-h1 {
#media only screen and (min-width: 320px) {
font-size: 25px;
line-height: 23px;
margin-top: 48%;
letter-spacing: 2px;
word-spacing: 3px;
}
#media only screen and (min-width: 40px) {
font-size: 30px;
line-height: 40px;
margin-top: 33%;
letter-spacing: 2px;
word-spacing: 5px;
}
#media only screen and (min-width: 650px) {
font-size: 3.3em;
line-height: 60px;
margin-top: 24%;
letter-spacing: 2px;
word-spacing: 10px;
}
#media only screen and (min-width: 960px) {
font-size: 5em;
line-height: 95px;
margin-top: 16%;
letter-spacing: 2px;
word-spacing: 15px;
}
color: #fccd31;
text-align: center;
z-index: 100001;
position: relative;
margin-top: 14%;
font-family: 'Avenir';
font-size: 5em;
line-height: 100px;
text-transform: uppercase;
}
Having very weird problem with FlexBox testing on a iPhone6.
On iPhone6 the FlexBox elements are not shown at all. As I understand they are hidden beneath each other.
As I don't own such device - I can't test it... I've used some online browser testers with trial subscription.
I've made this jsFiddle:
.flex-container {
display:-webkit-box;
display:flex;
display: -ms-flexbox;
-ms-flex-wrap: wrap;
-o-flex-wrap: wrap;
flex-wrap:wrap;
-ms-flex-wrap: wrap;
text-align:center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
color: #fff;
}
.flex-container .item h2{
font-size: 1.1em;
font-weight: 300;
}
.flex-container>div {
-webkit-box-flex: 0;
-ms-flex: 0 1 50%;
flex: 0 1 50%;
-webkit-box-sizing:border-box;
box-sizing:border-box;
max-width: 50%;
}
.flex-container .item:first-child {
background: #986a4b;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: left;
}
.flex-container .item.third, .flex-container .item.third article{
background: #fff;
color:#986a4b;
}
.flex-container .item:nth-child(4) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
/*IE11*/
.flex-container .item .first{height: /*100%;*/ auto; min-height: 1px;}
.flex-container .item img {
width: 100%;
}
.flex-container .item:not(img){
padding: 1em;
}
.flex-container .item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
text-align: center;
color: #fff;
font-size: 0.9em;
}
.flex-container .item {
background: #fff;
}
.flex-container .margin{padding:60px;}
.flex-container article {
color: #9f6a4a;
}
#media screen and (max-width: 1000px){
.flex-container .item .box .inner{font-size:1.5em;}
.flex-container .item{-webkit-box-flex:1;-ms-flex:1 0 100%;flex:1 0 100%;}
}
#media screen and (max-width: 600px){
.flex-container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
}
Through a browserstack it seems to work well.
But on my live website it doesn't... The code is the same. I really don't understand how to fix it.. Already used such hacks such as min-height: 1px but no luck...
replaced dispaly: flex;
with display: -webkit-flex
solved it for me
Could be resolved in two ways:
1). shorthand: flex: 1 1;
2). -webkit-flex: 1 1 100%;
I'm trying to use Stellar.js as multiple backgrounds inside of single element such as content. Anything that I've tried not working at all..
Default output look like this:
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.photo span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
}
.summer {
background-image: url(images/1.png);
}
.autumn {
background-image: url(images/2.png);
}
.winter {
background-image: url(images/3.png);
}
.spring {
background-image: url(images/4.png);
}
<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
<div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div>
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>
<div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div>
<div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div>
But I want it to be something like that
.photo {
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
height: 450px;
position: relative;
}
.photo span {
bottom: 0;
color: white;
display: block;
left: 50%;
margin-left: -640px;
font-size: 38px;
padding: 10px;
position: absolute;
text-shadow: 0 2px 0 black, 0 0 10px black;
width: 1280px;
background-image: url(images/1.png), url(images/2.png), url(images/3.png), url(images/4.png);
}
<div class="photo" data-stellar-background-ratio="1.0"><div>content</div></div>
I'm quite new to this and need some help. Maybe it just couldn't work as I want?
I've a CSS question. I'm using Rails 3.0 and trying to design a site of mine. I found this anoying problem previously also but now is the time to find a solution.
The situation: I set up a CSS like this:
* {margin: 0;padding: 0;}
body {background-color: #1d1122; font:12px/18px Arial, Tahoma, Verdana, sans-serif #fff; width: 100%;}
a {color: blue; outline: none; text-decoration: underline;}
a:hover {text-decoration: none;}
p {margin: 0 0 18px}
img {border: none;}
input {vertical-align: middle;}
#wrapper {width: 955px; margin: 0 auto;}
/* Header
-----------------------------------------------------------------------------*/
#header {background: transparent url(../images/header.jpg) no-repeat; height: 413px;}
#navigation {background: transparent url(../images/menu_bg.jpg) no-repeat; height:36px;}
/* Middle
-----------------------------------------------------------------------------*/
#middle {width: 100%; height: 1%; position: relative;}
#middle:after {content: '.'; display: block; clear: both; visibility: hidden; height: 0;}
#container {background: transparent url(../images/main_bg.jpg) no-repeat; width: 100%; float: left; overflow: hidden;}
#content {padding: 0 270px 0 0;}
/* Sidebar Right
-----------------------------------------------------------------------------*/
#sideRight {float: left; margin-right: -3px; width: 313px; margin-left: -313px; position: relative;}
/* Footer
-----------------------------------------------------------------------------*/
#footer {background: transparent url(../images/footer.jpg) no-repeat; height: 63px;}
/*Content
-----------------------------------------------------------------------------*/
#prediction_box {width:290px; height:200px; position:relative; background-color:#392b3f; border: 1px solid #000; margin: 25px 25px 40px 40px;}
When I start to write something on my index page, this wont be 12px Arial as I set in the body tag. The wierness starts if I wan't to have the text in white.
body {font-color:#fff; background-color: #1d1122; font:12px/18px Arial, Tahoma, Verdana, sans-serif #fff; width: 100%;}
If I use the font-color:#fff; than nothing happens. However if I use font: #fff 12px/18px etc... than suddenly the texts will be Arial 12px but still in black!
Can you explain how is this possible?
Looking forward your answears,
Kael
CSS does not define a font-color property. You'll need to use the color property as so: color: #fff; in order for the foreground colour (font colour) to become white.