Цвета css для xenforo

Изменение цветов на XenForo

• Тема закрыта

#1 Bastet

Пользователь

742 сообщений

Отправлено 22 Апрель 2014 — 7:02

Доброго всем. Имеется форум XenForo 1.2.4. Мне нужно (предоставила скрин для наглядности):

1. Сделать ник цветным

2. Изменить цвет надписи «Модератор»

3. Изменить цвет надписи «Команда форума»

Если есть знающие, подскажите пошаговую инструкцию, т.к. в форумах я не особо разбираюсь.

#2 gravestal

Пользователь

510 сообщений

Отправлено 22 Апрель 2014 — 11:12

P/S Искал в гугле, возможно и на 3 можно найти.

Сообщение отредактировал gravestal: 22 Апрель 2014 — 11:13

#3 Bastet

Пользователь

742 сообщений

Отправлено 22 Апрель 2014 — 12:17

Всё дело в том, что я имею доступ только к Панели Управления. Там никак нельзя это настроить?

#4 gravestal

Пользователь

510 сообщений

Отправлено 22 Апрель 2014 — 14:40

Всё дело в том, что я имею доступ только к Панели Управления. Там никак нельзя это настроить?

Ник сменить можно и через ПУ.

#5 Bastet

Пользователь

742 сообщений

Отправлено 22 Апрель 2014 — 17:07

Ник сменить можно и через ПУ.

Про «сменить» я в курсе. мне цвета нужны.

#6 ☆★☆БАТЯ☆★☆™

Пользователь

1 433 сообщений

Отправлено 22 Апрель 2014 — 19:21

Про цвет ника — идем в Пользователи — Группы пользователей, в окошке » CSS стиль для имени пользователя: » прописать color:red, вместо red — свой цвет.

Цвет надписи Модератор там же: Модератор

Сообщение отредактировал ☆★☆БАТЯ☆★☆™: 22 Апрель 2014 — 19:33

#7 Bastet

Пользователь

742 сообщений

Отправлено 23 Апрель 2014 — 0:33

Про цвет ника — идем в Пользователи — Группы пользователей, в окошке » CSS стиль для имени пользователя: » прописать color:red, вместо red — свой цвет.

Цвет надписи Модератор там же: Модератор

А если же для конкретного пользователя?

Источник

XF 1.2 Custom CSS class name for banners

I don’t really know CSS. Can anyone give me template of sorts that I can paste into my extra.css and swap the colors out accordingly for the usergroup banners?

James

Well-known member

Ranger375

Well-known member

Yeah but I want to use other colors for my banner. So that is the reason for this post since there are limited color choices.

James

Well-known member

Brogan

XenForo moderator

You can use whatever class names you like.
Just add it to the field.

Ranger375

Well-known member

So I tried making a banner using this in extra.css, but it isn’t displaying as a banner:

.bannermil <
color: @textCtrlBackground;
background-color: @primaryDarker;
border-color: @primaryDark;
>
a.bannerLink:hover .bannermil <
color: black;
background-color: yellow;
border-color: white;
>

James

Well-known member

Divvens

Well-known member

So I tried making a banner using this in extra.css, but it isn’t displaying as a banner:
It is appearing. just not as a banner.

Are you adding the class name on the banner option? Don’t yet have hands on 1.2, but it should be pretty similar to the prefixes from what I’ve seen.

you need to add bannermil (or your class name) in the option for custom css class name.

Edit: AH! I see, you are adding your css but it isn’t displaying same as the banner here on xF forums right? You also need to use the default ribbon css if you are adding your own css (I presume).

Using chrome browser tools, here is the general css rules for banner.

.userBanner.wrapped < -webkit-border-top-right-radius: 0; -moz-border-radius-topright: 0; -khtml-border-top-right-radius: 0; border-top-right-radius: 0; -webkit-border-top-left-radius: 0; -moz-border-radius-topleft: 0; -khtml-border-top-left-radius: 0; border-top-left-radius: 0; position: relative; >.userBanner < font-size: 11px; background: transparent url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top; padding: 1px 5px; border: 1px solid transparent; -webkit-border-radius: 3px; -moz-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25); -moz-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25); -khtml-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25); box-shadow: 1px 1px 3px rgba(0,0,0,0.25); text-align: center; >

