We Keep Coding

Category supertitle color change

I need assisstance with category supertitle background color.
I got 5 categorys, and I want everyone one of them to have different supertitle color.
So, when I add a new post it should automaticly change supertitle color according to its category.
So, I can easyly change its background color with CSS to red lets say, but then I have to do it every time someone adds a new post.
Is there a way around it?
Lets say someone adds a new post with "sport" category and I want that supertitle background color to be green every time, and if its category "culture" I want that supertitle to be blue.
My current code is here but its not working:
`.is-section-vukovar-danas .post-cat .cat-btn .cat-btn-color:not(.is-prominent), .is-section-vukovar-danas.has-label-background-color-inherit .post-cat .cat-btn .cat-btn-color {background-color:red;}
website url is here:
https://vukovar.dnevno.hr/`
All supertitles are black now...
Thank you in advance!
Best regards

Javascript dropdown border size and color

I am working in the CRM and I have created a form. In my form, I have some dropdown lists. How do I change the border size and color using JavaScript?
To change the color and border for text boxes is easy. The code I have been using is this:
function colorchanger(){
document.getElementById("fieldname").style.borderColor="#FF0000";
}
I have used this code for all fields that are text boxes and it works absolutely fine. I have googled this problem for an hour but can only find how to change dropdown menus for css and html.
I used this code but it didn't work:
document.getElementById().style.border="5px solid #0000ff"
Help!

In order to have a border color, you need a border width.
​<select id="fieldname"><option>XX</option></select>
<script>
document.getElementById("fieldname").style.border="5px solid #0000ff";
</script>

I too face the same problem with the select input.
By using the below i got it fixed.
$('#selectId').parent().css('border-color','red');

onclick png background color change

I need to design a part of webpage like below the image. In the left side, there is color options. If the user pick any color from the left side and click on the image part, the part of the image should get filled by the picked color. I spent more time to google search. Most of the sites used flash only. But i do not know flash very well. Is it possible to achieve using jquery plugin?

You'll probably want to look into the <canvas> element. As for filling a particular bit of the image when clicked, you may want the floodfill algorithm.

Really this can be done simply, if you have strict control over what png files you use.
For example, you can make the png fully opaque with the exception of the area you want to colour.
Then you can load the image and just set the background colour of the element you are using when a colour is clicked.
Something like this:
$(".ColorOption").click(function(e){
e.preventDefault();
var color = $(this).data("color");
$("#MainImageBackground").css("background-color", color);
});
assuming you set up your colour options using the data attribute like so:
<a data-color="#F00"></a>
with your image something like:
<div id="MainImageBackground">
<img src="whatever"/>
</div>

You can solve this with Javascript, but therefore you need for every color a own image.
<script language="JavaScript" type="text/javascript">
function changePic(picColor)
{
if(picName == "btnRed")
{
document.getElementById(mainPic).src = "mainPicRed.jpg"
}
else if(picName == "btnYellow")
{
document.getElementById(mainPic).src = "mainPicYellow.jpg"
}
}
</script>
HTML for every color button:
<img src="red.jpg" name="btnRed" id="btnRed" onClick="changePic(this.name)">
<img src="mainPic.jpg" name="mainPic" id="mainPic">

Idea 1:
User the canvas element and look at fill methods, this is probably going to be more complex than flash.
Idea 2:
Create transparent PNG where the colourd area is the only part that is transparent.
Create 2 DIVS, 1 at z-index 10 and other at 20, same size, same position
Place image in top div which is z-index 20. Then change the colour of the background in div 1 which is at z-index 10.

To accept any png and fill the middle:
You can find information on the floodfill algorithm in javascript here:
http://jsfiddle.net/loktar/ZLw9m/
However your implementation will have to be more advanced as you need to convert the image to a format javascript understands (0's and 1's for example) and then run the algorithm on that
As #musefan pointed out if you can control the PNG's this is much easier

Add text to jQuery Slideshow / Carousel

I really like Demo#3 on this page: http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
However I'd like to place text at the foot of each 'set' of slides.
So, Panels 1 to 3 would have custom text saying "this is just the first set" and then when you click the disc shape (for Panels 3 to 5) this text would be replaced by "and this is another set".
How easy is this to achieve? To change a custom text area for each click of the slider.
Thank you for any pointers.

i think closest (easiest) answer is this:
http://caroufredsel.frebsite.nl/
however you can also achieve that with
http://jquery.malsup.com/cycle/
http://jquery.malsup.com/cycle/pager3.html
with a little more coding you can use simple:
http://demos.flesler.com/jquery/scrollTo/

Is there a way to change the slider colour in an embedded YouTube video?

Specifically, I'd like to change the progress bar to blue.

They don't give you the option? I don't like 'don't' <--- A great bit of irony.
P.S. I Answered on this question as it's top on Google Search with this specific question.
I use this to change the colour of the progress bar with simple hands down CSS...
.ytp-play-progress {
color: blue;
}

Nope! Unfortunately, they just don't let you do that.

http://apiblog.youtube.com/2011/08/coming-soon-dark-player-for-embeds.html
You can change the color to white or red. That's all.