Announcement

Collapse
No announcement yet.

Icons have disappeared after css update

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Icons have disappeared after css update

    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:

    Click image for larger version

Name:	ecommverse-error.JPG
Views:	3
Size:	21.6 KB
ID:	4390430

    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.


  • #2
    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.

    Comment


    • #3
      Originally posted by Joe D. View Post
      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.

      Originally posted by Joe D. View Post
      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.

      Originally posted by Joe D. View Post
      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.


      Comment


      • #4
        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.
        Last edited by Wayne Luke; Fri 27th Apr '18, 8:48am.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud customization and demonstration site.
        vBulletin 5 Documentation - Updated every Friday. Report issues here.
        vBulletin 5 API - Full / Mobile
        I am not currently available for vB Messenger Chats.

        Comment

        Related Topics

        Collapse

        Working...
        X