JIRA-Activity Stream, Need to change background color of comments from the blue color to something else

[wajdhaikal]

Hi,

I need only to modify the below embedded CSS styles (background color), I could not reach where to modify it,Is there any way? I have JIRA source, does scripts help to achieve this, any idea?

This CSS found in rendered page:

com.atlassian.streams:streamsWebResources/com.atlassian.streams: streamsWebResources.css

.activity-item-description blockquote {

background: #E0F0FF;

border-left: 1px solid #C2D9EF;

color: #222;

font-style: normal;

margin: 0 0 .7em .2em;

overflow-x: auto;

overflow-y: hidden;

padding: .3em .7em .3em .7em;

}

[Andrew Frayling · Accepted solution]

Finally got this working thanks to the tips from Sean Curtis on my question at https://answers.atlassian.com/questions/41896/where-does-streamswebresources-css-live - go give Sean some points over on that thread.

To get this working:

1. Shutdown JIRA
2. Delete <JIRA Home>/plugins/.bundled_ plugins
3. Delete <JIRA Home>/plugins/.osgi-plugins
4. Unzip <JIRA Installation>/atlassian-jira/WEB-INF/classes/atlassian-bundled-plugins.zip to a temporary directory
5. UnJAR jira-gadgets-plugin-4.4.4.jar
6. Add the following to style/common.css extracted from the above JAR file:

.activity-item-summary .activity-item-description blockquote {
background: #FF0000;
border-left: 1px solid #C2D9EF;
color: #222;
font-style: normal;
margin: 0 0 .7em .2em;
overflow-x: auto;
overflow-y: hidden;
padding: .3em .7em .3em .7em;
}

Note 1: .activity-item-summary is needed to make sure this declaration gets picked up rather than the declaration in streamsWebResources.css

Note 2: obviously set background (or any other element) to the values that you want

7. JAR the modified common.css back into jira-gadgets-plugin-4.4.4.jar
8. ZIP all of the JAR files extracted in step 4 back into <JIRA Installation>/atlassian-jira/WEB-INF/classes/atlassian-bundled-plugins.zip
9. Restart JIRA

If it doesn't pick up the changes you made to common.css check the actual content of the newly deployed common.css and clear your browser caches to make sure your browser is picking up the latest version of common.css - first time I tried this it wasn't working, but it was a browser cache issue.

Hopefully this works for you.

Andrew.

[Andrew Frayling]

Hi,

Out of curiosity did this solution work for you? If it did could you mark my answer as correct please?

Thanks,

Andrew.

[wajdhaikal]

Andrew.. I was so busy , now is ok . thanks for your support.

[Jacob Gilley]

Hello,

I was able to find a solution to this one that works for v6.2.7. It's very similar to Andrew's solution:

1. Shutdown JIRA

2. Delete <JIRA Home>/plugins/.bundled_ plugins

3. Delete <JIRA Home>/plugins/.osgi-plugins

4. Unzip <JIRA Installation>/atlassian-jira/WEB-INF/classes/atlassian-bundled-plugins.zip to a temporary directory

5. UnJAR streams-aggregator-plugin-5.3.26.jar

6. Modify the following two files in the /css/streams sub-folder: activity-stream.css, activity-stream-min.css

7. Modify the ".activity-item-description blockquote" CSS definitions to your liking in both files.

7. JAR everything back into streams-aggregator-plugin-5.3.26.jar

8. ZIP all of the JAR files extracted in step 4 back into <JIRA Installation>/atlassian-jira/WEB-INF/classes/atlassian-bundled-plugins.zip

9. Restart JIRA

Thanks for giving me some direction on this one, Andrew.

-- Jake

[Dieter]

A less invasive approach than the others might be using javascript. If you are sure all comments are included in a div element with class .activity-item-description the following could be placed in a document ready handler placed in the announcement banner: AJS.$(".activity-item-description blockquote").css("color", "#222") or whatever else you want to change

[Dieter]

My answer at https://answers.atlassian.com/questions/33517/hide-tabs-like-issue-types-etc-from-project-role-administrators shows how to add a document ready handler to the announcement banner and execute some jquery magic inside that

