How can I create inline CSS in a WordPress PHP file without referencing to an external CSS file?
Tags: php,css,wordpress
Problem :
I want to enqueue a string of CSS directly from a Wordpress plugin. I don't want to load it from an external file, and I don't want to debate why this is the write or wrong thing to do, I just want to know if it is possible.
In other words, I know I can do this:
wp_register_style('myStyleSheet', 'my-stylesheet.php');
wp_enqueue_style( 'myStyleSheet');
But I don't wan't to.
What I want to do is something like this (pseudocode):
$number = get_option('some_width')/2;
$css = " .divbox { width: $number; } ";
wp_register_style('myStyleSheet', $css);
wp_enqueue_style( 'myStyleSheet');
I read the wp codex for wp_register_style() and it doesn't seem possible. Anyone have a suggestion?
Solution :
Well that was silly of me. I found the answer a few minutes later. Desperation is a good motivator! :)
The trick is not to use wp_register_style() and wp_enqueue_style()
Here is what I did:
function myStyleSheet() {
global $value;
$num = $value/2;
echo '
<style type="text/css">
.divbox { width: '.$num.'; }
</style>
';
}
add_action( 'wp_print_styles', 'myStyleSheet' );
Still, maybe there is a better way?
CSS Howto..
Edited for working solution. I assume that your object for streams is similar to what I created there, at least enough so. $(document).ready(function() { var streams = { home: [...
Not exactly cross-browser but works. Hope I've understood your request. http://jsfiddle.net/wmDNr/3/ .triangle { position: relative; width: 20px; margin-top: 100px; } .triangle>div { width: 20px; height: 2px; background: red; margin-top: 100px;...
Demo. Use display:inline-block;, and adjust the width of both objects. I manually set the height of the main div to 300px for presentation purpose. Note that your inner objects have...
For some reason, bodyId seem to require regular js, <script type="text/javascript"> if ( window.CKEDITOR ) { window.CKEDITOR.config.bodyId = 'thePage'; } </script> And browser-caches can be a pain.. regards,...
Try this: <style type="text/css"> a img { text-decoration: none } // Images within </style> However, this is awfully general and if your anchors have padding, it won't work entirely, there...
Using the (CSS2) attribute selector: .error[for="username"] This will work in IE8+ and all modern browsers. IE7's attribute selector is buggy: as explained here, to match for you must use htmlFor....
Hope this helps extremely simple simply add this code where you want it then there is no left and right links to next n prev if want images same size...
$("ul li").click(function (event) { var barIndex = $("ul li").index($(this)) + 1; alert("Element poistion:" + barIndex); }); ul { list-style-type:none; width:95px; float:left; } ul li { border-bottom:1px solid; } p...
Change justify-content: center for align-items: center Like this: .container-5col { display: flex; align-items: center; } ...
It would help if you could post the css as well. What you normally need is something like this <ul id="nav"> <li><a>one</a></li> <li class="active"><a>two</a></li> </ul> the css would be: #nav...
In the same way you can do this .class.class2.class3 { /*styles*/ } to target only things that have all 3 classes, you can can combine attribute selectors to do the...
Use rotateX(), rotateY() or rotateZ() combined, like: .card:hover { transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg); } Have a look at this snippet below: .card { background-image: url("https://i.stack.imgur.com/FW7wN.png"); height: 100px; margin: 50px auto;...
IE Does not support: transform-style: preserve-3d check here regards Shiva ...
Drop the width on the inputField class and change the display on the nameField and inputField classes from inline to inline-block. jsFiddle example. CSS: .nameField{ display:inline-block; width:80px; text-align: right; padding:...
You can override the css defined by jQuery UI css in your application css file or on the page. You can set the padding as below and override all the...
You are missing the "descendant combinator" (whitespace, usually just a single space character) between the 2 selectors: #form2 .formlegend { padding: 10px; } Without the descendant combinator, your selector will...
No % is relative depending on the parents height. If you want to set it based on some other div you will need to get that div's height then set...
Instead of using class ChartDiv why don't you use bootstrap class col-sm-6 and put all the contents inside a div in it.
Try this: var elem = $(location.hash).css('background-color', '#FC9A24'); setTimeout(function() { elem.css({"background-color":"transparent", "transition":"background-color 0.5s ease"}); }, 2000); ...
Since you're styling input directly, radiobuttons and checkboxes will also be targeted. An easy way to avoid that is to use the :not() selector like so: input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=image]):not([type=button]):focus. Note that this...
Try adding some JavaScript. In my case i added html attribute onmouseover and onmouseleave to call a javascript function. fun1 on hover and fun 2 onleave. I added id hover...
it's the margin on the P tags inside those divs which is creating the vertical space. set container div p {margin:0} and it all goes away.
Your files css and js are not loaded because load use .innerHTML property to parse the retrieved document and insert it into the current document. To load scripts, you should...
var animation1 = $('.animation1').height(); var animation2 = $('.animation2').height(); var animation3 = $('.animation3').height(); var animation4 = $('.animation4').height(); needs to be var animation1 = $('.animation1').offset().top; var animation2 = $('.animation2').offset().top; var animation3 =...
Try putting !important between the value and the semi-colon in your print stylesheet: body { background-color: #0f0 !important; } ...
You can come in and out of PHP at will: <?php if(isset($_SESSION['email'])) { ?> <a href="http://localhost/ci/myads_view">MY ADS</a> <?php } ?> In the above, if the PHP if statement evaluates to...
Use two divs, see this fiddle: HTML: <div id="wrapper"> <div id="content"></div> </div> CSS: #wrapper { background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat; } #content { background-color: yellow; opacity: 0.5; width: 477px; height: 318px; }...
Since you cannot use less or sass, what you can do is use a temp css class name and replace it using jQuery like following code, Html <div class="temp-class">aaaaaaaaaaaaaa</div> <div...
I have obtained dissolve effect by css using keyframes and overriding the CSS of jQuery Mobile. Please add @-webkit-keyframes ,@-moz-keyframes, and @-o-keyframes in CSS like @keyframes added below. @keyframes dissolve-out...
As jsteinmann said, check use http://validator.w3.org/ to ensure your page validates. This will take some time to figure out if you are new, but it is an essential step. If...