XF 2.3 2 questions on formatting notices

[Elisabeth_K]

I have two questions about notice formatting. I am not a coder or programmer and am new at this but I have managed to fumble my way through a few things with much trial and error but still have questions.

QUESTION #1

In the notice below is it possible to make the ►► CLICK HERE ◄◄ hyperlink a different color?
I am able to make it bold (strong) but have tried a million combinations and cannot change the color of the link itself.


This is the code for this notice

<center><normal style="color: #00ccff ;font-size: 19px">
Enter our quote of the week contest • Everyone can vote •
</normal> </br>
<color style="color: #ff00ff;font-size: 16px">
For updated rules and to enter or vote </color>
<a href="https://www.citadel-81.com/xen/threads/quote-of-the-week-1-enter-once-a-day-everyone-can-vote.288/#post-1326">
.....<strong>►► CLICK HERE ◄◄</strong></a> </center>

QUESTION #2

Is it possible to add additional colors for accent backgrounds using custom CSS class names and where would I do this?

I have been able to make about 20 different prefix colors in the core_labels.less template and a variety of user banner colors in the app_users_banners.less template but can't find similar options or syntax in any of the notice templates

Dark

Accent


This is the code for this notice

<center><strong><text style="color: #00ff00">
Scheduled Maintenance •  Sunday June 27, 10:00 pm PST -  Board closed appx 1 hour for upgrade
</text></strong></br><color style="color: #ffff66">
Monday 1:00 am EST. -  6:00 am London - 3:00 pm AEST
</color></center>

I've noticed with no color formatting, when using the accent background has it's own font color.
I suspect this it tied into too many things to mess with? Am I correct?

No color formatting.


A no, it isn't possible or too hard and complicated would be an acceptable answer. If it is possible, if someone could point me in the right direction I would appreciate it.

Thanks.

 

[Mr Lucky]

I'm not sure about your elements normal and color, I've never heard of those but whatever they seem to work but I'm sure the more standard way would be to use span or p (paragraph).

For your hyperlink color just do what you did for normal, e.g. <a style ="color:red">. This however will not change on hover, for which you need classes and an external style sheet. (Use the extra.less template for this)


To change the background of the dark notice, e.g. again use template extra.less

.notice--dark
{background:red}

For accent

.notice--accent
{background:red}

If it doesn't work try prioritising:

.notice--dark
{background:red!important}

Also, yes you can use a custom class, and again use the extra.less template as above as your style sheet

 

[Elisabeth_K]

Again, very helpful to me as you've always been. Thank you!

Obviously I don't know what I'm doing. The elements normal and color and how they are used is something I found somewhere? I've also used things like text and special and the </> closing tags or whatever they're called gets automatically picked up and populated so it would seem anything works? I've named the styles differently because I didn't know if it would get confused reusing them. Fortunately, I've figured out just enough to mostly do what I want to do, even if it isn't the standard way.

 

[Mr Lucky]

so it would seem anything works?...even if it isn't the standard way.

If it does work it may only be on some specific browsers, or may stop working at some point in the future. I would advise sticking to the (latest) standards, e.g. what you can find on W3schools

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

HTML elements reference - HTML | MDN

This page lists all the HTML elements, which are created using tags.

developer.mozilla.org

 

[Elisabeth_K]

This issue has been solved but I am so happy with the results, I thought I would follow up.

Being able to change the background color on notices with display styling set to dark by changing the color with the added lines in the extra.less template is fantastic and gives me so many more options than just plain dark or the brownish accent color. I didn't even bother adding the extra.less lines for the accent color because it is just so easy to change the dark settings to whatever I want. I would only change the accent color background if I was going to use multiple notices I wanted to look differently.



One curiosity I did discover is when a hyperlink is added to a notice using the default accent styling, because the accent notice has its own built in font coloring, it also has it's own color for the link. Interesting, huh?



Also as recommended, I've stopped using funky element names. I still don't know what I'm doing but I'm getting better at it!



I appreciate all the help that has been given to me here, it's really great!