How to create a CSS to set forecolor of text from JS as red color?

Sign in to vote

User475983607 posted

How to create a CSS to set forecolor of text from bs.js as red color?

CSS is applied to DOM elements. You've only shown a js file reference. It is not possible to answer this question given the code snippet.

Wednesday, December 19, 2018 12:46 PM

0

Sign in to vote

User546194788 posted

I updated code as below. CSS font-family, size and style are all working.

How to add font color in CSS?

font-family: Calibri;
font-size: 8px;
font-style:italic;

.PanelStyle {
z-index: 1;
left: 45px;
top: 190px;
;
height: 500px;
width: 1000px;
font-family: Calibri;
font-size: 8px;
font-style:italic;
}

<asp:Panel ID="pnlAll" runat="server" class="PanelStyle">
<script type="text/jscript" src="https://theapplicantmanager.com/bs.js"></script>
</asp:Panel>

Wednesday, December 19, 2018 3:13 PM

0

Sign in to vote

User-271186128 posted

Hi aspfun,

aspfun

I updated code as below. CSS font-family, size and style are all working.

How to add font color in CSS?

font-family: Calibri;
font-size: 8px;
font-style:italic;

.PanelStyle {
z-index: 1;
left: 45px;
top: 190px;
;
height: 500px;
width: 1000px;
font-family: Calibri;
font-size: 8px;
font-style:italic;
}

<asp:Panel ID="pnlAll" runat="server" class="PanelStyle">
<script type="text/jscript" src="https://theapplicantmanager.com/bs.js"></script>
</asp:Panel>

You could directly using the CSS color property.

Try to use the following code:

    <style type="text/css">
        .PanelStyle {
            z-index: 1;
            left: 45px;
            top: 190px;
            ;
            height: 500px;
            width: 1000px;
            font-family: Calibri;
            font-size: 8px;
            color:red;
            font-style: italic;
        }
        .PanelStyle #TextBox1{
            color:aqua;
        }
    </style>
        <script type="text/jscript" src="https://theapplicantmanager.com/bs.js"></script>
        <asp:Panel ID="pnlAll" runat="server" class="PanelStyle">
            Name :
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </asp:Panel>

The output as below:

By the way, please check the JavaScript reference, the link display 404 not found error.

Best regards,
Dillion

Thursday, December 20, 2018 1:56 AM

0

Sign in to vote

User546194788 posted

For text box, color will work but my code is as below which put bs.js within panel tag.

It did not work.


        <asp:Panel ID="pnlAll" runat="server" class="PanelStyle">
                <script type="text/jscript" src="https://theapplicantmanager.com/bs.js"></script>
        </asp:Panel>

Thursday, December 20, 2018 12:18 PM

0

Sign in to vote

User546194788 posted

CSS code below is working.

.PanelStyle {
z-index: 1;
left: 45px;
top: 190px;
;
height: 500px;
width: 1000px;
font-family: Calibri;
font-size: 8px;
font-style: italic;
text-align: center;
text-decoration: underline;
}

But color never work.

text-decoration-color: red;

Thursday, December 20, 2018 12:37 PM

0

Sign in to vote

User475983607 posted

Again, CSS is applied to DOM elements using a selector. We cannot answer this question without seeing the actual HTML markup. Either view the HTML source or use dev tools. The element view in dev tools allows you to copy an element selector which you can then use in the CSS to select the element(s).

https://chrome.google.com/webstore/detail/copy-css-selector/kemkenbgbgodoglfkkejbdcpojnodnkg?hl=en

Thursday, December 20, 2018 12:48 PM

0

Sign in to vote

User546194788 posted

