how can I use of a php variable into a .css file
Tags: php,html,css
Problem :
I have a css file named test.css and I want to use into it of $var.$var is at test.php. test.css is attached in test.php. My structure is something like this:
//test.php
<html>
<head>
<?php $var = 'anything';?>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
</html>
and this is test.css:
// test.css
.<?php echo $var> { // css property }
Currently test.css does not work. In fact, I want to knoe how can I use of a php variable as a class name into a css file ?
Solution :
Actually you can.
1st Solution
Instead of using the .css file extension, use .php
Set up variables
<?php
header("Content-type: text/css; charset: UTF-8"); //look carefully to this line
$brandColor = "#990000";
$linkColor = "#555555";
?>
Use variables
#header {
background: url("<?php echo $CDNURL; ?>/images/header-bg.png") no-repeat;
}
a {
color: <?php echo $linkColor; ?>;
}
...
ul#main-nav li a {
color: <?php echo $linkColor; ?>;
}
2nd and short solution
Create a file and name it like style.php, then in your style.php set your styles in tags like below
style.php
<style>
.blabla{
....
}
#heeeHoo{
...
}
</style>
then include style.php to your file (test.php) like
<html>
<head>
<?php include 'style.php'; ?>
</head>
<body>
</body>
</html>
That is the correct answer. Think like inline css but that is actually in external file
CSS Howto..
You're making it harder than it has to be with your left and margin-left on your fixed and userimg classes. Try this CSS instead. Remove the left and margin-left on...
Change your styles on the li to be: list-style: none outside none; jsFiddle: http://jsfiddle.net/Lekdkj4o/1/...
You may want to use display:table-cell on li: See demo fiddle: http://jsfiddle.net/abhitalks/mF24t/4/ li { width: 100px; display: table-cell; border: 1px solid gray; padding: 2px; } Update: Variation 2: http://jsfiddle.net/abhitalks/mF24t/13/ Use...
Just add padding to the #about_us box while slice its width and height accordingly: #about_us { padding:20px 40px; } and configure line-height for the p label: #about_us p { line-height:40px;...
If it's anything like the default navbar for bootstrap, some of these should affect to it: .nav { background-color: rgb(255,255,0); } .nav a { color: #FFF; } And if it's...
Floating and clearing .ItemNumberResult should move it below the image and let the other content stay up on the right. .ItemNumberResult{ background-color: #2D2D29; color: #DFECE6; margin-bottom: 50px; margin-top: 10px; width:...
You seem to just be missing some quotes (the value of style.backgroundImage should be a string): function func() { var label = document.getElementById('label-interest1'); if(document.getElementById('interest_inet').checked) { label.style.backgroundImage = 'url(images/internetbutton.gif)'; } else...
Assuming you don't want to use images as text replacement, there are several techniques, that adapt font enhancement in very unobtrusive way: using flash - SIFR pure css = @font-face...
As I understand it you need footer to be on the left side of the sidebar when content height is smaller and full width bellow sidebar when content is higher....
You should change objectName of needed widget, not QAction. You can get this widget with widgetForAction() method. For example: QToolBar tool; QAction * foo = new QAction("foo",&tool); QAction * bar...
I believe you can mimic the readonly attribute with pointer-events: none, wouldn't it suit you? <input type="radio" id="radio1" onclick="return false" style="pointer-events: none;"/> Or you could handle this situation in backend....
Use background-image and background-position instead of border-image. Here's a good place to start with: http://coding.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/ Check MDN for a comprehensive documentation: https://developer.mozilla.org/en-US/docs/CSS/background...
Yes, use a background image :) #got-easier { background-image: url(/i/trend-down.gif); } Remember to set a span to display: block; and set width/height of your image if you use it. As...
The likes of google fonts will allow you to alter the type faces for this. The below snippet suggests the basic use of this: @import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light); div{ font-family: 'Shadows Into...
There are so many ways to achieve that with CSS. See the example below and adjust as needed. * { margin: 0 auto; } #color-bar { width: 100%; height: 150px;...
After doing some research and writing up my answer, I stumbled upon this link that explains everything you need to know about CSS, when it is loaded and how you...
Use three tween points in your keyframes declaration, and remove the alternate keyword. The non-alternate version of your original keyframes declaration would be: @-webkit-keyframes line-animation { 0% { -- start...
Your <div> is inheriting a font-size of 0 from .hi-icon. Remove that, and it shows below the circle.
On parent (#headerwhiteback) set: text-align: center; Then on #nav, remove: position: absolute; float: left; And add this CSS: #nav { display: inline-block; } #nav::before { content: ""; clear: both; }...
The table's padding was causing the space around the container . By removing the padding the table was then flush with the container. The table also had a margin bottom...
firstly, make sure #loading must be display:none;, and then just add beforeSend method in your $.ajax();, like this one : $.ajax({ url: "info.php?info_id="+id, type: 'get', beforeSend: function(){ $("#loading").fadeIn(100); }, }).done(function(data)...
CSS: .part1 { background: url(bkgd.jpg) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; } JS: using jquery $(window).resize(function () { $(".part1").css("min-height", $(window).height()); }); $(document).ready(function ()...
Add vertical-align: top to .lt-block-tagline. .lt-block-tagline { background-color: #0590A0; width: 420px; height: 140px; display: inline-block; color: #FFF; font-size: 30px; padding: 18px; font-family: "Lato"; line-height: 32px; vertical-align: top; } To remove...
From your picture, I assume you want the parralax image to be right below the nav right?… which I think is fixed. Well, just do a margin-top: to the main-container,...
Simple... .two { display:inline-block; } And my fiddle http://jsfiddle.net/blackhawx/LfN9C/6/...
write like this css: .sketch_img_thumb_box{ opacity: 0.1; } .sketch_img_thumb_box:hover{ opacity: 1; } html: <div class="sketch_img_thumb_box"> <div class="title"></div> <div class="artist"></div> <div class="rating_bar"></div> </div> because if you give opacity the parent then...
Heres what you can do. JsFiddle Change your CSS code to: img { width:50px; height:800px; background-size: 100%; } This will allow to image to stretch in order to fill the...
you can use multiple spans that are positioned on top of each other and assign a different height and color to each of them. Its really ugly coding wise, but...
In CoffeeScript, I also edited it to use globals for the purpose of generalizing. I'm not using global variables. $('#div').bind 'touchstart', touchstart $('#div').bind 'touchmove', touchmove touchstart: (event) => if event.originalEvent.touches.length...
"Is HTML and CSS impossible to learn well in a week?" In a word, yes. Can you write a basic page by following something like, "Learn html in 24 hours"?...