• Downloading from our site will require you to have a paid membership. Upgrade to a Premium Membership from 10$ a month today!

    Dont forget read our Rules! Also anyone caught Sharing this content will be banned. By using this site you are agreeing to our rules so read them. Saying I did not know is simply not an excuse! You have been warned.

[ITD] Animated Smileys Pack I xenforo 2

[ITD] Animated Smileys Pack I xenforo 2 1.0.0

No permission to download
Compatible XF 2.x versions
2.0, 2.1
By default, XF comes with the following prefix styles:
A set of 24 animated smileys for your forum's smiley menu.

proxy.php?image=https%3A%2F%2Fxenforo.com%2Fcommunity%2Fattachments%2F2019-08-24_224752-gif.209054%2F&hash=aa9e96ecaf55a6ff9822f0893d2143bf


Instructions: -

  1. Download the attachment.
  2. Either upload the contents of [upload] folder or select the downloaded file via ACP>Add-ons> Install/upgrade from archive.
  3. Select install option.

Configuration: -

  1. Login to ACP.
  2. Go to Content>Simlies.
  3. Create new category for animated smileys through Add category option (optional).
  4. select Import.
    proxy.php?image=https%3A%2F%2Fxenforo.com%2Fcommunity%2Fattachments%2F2019-08-24_222851-gif.209055%2F&hash=ace189faaae7cf57323212b8b677b69d
  5. Select Import from a directory on your server.
  6. Enter styles/default/xenforo/smilies/ITDSmilies in below box.
  7. If you created a new smiley category at point # 3 then you need to select same category for all 24 smileys in Smilie category box (optional).
  8. Click Import at bottom.

That's all :)
proxy.php?image=https%3A%2F%2Fxenforo.com%2Fcommunity%2Fattachments%2F1566684544736-png.209058%2F&hash=30f49b03a9c70577d3565e3625c1f73c



Creating custom styling using the Other, using custom CSS class name option is fairly straightforward.

This guide will explain how to.

The easiest way by far to add new prefix styling and to ensure it inherits all of the core styling is to edit the core_labels.less template.

Look for the section in the template highlighted in the screenshot below:


proxy.php?image=https%3A%2F%2Fxenforo.com%2Fcommunity%2Fattachments%2F1566685753944-png.209064%2F&hash=8104e3dc92776e3d5c825e051d55c0b1



Then just add your custom entries after the error entry and before the closing }, as follows:


proxy.php?image=https%3A%2F%2Fxenforo.com%2Fcommunity%2Fattachments%2F1566685697809-png.209063%2F&hash=8584980b2e8689c5f3c9fdb98cf6995c



I recommend using a name which won't cause any potential conflicts with the core code, or third party add-ons.
I prefix (prefix, geddit?) all of my custom entries with the acronym for my site -- cta -- and also like to give it a descriptive name, so in this case I have used ctaAnnouncement, as the prefix is for staff posted announcement threads.

The two values/colours (yes, that is the only correct spelling in English) in the curly brackets denote the text colour, in this case white, and the background colour, in this case #ff8800.

XF will then automagically (real word) generate the border and hover colours based on those values using the core CSS.

Finally, create the prefix:


proxy.php?image=https%3A%2F%2Fxenforo.com%2Fcommunity%2Fattachments%2F1566686815248-png.209066%2F&hash=ab65ceb387dc68d6b06c6ae5b4b1972b



The code in the example results in the following prefix:

proxy.php?image=https%3A%2F%2Fxenforo.com%2Fcommunity%2Fattachments%2F1566685390327-png.209061%2F&hash=be8668396c0819cbea6e94030c3ae34f



That's it if you just want vanilla styled prefixes.

However, if you want to go one step further and add icons, images, or other embellishments (who doesn't like sparkly text?), that's also quite simple.

For that you will add your custom code to the extra.less template.

In this example I'm going to add a Font Awesome icon in front of the text.
The code for that is highlighted in the screenshot below - ensure the class name, in this case ctaAnnouncement, matches what you entered in the core_labels.less template.
The Font Awesome code, in my example -- bullhorn -- can be found here: fontawesome.com/icons?d=gallery


proxy.php?image=https%3A%2F%2Fxenforo.com%2Fcommunity%2Fattachments%2F1566685610019-png.209062%2F&hash=e18368603987543aae0bb8c3aa4535c5



The result of that is this:

proxy.php?image=https%3A%2F%2Fxenforo.com%2Fcommunity%2Fattachments%2F1566685969339-png.209065%2F&hash=6148d4d96d9ed4badbadbb07910d8d89



The styling is limited only by your imagination (and taste ).


If you found this tutorial useful, donations of positive emojis are gladly received.
Author
Admin
Downloads
0
Views
27
First release
Last update
Rating
0.00 star(s) 0 ratings

More resources from Admin

Top