[wajdhaikal]

I tried with javascript it did not work also, Andrew.. have you tried it?

can you test the javascript approach , appritiated ...

[Andrew Frayling]

I just tried:

<script>
AJS.toInit(function() {
	AJS.$(".activity-item-description blockquote").css("background-color","#FF0000");
});
</script>

and it did not work.

Will try tracking down streamWebresrouces.css again - it's got to be in a JAR file somewhere!!

[Dieter]

I see now that the javascript approach will not work that easy since the background color changes dynamically when you hover over comment. Sorry, i should have read better ...

[Andrew Frayling]

OK, I'm at a total loss now.

I've been through every JAR file in atlassian-bundled-plugins.zip and streamsWebResources.css doesn't exist so I'm starting to think it's generated, but I've no idea what it's getting generated from.

I also tried altering common.css again and made sure I deleted all the plugin caches, but the change still didn't take.

[Andrew Frayling]

Hi,

A similar question was asked recently - https://answers.atlassian.com/questions/38299/jira-css-font-family-font-color-in-activity-stream-and-dashboard-gadgets - does the solution in that thread work for you as well?

Andrew.

[wajdhaikal]

Hi,

I tried but in my case its streamsWebResources.css and not common.css which is not there , I need this because I customized JIRA to another color scheme, this blue color is very far from ours now

[wajdhaikal]

Hi,

I tried but I have JIRA 4.4, the color css is from

com.atlassian.streams:streamsWebResources/com.atlassian.streams: streamsWebResources.css

Please Advice .

[Andrew Frayling]

Sorry the other solution wasn't appropriate. I've searched in vain for streamsWebResources.css and cannot find it anywhere so wonder if it's generated rather than being a physical file?

What if you override .activity-item-description blockquote in common.css? You'd have 2 definitions, but only one of them would be applied. Does that work?

Andrew.

[wajdhaikal]

Can you please tell me the path you use to reach the common.css, and what should I type? does this require jira new build ?

I'm thinkg to use a java script to update the color on the header template. Will this work?

[Andrew Frayling]

You don't need to build from source, but to alter common.css you need to:

1. Unzip <JIRA Installation Directory>WEB-INF/classes/atlassian-bundled-plugins.zip
2. UnJAR the jira-gadgets-plugin-4.4.4.jar that's zipped inside atlassian-bundled-plugins.zip
3. Make your changes to styles/common.css
4. Re-JAR the changes back into jira-gadgets-plugin-4.4.4.jar
5. Re-Zip jira-gadgets-plugin-4.4.4.jar back into atlassian-bundled-plugins.zip
6. Restart JIRA

It might be easier to to embed the CSS in the header either with Javascript or just within a <style> block which should work just as well, either way it's customisations to make a note of as the changes will be overwritten with upgrades.

Hope that helps?

Andrew.

[wajdhaikal]

Thanks Andrew for the explanaion..

I tried, I have embedded this <style> block into the header.jsp located at jira-home\includes\decorators\

<style>

.activity-item-description blockquote {

background: #ffffff;

border-left: 1px solid #C2D9EF;

color: #222;

font-style: normal;

margin: 0 0 .7em .2em;

overflow-x: auto;

overflow-y: hidden;

padding: .3em .7em .3em .7em;

}

</style>

but it did not change any thing! , I will try modifiying common.css

[wajdhaikal]

Actually I did modificaion to the common.css and followed the steps above very carefully , nothing changed, the I don't think common .css file affects the activity streams gadget, its the streamsWebResources.css, but I dont know where it is found.

What to do now? :)

[Andrew Frayling]

Sorry, those didn't work. I'm trying a few things on a test system to see if I can figure this out and I'm still waiting on an answer to the specific question of where streamsWebResources.css is at https://answers.atlassian.com/questions/41896/where-does-streamswebresources-css-live

[wajdhaikal]

I ried with javascript it did not work also, Andrew have you tried it? can you test the javascript approach , appritiated ...