Ranger375

Well-known member

Are you adding the class name on the banner option? Don’t yet have hands on 1.2, but it should be pretty similar to the prefixes from what I’ve seen.
View attachment 49392

you need to add bannermil (or your class name) in the option for custom css class name.

I added that class name to the respective field, the only problem is it isn’t displaying as a banner, but the colors are showing in the banner location.

Divvens

Well-known member

I added that class name to the respective field, the only problem is it isn’t displaying as a banner, but the colors are showing in the banner location.

Ranger375

Well-known member

Thanks. I didn’t change your code, I essentially just pasted it into my extra.css. The banner is appearing as a block for me. Any idea what I am doing wrong?

Divvens

Well-known member

Thanks. I didn’t change your code, I essentially just pasted it into my extra.css. The banner is appearing as a block for me. Any idea what I am doing wrong?

Hmm, try this. In the custom css add both classes (with a space between them), your custom class and default class.

So it should be something like:
userBanner bannermil

Ranger375

Well-known member

Divvens

Well-known member

userBanner bannermil wrapped

Ranger375

Well-known member

userBanner bannermil wrapped

userBanner bannermil wrapped didn’t work, but when I used userBanner bannermil.wrapped, it appeared transparent (but wrapped) for some reason lol.

Divvens

Well-known member

userBanner bannermil wrapped didn’t work, but when I used userBanner bannermil.wrapped, it appeared transparent (but wrapped) for some reason lol.

Well, at least we reached ahead somewhere haha.

What is your EXTRA.css statements?

That is mostly what needs to be there in EXTRA.css, you can remove the default classes since they’ll work even without them being mentioned in EXTRA.css, and the «.a» rule isn’t required as far as I see for the banner since it doesn’t contain a hyperlink.

If it continues to be transparent even after removing the unneeded statements from EXTRA.css, add !important to your bannermil rules.

Ranger375

Well-known member

Well, at least we reached ahead somewhere haha.

What is your EXTRA.css statements?

That is mostly what needs to be there in EXTRA.css, you can remove the default classes since they’ll work even without them being mentioned in EXTRA.css, and the «.a» rule isn’t required as far as I see for the banner since it doesn’t contain a hyperlink.

If it continues to be transparent even after removing the unneeded statements from EXTRA.css, add !important to your bannermil rules.

Still no change, but I appreciate the help none the less. This is what’s in the extra.css

.userBanner.wrapped <
-webkit-border-top-right-radius: 0;
-moz-border-radius-topright: 0;
-khtml-border-top-right-radius: 0;
border-top-right-radius: 0;
-webkit-border-top-left-radius: 0;
-moz-border-radius-topleft: 0;
-khtml-border-top-left-radius: 0;
border-top-left-radius: 0; position: relative;
>

.userBanner font-size: 11px;
background: transparent url(‘styles/default/xenforo/gradients/form-button-white-25px.png’) repeat-x top;
padding: 1px 5px;
border: 1px solid transparent;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
-khtml-box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
box-shadow: 1px 1px 3px rgba(0,0,0,0.25);
text-align: center;
>

.bannermil color: @textCtrlBackground !important;
background-color: @primaryDarker !important;
border-color: @primaryDark !important;
>

Источник

Creating custom prefix styling

Creating custom styling using the ‘Other’ field is fairly straightforward.

This guide will explain how to.

rdn

Well-known member

Brogan

XenForo moderator

As long as the icon appears in the font file XF uses, then it’s fine.

If it’s not there, an error will be thrown such as:

XF\CssRenderException: Error rendering template public:extra.less: variable @fa-var-cars is undefined in file public:extra.less in public:extra.less (on or near line 3305) src/XF/CssRenderException.php:87

rdn

Well-known member

Android Icon | Font Awesome

Android icon in the Solid style. Make a bold statement in small sizes.. Available now in Font Awesome 6.

It doesn’t render when use based on your guide.

Brogan

XenForo moderator

That’s a brand icon, so you need to use the brands font, not the regular(pro) font.

.label.label--ctaAnnouncement < &:before < .m-faBase('Brands'); .m-faContent(@fa-var-android); padding-right: 4px; >>

