Currently, I am working on PHP codeignitor framework. I have some properties suppose like color,fonts etc. saved in my database for one of fields. All I want to do is, I have some classes in the css file with default values. Like ex. I have a css class as below:
.text_box{
color: pink;
text-decoration: none;
background-color: transparent !important;
transition: all 0.2s ease-in-out 0s;
}
.text_box:hover{
color: blue;
text-decoration: none;
background-color: transparent !important;
transition: all 0.2s ease-in-out 0s;
}
In my database, I have set color property as yellow for text box. I want to change it dynamically. means when I change that color from input field, it should automatically get converts into the color I want in css property.
I dont know exactly whether my question is correct or not. I have goggled many links but didn't get the relevant solution to my scenario.
Using PHP how can create such dynamic changes.
Thank you.
You can do it using jQuery.
var color = "value from DB";
$('.text_box').css({ 'color' : color, });
or in PHP:
<?php
$color = 'value from DB'; //you have to get the value from db
?>
<style>
.text_box {
color: <?php echo $color; ?>;
}
</style>
Hope this works.
You can check Smarty
Basically, you read the values from your database and then you assign them to the template and then you will get dynamically loaded classes.
Php or javascript won't change your css file directly, but what you want to do is use Php or javascript to dynamically assign an id (#) to your HTML element that has the associated css you want.
#pink.text_box{
color: pink; //...
}
#blue.text_box{
color: blue; //...
}
And then use your javascript or php code to assign the id to the element you need
Check if you can use color picker tool. This is the best solution I think
http://www.dynamicdrive.com/dynamicindex11/yuicolorpicker/
Try using multiple css files like
css_red.css
css_blue.css
css_green.css with different default colors.
Then in php echo your stylesheet <link href="<?php echo "css_yourcolor";?>.css" >
Related
I am trying to edit a drop down menu which I defined recently in function.php file in WordPress.
So I want to show two menu in header of WordPress like this :
So I want to increase the width of menu and want to make this like this :
So if I am trying to put code in a div and trying to increase width of div then the whole thing is increasing and if I am trying to inspect element then its showing this :
element.style {
}
input, button, select, textarea {
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button, select {
text-transform: none;
}
So how I can modify element.style when its not define anywhere in stylesheet.
I have added width to the global select element of theme style sheet.
select{padding: 6px 8px; border-radius: 0; outline: 0;width:209px}
You can increase css priority by nested class.
Demo:-
<span><p>hair</p></span>
CSS:-
p{color:red;}
span p{color :blue;}
The above demo will display blue colour text.
Element style define in main source code, like this:
<select class="btn fixed" style="width:250px"></select>
You should overwrite some code to CSS file.
.btn.fixed[style] {width: 800px !important;}
Like when style a 'placeholder' attribute in 'input' element.
I would like a DIV's background-color to change when I hover over it. I can get it to work if I don't set the background-color in the DIV's style property but I don't understand why this stops the hover colour from being applied?
<style>
.hovery {
cursor: pointer;
display: block;
float: left;
margin-bottom: 4px;
margin-right: 10px;
border: 1px solid gray;
border-radius: 6px;
}
.hovery:hover {
background-color: black;
}
</style>
When I create my DIV (in PHP) I'm using the code below and I'm setting the background-color property at the time of creation so that I can set the 'selected' one to a different colour than all the other DIVs:
echo "<div class='hovery' style='background-color: " . ($onthis==$shrow['Name'] ? $_SESSION['branding_buttonColour'] : "#EEEEFF;"). " '>\r\n";
I've discovered that if I don't set the background-color in the code above then the hover colour-change works, but why does setting the background-color prevent the hover colour from working? Aren't they two different things?
This is called specificity and you are giving the whole strength to the inline styling. Avoid it or make javascript tricks (like on hover adding a classname). You can make too this:
.hovery:hover {
background-color: black !important;
}
But I don't like it so much. If the inline styles are mandatory for your requirements, use !important. Otherwise, remove the inline styles.
You're best off adding a class to the element within PHP, then controlling the background-color of that class with CSS.
The added benefits of this is keeping your code clean, avoiding use of inline styles (which over-rides every rule) and you can easily change the class via Javascript which in turn changes the color.
Hi I've been trying to create a smart button menu set in an drupal block that remembers which button has been clicked (which site it is on). For reasons that don't matter, it is not a menu it's an in-block item. I created the following in-line:
<div>Overview</div>
<div>Instruments</div>
<div>Travel</div>
This coupled with the following css produces lovely buttons:
.button {
background-color: #61210b;
color: white;
float:left;
padding: 2px;
border: 2px solid #000000;
border-radius: 5px;
text-shadow: 1px 1px #000000;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: 'verdana';
margin-bottom: 10px;}
.button:hover {
background-color: green;
color: white;}
.button:focus {
background-color: green;
color: white;}
.button:active {
background-color: green;
color: white;}
So everything above works great. However, the green activation color does NOT stay. As soon as I go click it goes back to what it was before. I want it to 'show' the page it is on with it's color change and only the currently chosen button will have the green color. What I have not works great except for that little issue. I've read around on the site a bit and here are some things that do not work:
--> inline php, creates errors link unreadable, if I define a class as selected with a different color, this does NOT work:
Overview
What also does not work is defining an additional class in the <a href > or <div> to make it 'selected', at best if I use the css file and do
.selected a { color: green; }
#selected a { color: green: }
I can permanently change the color to green, which is not what I want at all. I saw the discussion previously of using lists <li id="selected"> to create menues but not only does this not give me very nice buttons like my div format does, it also flat out does not work. See: CSS: How to change colour of active navigation page menu
The color just changes permanently, I only want it to change color if page=page of link. Since I'm using div this means I also cannot use the other pseudo-class-selector tricks like :target or :root. I have a feeling php is the way to go but I don't know why it can't be read in-line from my drupal box item. It has no problems with html or css in-line. Any ideas?
Try this code
CSS
.button:active, .button.selected {
background-color: green;
color: white;
}
PHP
Overview
what you wrote is calling for something else...
.selected a is targeting any element with the class "selected" which is inside an anchor tag, what you mean is an anchor tag which has the class selected = a.selected
ok, so I heard back from our system administrator and Drupal safety settings do not allow for in-line php or java scripting. There is literally no way to do this with div statements. The only way is to delete everything and make a new block of type menu block. In a menu block the psuedo-class :active will stay active if you use css
li .active
otherwise you can try to get php enabled but most drupal areas do not allow that or java scripting (at least it's not allowed where I am).
So... this is my problem:
I made a list of links using a php loop.
What I want to do next is to colour each and everyone of them, but with a different colour when hovered over by the mouse. (red and lime)
These colours will be stacked inside a .txt file (I already figured that part out).
I've already found a way to do so, but it was creating a new div every time the loop was done and doing such, there was that space between divs that I don't like.
a {
color:white;
-o-transition:color .3s ease-out;
-ms-transition:color .3s ease-out;
-moz-transition:color .3s ease-out;
-webkit-transition:color .3s ease-out;
transition:color .3s ease-out;
text-decoration: none;
}
a:hover { color:cyan; }
This is my css code for the normal hover (in case there is neither red nor lime for that link)
I'm trying to tell the "code" which colour to apply by using php variables (already figured that part too).
My question is: Is it possible to have, let's say, "subclasses" to a class? I mean, to be able to make a "subclass" for the lime and one for the red, having all in ONE div and applying them by php variables.
SOLVED! Thank you all very much for your help and sorry that I couldn't be more exact when writing this.
If it is to use 3 colors and swap to another each time , nth-child is your friend: DEMO
a:hover {
background:cyan;
}
li:nth-child(3n) a:hover {
background:red;
}
li:nth-child(3n-1) a:hover {
background:lime;
}
You can use multiple classes for subclasses of a CSS class.
But in your case you could simply add only one class link-lime/link-red like <a class="link-lime"... or <a class="link-red"... along with the CSS-rules a.link-lime:hover { color:lime } a.link-red:hover { color:red }
I am trying to think of the best way to make a really small thermometer image, that can be easily edited by typing in a number (dollar value) and having the image change based on the value.
The simplest way to achieve this is the best. It will be going online onto a site that is using a CMS called spip.
Does anything small like this exist? and if i have to create it myself what's the best way to go about it?
The basic concept here is very simple; check out this fiddle. It's a basic nested div:
<div id='thermometer'>
<div id='level'>
</div>
</div>
which takes input from some form element:
<input type='text' id='fill'>
and some simple styling:
#thermometer { height: 15px; width: 100px; margin:5px; padding:0; border: #cccccc solid 1px; }
#level { height: 15px; width: 40px; margin: 0; padding:0; border-right: 1px solid #666666; background: #ffcccc; }
and a tiny bit of javascript:
$('#fill').keyup(function() {
$('#level').css('width',this.value);
});
Granted, this has no error checking, and could use a lot more work to make it robust, but it does what you ask it to do.
Layer two divs, each having part of the thermometer image, and hide parts of the red indicator bit div.
html 5 canvas + jquery or, a vary simple method will be to use divs, one on top of the other to simulate the thermometer levels. and simply change the background to red when the value increase or decrease
Something like this should work:
<?php
$goal = 100; // need to raise $100
$done = 78; // got $78 so far, e.g. 78% done
$full_size = '200'; // 200px
?>
<style type="text/css">
#thermometer {
width: <?php echo floor($full_size * ($done / $goal)) ?>px;
height: 1em;
color: red;
}
</style>
<div id="thermometer"></div>
Create a small text input form element that the user can enter a dollar amount into. Use jQuery and hook that element's onblur event, and within that hook, redraw the image as you want, scaling and all.
Don't have an example, but some simple steps for a PHP + CSS solution.
Use PHP to calculate the percentage of your goal met.
Use this percentage to calculate a CSS background-position property to show more or less of the thermometer background image by setting the style attribute inline with PHP.
UPDATE
For everyone that is gawking at doing this with PHP - how do you think JavaScript is getting the value to begin with? If PHP generates the page output and calculates the value, having PHP output the style directly is perfectly acceptable and keeps this at the source.