Here is entire HTML code.

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.PanelStyle {
z-index: 1;
left: 45px;
top: 190px;
;
height: 500px;
width: 1000px;
font-family: Calibri;
font-size: 8px;
font-style: italic;
text-align: center;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="PanelStyle">
<script src="https://theapplicantmanager.com/jobfeeds/bs.js"></script>
</div>
</body>
</html>

Thursday, December 20, 2018 1:01 PM

0

Sign in to vote

User475983607 posted

Here is entire HTML code.

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
.PanelStyle {
z-index: 1;
left: 45px;
top: 190px;
;
height: 500px;
width: 1000px;
font-family: Calibri;
font-size: 8px;
font-style: italic;
text-align: center;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="PanelStyle">
<script src="https://theapplicantmanager.com/jobfeeds/bs.js"></script>
</div>
</body>
</html>

You are not providing relevant information. What does this do? Does it render HTML, JSON, XML? Can you explain at a high level what you are trying to do?

<script src="https://theapplicantmanager.com/jobfeeds/bs.js"></script>

Is there any way you can open dev tools or View Source then past the resulting HTML on the forum? At this point we're can only guess...

Thursday, December 20, 2018 1:11 PM

0

Sign in to vote

User546194788 posted

Company HR department has a contract with TAM (https://www.tamrecruiting.com/ )

HR upload jobs' titles and details into TAM and I need to create a page to display jobs list based on JS script.

<script src="https://theapplicantmanager.com/jobfeeds/bs.js"></script> (bs.js is a demo, each company has its own code, like xxx.js)

From HTML, jobs will list like below. The list will update automatically.

Accounts Payable Clerk (San Rafael, CA)
Business Analyst (Novato, CA)
Controller (San Francisco, CA)
Controller II- Short App and EEO (San Francisco, CA; Phoenix, AZ)
Programs Manager (San Rafael, CA)
Research Assistant - short app (San Rafael, CA)
Security Officer (San Rafael, CA)
Security Officer (San Rafael, CA)

I already completed the page and display listing of jobs like demo.

But, I still did not know how to change text color using CSS.

Thursday, December 20, 2018 1:36 PM

0

Sign in to vote

User475983607 posted

Does bs.js render HTML, JSON, or XML? Can you post the resulting HTML from the browser's View Source or Elements in Dev Tools?

But, I still did not know how to change text color using CSS.

If the text is XML or JSON then you need to write code to transform the data to HTML. If the result is HTML then we need the HTML markup in order to find the correct CSS selector.

Thursday, December 20, 2018 2:23 PM

0

Sign in to vote

User546194788 posted

Here are another two companies using TAM.

https://www.cavallopoint.com/careers.html

Thursday, December 20, 2018 2:34 PM

0

Sign in to vote

User475983607 posted

aspfun

Here are another two companies using TAM.

https://www.cavallopoint.com/careers.html

https://www.cavallopoint.com/careers.html

I'm not totally sure if this is the same file, but that site has a cp.js file which contains this code....

document.write("<div id=\"theapplicantmanager\">");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP762\" target=\"_blank\">Accounts Payable Clerk</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP758\" target=\"_blank\">Baker</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP768\" target=\"_blank\">Banquet Chef</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP764\" target=\"_blank\">Banquet House Person/ Set up Attendant</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP752\" target=\"_blank\">Banquet Server</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP760\" target=\"_blank\">Bartender</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP770\" target=\"_blank\">Bell/Valet Attendant</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP747\" target=\"_blank\">Cooking School Assistant</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP748\" target=\"_blank\">Dishwasher (lavar los platos)</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP743\" target=\"_blank\">Engineering Generalist I</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP746\" target=\"_blank\">Engineering Generalist Supervisor</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP771\" target=\"_blank\">Event Manager</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP755\" target=\"_blank\">Guest Relations Specialist (Curator)</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP765\" target=\"_blank\">Guest Services Manager</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP750\" target=\"_blank\">Housekeeping Room Attendant</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP767\" target=\"_blank\">Landscaper/Gardener</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP744\" target=\"_blank\">Line Cook</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP756\" target=\"_blank\">Male Locker Room Attendant</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP736\" target=\"_blank\">Massage Therapist</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP757\" target=\"_blank\">Pastry Cook</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP751\" target=\"_blank\">Restaurant Busser</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP763\" target=\"_blank\">Restaurant Host/Hostess</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP732\" target=\"_blank\">Restaurant Manager</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP753\" target=\"_blank\">Room Service Server</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP686\" target=\"_blank\">Runner</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP761\" target=\"_blank\">Sales and Catering Coordinator</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP769\" target=\"_blank\">Server - Murray Circle</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<div class=\"listing\">");
document.write("<h2 class=\"title\"><a href=\"https://theapplicantmanager.com/jobs?pos=CP745\" target=\"_blank\">Sous Chef</a></h2>");
document.write("<p class=\"description\"></p>");
document.write("</div>");
document.write("<p class=\"resumes\">If we don't currently have an open position in your area, you may submit ");
document.write("a <a href=\"https://theapplicantmanager.com/jobs?pos=CP0000\" target=\"_blank\">Resume</a>");
document.write(" or ");
document.write("an <a href=\"https://theapplicantmanager.com/application?co=cp&new\" target=\"_blank\">Application for Employment</a>");
document.write("</p>");
document.write("<p>If you already have an application in progress you can retrieve and edit it by clicking <a href=\"https://theapplicantmanager.com/application?co=cp&retrieve\" target=\"_blank\">here</a></p>");
document.write("</div>");

When I right click in one the links and select inspect the HTML looks like this.

<h2 class="title"><a href="https://theapplicantmanager.com/jobs?pos=CP762" target="_blank">Accounts Payable Clerk</a></h2>

The CSS to add an underline is simply.

.title > a {
	text-decoration-color: red;
}

I assume your bs.js file has similar code but there is no way to know because for some reason you will not post the source code. Please use the browser's dev tools to view the results of the bs.js file and post it here. Otherwise, I recommend that you contact the 3rd party for support.

Thursday, December 20, 2018 2:47 PM

0

Sign in to vote

User546194788 posted

My source code is only like I posted because I only got one js file like below.

I don't think that TAM will give me more js files.

Boss want me to create a page based on that js file.

Thursday, December 20, 2018 2:53 PM

0

Sign in to vote

User475983607 posted

aspfun

My source code is only like I posted because I only got one js file like below.

I don't think that TAM will give me more js files.

Boss want me to create a page based on that js file.

<script type="text/jscript" src="https://theapplicantmanager.com/jobfeeds/bs.js"></script>

Just open the bs.js file in your browser to see the contents. If you have the file just open it in a text editor.

You have been on these forums for a long time. IMHO, you should know how to use the browser's debugging tools and you should know how to view the HTML source from the browser.

Thursday, December 20, 2018 3:12 PM

0

Sign in to vote

User-271186128 posted

Hi aspfun,

aspfun

My source code is only like I posted because I only got one js file like below.

I don't think that TAM will give me more js files.

Boss want me to create a page based on that js file.

<script type="text/jscript" src="https://theapplicantmanager.com/jobfeeds/bs.js"></script>

Do you mean you want to change the a tag (hyperlink) color? If that is the case, please refer to the following code:

    <style type="text/css">
        .PanelStyle {
            z-index: 1;
            left: 45px;
            top: 190px;
            ;
            height: 500px;
            width: 1000px;
            font-family: Calibri;
            font-size: 8px;
            color: red;    /*change the text color*/
            font-style: italic;
        }
            /*find the textbox and change the value color*/
            .PanelStyle #TextBox1 {
                color: aqua;
            }
            /* find all of the a tag, and change the color */
            .PanelStyle a{
              color:aquamarine;
            
            }
    </style>

        <asp:Panel ID="pnlAll" runat="server" class="PanelStyle">
            <script type="text/jscript" src="https://theapplicantmanager.com/jobfeeds/bs.js"></script>
            Name :
            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        </asp:Panel>

The output as below:

More details about CSS selector, please check this article.

Best regards,
Dillion

Friday, December 21, 2018 8:56 AM

Asked by:

How to create a CSS to set forecolor of text from JS as red color?

Question

All replies

aspfun

aspfun

aspfun

aspfun