• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

how to change the main color of Notices?

erich37

Well-known member
#1
I would like to have specific Notices to be in different color than the default light-blue.
How do I change the main-color of one specific Notice from blue, to the same color as the yellow Prefix?
I would like to have it the same as the default transparent appearance, just changing the main color.

Many thanks!
 

erich37

Well-known member
#3
thanks Brogan, but how do I apply a Notice-Style to a specific Notice ?

I am also unsure of how to have a specific Notice with vertical scrolling and another Notice with horizontal scrolling ? Is this possible at all?

Do I need to create a new Style (child-style) for my whole Forum in order to create ONE specific Notice with a different style ?
 

erich37

Well-known member
#5
your only option is to use the styles property page to make the notice transparent then to add your css styling in each actual notice.
where to put the CSS for ONE specific notice ?
It seems it is not possible to customize the CSS for the Notices, maybe in a specific template ?

I do have a Forum with a Notice.
And I just want to change the main-color of that ONE Notice for that ONE Forum-Node only.
 

dieketzer

Well-known member
#6
where to put the CSS for ONE specific notice ?
It seems it is not possible to customize the CSS for the Notices, maybe in a specific template ?
you change it in the actual notice.
ie:
Code:
<p class="errorPanel" align="center">
<span class="errorHeading" >maintenance mode</span><br />
it may be a good idea to paste comments into a txt document prior to submission until this maintenance is complete. </p>
I do have a Forum with a Notice.
And I just want to change the main-color of that ONE Notice for that ONE Forum-Node only.
is the notice set to only display in that node?
if its not, and you wish to have the same notice using different colours in different nodes that would be more complex. i havent tried anything like that although i am sure it could be done.
 

erich37

Well-known member
#9
you change it in the actual notice.
ie:
Code:
<p class="errorPanel" align="center">
<span class="errorHeading" >maintenance mode</span><br />
it may be a good idea to paste comments into a txt document prior to submission until this maintenance is complete. </p>
is the notice set to only display in that node?
yeah, I just want to change the default style of ONE Notice in ONE Node. It is just a single Notice, it is not a "scrolling" Notice.

I am not sure where to put the Code you have mentioned? Into the "Message"-box of the Notice itself ? Hmm... not sure if this will change the color (border-color, bg-color) of the Notice ?
 

dieketzer

Well-known member
#10
you put the code into the notice.
create a new notice and make it visible to yourself. paste the code above into the notice and try it.
 

ChemicalKicks

Well-known member
#11
I would like to have specific Notices to be in different color than the default light-blue.
How do I change the main-color of one specific Notice from blue, to the same color as the yellow Prefix?
I would like to have it the same as the default transparent appearance, just changing the main color.

Many thanks!
Did you ever get this sorted? Funnily enough I want to change a notice to yellow for one specific forum but just have all the other properties the same.
 

Brogan

XenForo moderator
Staff member
#12
Create two notices - one for the specific forum, another for the rest of the site.

For the specific forum, uncheck the Add default notice text styling option and add the custom styling to the notice contents.
 

ChemicalKicks

Well-known member
#13
Create two notices - one for the specific forum, another for the rest of the site.

For the specific forum, uncheck the Add default notice text styling option and add the custom styling to the notice contents.
Hey Brogan thanks for the response, that's the thing mate I have no clue about styling. All I want is the yellow background colour that matches the yellow in thread prefixes and everything else to be the same.

I googled about and landed on a couple of pages here but they all say "add styling" I don't know anything about that so I'm stuck on what's probably the simplest thing to do.
 

Brogan

XenForo moderator
Staff member
#14
The default prefix css just uses the standard HTML colour yellow, so you could do something like this:

<div class="messageText ugc baseHtml" style="background-color: yellow">
<div style="padding: 10px">
Notice text here
<div style="padding: 10px">
</div>

That's going to look fairly basic though, so you can just add other style elements as required.

The inner div is to ensure there is padding between the notice border and the content text.
 

ChemicalKicks

Well-known member
#15
The default prefix css just uses the standard HTML colour yellow, so you could do something like this:

<div class="messageText ugc baseHtml" style="background-color: yellow">
Notice text here
</div>

That's going to look fairly basic though, so you can just add other style elements as required.
Is it really that simple?

*checks*
 

Brogan

XenForo moderator
Staff member
#16
I updated the code above to add an inner div due to a lack of padding.

Don't forget to uncheck the default styling option for that notice.
 

Brogan

XenForo moderator
Staff member
#19
It is controlled by Style Properties -> Notices.

For the notice you want, you need to uncheck the option in the specific notice.

notice.PNG

That will get rid of the blue background then.
 

ChemicalKicks

Well-known member
#20
It is controlled by Style Properties -> Notices.

For the notice you want, you need to uncheck the option in the specific notice.

View attachment 23273

That will get rid of the blue background then.
Ah yes you're going by the screeny above, I got that sorted. :) The text styling within the notices is more like message text and not notice text ;) how do I get the notice style of text back? :)

With the notices the text is vertically aligned, any idea how to achieve that?