Blog Documentation Book a Demo
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How can i edit new discussion button's content?

ilhanilhan New
in General Banter

I want to edit new discussion button. I will add fontawesome icon to start of the text but i don't know where i need to edit.

I am trying to change this:

f93f8b04-93a4-4578-ac35-d01f51044f19_semt77 yalovaspor .png

to this:

balikesirbuyuksehirbelediye.png

can anyone help me?

Tagged:

Comments

  • phreakphreak MVP
    edited January 2020

    One simple way to achieve this is through CSS. Although Font-Awesome is a bit bloated if you solely use this icon.

    Look for following class:

    .BoxNewDiscussion .Button.NewDiscussion {}

    Adding something similar like:

    background: transparent url(icon.svg) 0 20% no-repat;

    could get you close to what you are looking for.

    • VanillaAPP | iOS & Android App for Vanilla - White label app for Vanilla Forums OS
    • VanillaSkins | Plugins, Themes, Graphics and Custom Development for Vanilla
  • ilhanilhan New

    Thank you for your answer, phreak. But what about adding with HTML? I saw {asset name="Panel"} code in the default.master.tpl. Maybe i can do it with editing this asset? It is possible?

  • donshakespearedonshakespeare ✭✭

    I have done what you ask in three ways.

    I use CSS

    I used PHP

    I used JavaScript

    I almost used PERL; but why learn a new language just for that? I thought candidly to myself.

    PHP

    I said, if I can internally change the text from "New Discussion" to "Nouve Discussationes", hehehe, I might be able to add me some pretty HTML, and voila! it worked https://docs.vanillaforums.com/developer/locales/

    $Definition['New Discussion'] = '<span class="icon-bubble-plus"></span><span class="mobile_hide">Start a Discussion</span>';

    Then one day I actually clicked the New Discussion button and when I was taken to my own version of https://open.vanillaforums.com/post/discussion I saw the HTML there as a heading. I did not want that, so I hid it with CSS.

    Then as I finished hitting my chest in pride, my head tilted a little and I saw the title of the page, oh unacceptable horror! o les misérables!

    <html>
 <title>&lt;span class="icon-bubble-plus"&gt;&lt;/span&gt;&lt;span class="mobile_hide"&gt;Start a Discussion&lt;/span&gt; — My forum</title>
</html>

    Then I thought about editing the NewDiscussionModule directly ...

    Changing lanes ...


    JavaScript

    $('.BoxButtons.BoxNewDiscussion').prepend('<span class="icon-bubble-plus"></span>');

    But I like simple stuff done simply.


    Changing lanes ...


    CSS

    .BoxNewDiscussion .Button.Primary:before {
  content: " \e907 "; /*icon-bubble-plus*/
  font-size: 15px;
  font-family: 'my_few_custom_icons_from_IcoMoon';
}

    Check out this app for grabbing just the few icons you need, no bloat! https://icomoon.io/

    Cheers!

  • phreakphreak MVP
    edited January 2020

    @ilhan: Shakespearean answers just for you. 😋

    • VanillaAPP | iOS & Android App for Vanilla - White label app for Vanilla Forums OS
    • VanillaSkins | Plugins, Themes, Graphics and Custom Development for Vanilla
  • ilhanilhan New

    Thank you for your epic answer Mr. Shakespeare 😅. My problem is brutally solved, thank you for your answers again!

Sign In or Register to comment.