How can I define a start number for ‘ol’ list other than 1 via css
You can use “start” attribute for “ol” list.
<ol start="5"> <li>Item 1</li> <li>Item 2</li> </ol>
How can I hide the publish button, when I edit or add new page or post
You can use jquery or css to hide WordPress Publish button.
function softwarehtec_hide_publish_button() { ?> <style> #publishing-action { display: none; } </style> <script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#major-publishing-actions").html(""); }); </script> <?php } add_action( 'admin_head', 'softwarehtec_hide_publish_button' );
How can I change the input placeholder’s color via css
Here is the example to change the color of input placeholder via css
::-webkit-input-placeholder { /* set input placeholder color for WebKit, Blink, Edge */ color: black; } :-moz-placeholder { /* set input placeholder color for Mozilla Firefox 4 to 18 */ color: black; opacity: 1; } ::-moz-placeholder { /* set input placeholder color for Mozilla Firefox 19+ */ color: black; opacity: 1; } :-ms-input-placeholder { /* set input placeholder color for Internet Explorer 10-11 */ color: black; } ::-ms-input-placeholder { /* set input placeholder color for Microsoft Edge */ color: black; }
How can I make multiple select always show vertical scrollbar
You can do it via CSS
overflow-x: hidden; overflow-y: scroll;
I would like to display the label of an input inside its input, so when I click the input field, the label of the input field will animate and go above the input and change the styles of the input’s border.
I think you can use Google Material Design Input Boxes, here is the example
.input-group { position: relative; margin: 40px 0 20px; } input { font-size: 18px; padding: 10px 10px 10px 5px; display: block; width: 300px; border: none; border-bottom: 1px solid #757575; } input:focus { outline: none; } label { color: #999; font-size: 18px; font-weight: normal; position: absolute; pointer-events: none; left: 5px; top: 10px; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } input:focus ~ label, input:valid ~ label { top: -20px; font-size: 14px; color: #4285f4; } .bar { position: relative; display:block; width:315px; } .bar:before, .bar:after { content: ''; height: 2px; width: 0; bottom: 1px; position: absolute; background: #4285f4; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } .bar:before { left: 50%; } .bar:after { right: 50%; } input:focus ~ .bar:before, input:focus ~ .bar:after { width: 50%; } .highlight { position: absolute; height: 60%; width: 100px; top: 25%; left: 0; pointer-events: none; opacity: 0.5; } input:focus ~ .highlight { -webkit-animation: inputHighlighter 0.3s ease; -moz-animation: inputHighlighter 0.3s ease; animation: inputHighlighter 0.3s ease; } /* animations */ @-webkit-keyframes inputHighlighter { from { background: #4285f4; } to { width: 0; background: transparent; } } @-moz-keyframes inputHighlighter { from { background: #4285f4; } to { width: 0; background: transparent; } } @keyframes inputHighlighter { from { background: #4285f4; } to { width: 0; background: transparent; } }
<div class="input-group"> <input type="text" required> <span class="highlight"></span> <span class="bar"></span> <label>Username</label> </div> <div class="input-group"> <input type="password" required> <span class="highlight"></span> <span class="bar"></span> <label>Password</label> </div>
How can I modify wordpress quote styles via my style file.
You can modify quote styles via your theme style file.
it should look like following
#posts .post blockquote, #posts .page blockquote{ padding-left:45px; background:url(images/blockqoute.png) top left no-repeat; font-style:italic; min-height:35px; color:#999;}
P.S the code will be different depending on what theme you’re using however it should be similar which you can find it in your stylesheet.
The box-sizing:border-box is not working on margin
Margin is not part of the box-model, so it will always be in addition to the width + padding + border you’ve declared.
The image below explain the difference between the standard box-model and box-sizing: border-box: The box at the top shows the default box model. The box at the bottom shows what was once the “quirks mode” interpretation of the box model.
“from the CSS Tricks“
I would like to know how to set a div to be same height of current windows in css
div { height:100vh; }
Whats the RSS icon color
RSS Orange
Hex: #ff6600
RGB: 255, 102, 0
Whats the Behance icon color
Behance Blue
Hex: #1769ff
RGB: 23, 105, 255