rdn

Well-known member

vandross

New member

For whatever reason this guide didn’t work for me. Has anything changed @Brogan? We’re using a custom Theme House design. Perhaps that’s why it didn’t work for me.

Brogan

XenForo moderator

vandross

New member

Brogan

XenForo moderator

LenKaiser

Active member

Same I’m using the default theme and it does not work for me either.

Edit the colors work just fine for me, its the portion where you add the FontAwesome icons that does not seem to work.

Here is my CSS code for the FA icon:

/*PREFIXES*/ .label.label--belother < &:before < .m-faBase(); .m-faContent(@fa-angle-double-right); padding-right:4px; >>

Here is my CSS for the colors:

&.label--belother < .m-labelVariation(#ffffff, #560777); >&.label--belsuggestion < .m-labelVariation(#ffffff, #141414); >&.label--belfeedback < .m-labelVariation(#ffffff, #df7604); >&.label--belsiteerror < .m-labelVariation(#ffffff, #ae0303); >&.label--belquestion < .m-labelVariation(#ffffff, #ae3b03); >&.label--belsolved < .m-labelVariation(#ffffff, #058814); >&.label--belacctissues < .m-labelVariation(#ffffff, #cc054b); >>

LenKaiser

Active member

I’m getting errors in the Admin Panel related to this:

• XF\CssRenderException: Error rendering template public:extra.less: variable @fa-angle-double-right is undefined in file public:extra.less in public:extra.less (on or near line 3231)
• src/XF/CssRenderException.php:87
• Generated by: Unknown account
• Oct 6, 2019 at 10:00 AM

#0 src/XF/CssRenderer.php(408): XF\CssRenderException::createFromLessException(Object(Less_Exception_Compiler), ‘public:extra.le. ‘, ‘// Note that th. ‘)
#1 src/XF/CssRenderer.php(342): XF\CssRenderer->renderToCss(‘public:extra.le. ‘, ‘// Note that th. ‘)
#2 src/XF/CssRenderer.php(250): XF\CssRenderer->renderTemplate(‘public:extra.le. ‘, NULL)
#3 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates(Array, Array, Array)
#4 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#5 css.php(30): XF\CssWriter->run(Array, 1, 1, ‘b2efe7e1ab72591. ‘)
#6

Previous Less_Exception_Compiler: variable @fa-angle-double-right is undefined in file anonymous-file-0.less in anonymous-file-0.less — src/vendor/oyejorge/less.php/lib/Less/Tree/Variable.php:49
#0 src/vendor/oyejorge/less.php/lib/Less/Tree/Expression.php(52): Less_Tree_Variable->compile(Object(Less_Environment))
#1 src/vendor/oyejorge/less.php/lib/Less/Tree/Mixin/Call.php(43): Less_Tree_Expression->compile(Object(Less_Environment))
#2 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(147): Less_Tree_Mixin_Call->compile(Object(Less_Environment))
#3 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(88): Less_Tree_Ruleset->EvalMixinCalls(Object(Less_Tree_Ruleset), Object(Less_Environment), 11)
#4 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(94): Less_Tree_Ruleset->compile(Object(Less_Environment))
#5 src/vendor/oyejorge/less.php/lib/Less/Tree/Ruleset.php(94): Less_Tree_Ruleset->compile(Object(Less_Environment))
#6 src/vendor/oyejorge/less.php/lib/Less/Parser.php(199): Less_Tree_Ruleset->compile(Object(Less_Environment))
#7 src/XF/CssRenderer.php(404): Less_Parser->getCss()
#8 src/XF/CssRenderer.php(342): XF\CssRenderer->renderToCss(‘public:extra.le. ‘, ‘// Note that th. ‘)
#9 src/XF/CssRenderer.php(250): XF\CssRenderer->renderTemplate(‘public:extra.le. ‘, NULL)
#10 src/XF/CssRenderer.php(116): XF\CssRenderer->renderTemplates(Array, Array, Array)
#11 src/XF/CssWriter.php(53): XF\CssRenderer->render(Array)
#12 css.php(30): XF\CssWriter->run(Array, 1, 1, ‘b2efe7e1ab72591. ‘)
#13

Источник