Icons have disappeared after css update

[petes80]

Hi

I've broken something but not sure how. I simply wanted to change the background colour of the header to white instead of grey. All I did was change #CCC to #FFF in the css and saved it. The header background did change to white as expected, but now I've lost some icon images. For example see this image:



If I inspect the element in browser, there is a bit of code that says this:

<span class="b-icon b-icon__tool-camera"></span>

Looking at the css associated with this element, I see the following:

#htmlTag .b-editor .cke_top .b-icon__x-circle--dark, #htmlTag .b-form-select__select .selectBox-arrow, #htmlTag .b-icon {
background-image: url("images/{vb:stylevar imgdir_button}/css/sprite_icons_vb_{vb:stylevar textdirection}.svg") !important
}

It's saying it cannot load that image and it looks like it's not rendering the style variables correctly. Other elements in the page are using the style variables without problem.

What could be causing this?

FYI, if I remove the above css style from the page using inspect element, the icons appear again.

[Joe D.]

What happens if you put a semi-colon ; after !important?

You're not seeing {vb:stylevar textdirection} in the HTML source are you? If so that all needs to be removed. css_additional.css doesn't work with vb style variables.

The only CSS file you should ever edit is css_additional.css, (and the new CSS templates for the svg images.) Most other css templates never need editing, just override them in css_additional.css.

[petes80]

What happens if you put a semi-colon ; after !important?

Sorry, this is a copy and paste error on my part. There already is a semi-colon after !important. In the inspect element panel, you can edit or turn off styles. When I turn off this style, the icons re-appear. The same process makes the down arrow on the 'Icons' drop down selector re-appear. I think there is one issue that's affecting them all.

You're not seeing {vb:stylevar textdirection} in the HTML source are you? If so that all needs to be removed. css_additional.css doesn't work with vb style variables.

No not seeing this in the HTML source.

The only CSS file you should ever edit is css_additional.css, (and the new CSS templates for the svg images.) Most other css templates never need editing, just override them in css_additional.css.

I'm only editing css from the built in page editing tools. So I turn on the 'Edit Page' toggle switch, then click on "Style". I ensure my current style is selected and then click the "CSS Editor" button at the top. The resulting CSS is what I have been editing.

[Wayne Luke]

Your site says it is running vBulletin 5.3.3 and SVG icons were introduced in vBulletin 5.4.0. You will need to upgrade so that the style is compatible with your version of vBulletin. Make sure to run the upgrade.php script found in /core/install/.

Also since you're a download customer, you will want to edit your templates in the Style Manager within the AdminCP. There are more permissions and the css_additional.css won't be restricted by vBulletin Cloud Rules.