Create
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 
Sign up Log in
Products
See all
Community resources
Top groups
Explore all groups
Community resources
Learn
Community resources
Events
Community resources

Announcement Banner

Tayyab Bashir
Tayyab Bashir
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
December 7, 2015

Hi, 
I added a little script and css in the announcement banner to make this clock down appear, but when I do that somehow my added CSS or javascript is messing with the  JIRA Interface. 
See the attached screenshots. 

I don't want the appearance of JIRA to change in anyway after adding the code in banner. 

 Any suggestions? 

Capture.PNGCapture1.PNGSee how the linings and appearance has changed after I added the script.

Answer
Watch
Like Be the first to like this
1447 views

3 answers

1 accepted

1 vote
Answer accepted
GabrielleJ
GabrielleJ
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
December 7, 2015

What I suspect here is that you have put an updated a common css (like <h1> or <body>) in your clock that JIRA is also using that affected its own display. Check that.

To get around this, rename all the css tags that you have for your clock so it. Like..

myclocktimer-body{
    text-align: center;
    background: #00ECB9;
  font-family: sans-serif;
  font-weight: 100;
}
myclocktimer-h1{
  color: #396;
  font-weight: 100;
  font-size: 40px;
  margin: 40px 0px 20px;
}
#myclocktimer{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
}

 

Also, as Jonas pointed, please share the code so we can be sure what it is.

View More Comments
Tayyab Bashir
Tayyab Bashir
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
December 7, 2015

I was using <body> tag and applying css to it as: body{ text-align: center; background: #00ECB9; } so now I referred to that with its ID in css, Now things are working fine. Thank you :)

Like
GabrielleJ
GabrielleJ
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
December 8, 2015

Good to know! Cheers!

Like
Reply
0 votes
Mario Günter
Mario Günter
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
December 7, 2015

Hi Muhammad, 

please ensure that you don't have duplicate classes or ids in your clocks css definition.

Best Regards,
Mario 

Reply
0 votes
Jonas Andersson
Jonas Andersson
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
Get recognized
December 7, 2015

Showing the html/javascript could be useful, but without it i can only recommend you to make sure you use w3 complient html5, where you make an extra effort closing all tags and not reusing frame-names.

Reply

Suggest an answer

Log in or Sign up to answer
Jira
Jira Software
TAGS
AUG Leaders

Atlassian Community Events

    See all events