Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

Add items to Bootstrap

Hi,

I've just succesfully converted from PPHBB3 to Vanilla 2.1 (attachments and all !). I'd like to make a small customization to the excellent Bootstrap theme:

Next to the post, under the user's avatar, I'd like to add a few fields from the Extended Profile Fields plugin. (Oh, and I'd also like to edit the layout of the user's Profile-page.

I'm new to Vanilla and the themingsystem, can somebody give some pointers as to where to start ?

Thanks !

Comments

  • BleistivtBleistivt Moderator
    edited October 2014

    First, you need to make that information available in the discussion view. The cleanest way is to do it with a plugin:

    <?php if (!defined('APPLICATION')) exit();
    
    $PluginInfo['ProfileFieldsInDiscussion'] = array(
        'Name' => 'ProfileFieldsInDiscussion',
        'Description' => 'Show custom profile fields in discussions.',
        'Version' => '0.1',
        'Author' => 'Bleistivt',
    );
    
    class ProfileFieldsInDiscussionPlugin extends Gdn_Plugin {
    
        public function Base_AuthorInfo_Handler($Sender, $Args) {
            $AutorMeta = Gdn::UserMetaModel()->GetUserMeta($Args['Author']->UserID, 'Profile%');
    
            echo ' '.WrapIf(htmlspecialchars(val('Profile.YourField', $AutorMeta)), 'span', array('class' => 'MItem YourField'));
        }
    
    }
    

    Replace YourField with the name of the field.

    You can change the position of it with css

    .MItem.YourField {
        position: absolute;
        margin: 20px 0px 0px -80px;
    }
    

    For general tips regarding theming and customization, read this:

    http://vanillaforums.org/discussion/20231/how-to-become-somewhat-adept-at-modifying-vanilla-to-meet-your-needs-for-free

  • whu606whu606 I'm not a SuperHero; I just like wearing tights... MVP

    Bear in mind that the process for editing Bootstrap theme is not exactly the same as for the standard Vanilla themes.

  • Ok, thanks a lot. Copied your code and activated the plugin. I get the css part but what file to edit ? (I know Bootstrap is not supported here and that it takes a different approach but maybe this small change can be done by editting the correct css)

  • R_JR_J Ex-Fanboy Munich Admin
    edited October 2014

    Since you are realizing it as a plugin, I wouldn't change the bootstrap theme itself but pack the customization to the plugin. Save the CSS in plugins/ProfileFieldsInDicsussion/design/custom.css and add that to the plugin:

    public function discussionController_render_before ($Sender) {
        $Sender->AddCSSFile('custom.css', 'plugins/ProfileFieldsInDicsussion');
    }
    
  • Awesome community ! Thanks !

  • Awesome community ! Thanks !

    Ok, when I inspect the element in Chrome it says: span.MItem.Profile.Kleur, how would the custom.css look like ?

    I've tried different variations of

    span.MItem.Profile.Kleur { color: #00FF00; font-family:arial; font-size: 4pt; }

  • That, should work if you put the function @R_J posted into the plugin classes body.

    Check if the css file is included, could be the stupid typo I made (ProfileFieldsInDicsussion) in the plugin title or the double public function in R_J's post

  • R_JR_J Ex-Fanboy Munich Admin

    Oops! That happens when you copy and paste too much :)

  • hgtonighthgtonight ∞ · New Moderator

    @Bleistivt said:
    That, should work if you put the function R_J posted into the plugin classes body.

    Check if the css file is included, could be the stupid typo I made (ProfileFieldsInDicsussion) in the plugin title or the double public function in R_J's post

    I don't see either of those errors. ;)

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • piotrnlpiotrnl New
    edited October 2014

    Well got it almost the way I want it. I have added some conditional formatting (ps: I'm not a developer, I know some python and some sql) but I must have made a mistake somewhere 'cause the colors get mixed-up:

    // Conditional formatting
    if ((val('Profile.Motor', $AutorMeta) == '1.4')) {
      echo '[ '.WrapIf(htmlspecialchars(val('Profile.Motor', $AutorMeta)), 'span', array('class' => 'Benzine'));
    }
    elseif ((val('Profile.Motor', $AutorMeta) == '1.4 TDI AMF BHC')) {
      echo '['.WrapIf(htmlspecialchars(val('Profile.Motor', $AutorMeta)), 'span', array('class' => 'Diesel'));
    }
    elseif ((val('Profile.Motor', $AutorMeta) == '1.4 TDI ATL')) {
      echo '['.WrapIf(htmlspecialchars(val('Profile.Motor', $AutorMeta)), 'span', array('class' => 'Diesel'));
    }
    elseif ((val('Profile.Motor', $AutorMeta) == '1.2 TDI')) {
      echo '['.WrapIf(htmlspecialchars(val('Profile.Motor', $AutorMeta)), 'span', array('class' => 'Diesel3L'));
    }
    else {
      echo '['.WrapIf(htmlspecialchars(val('Profile.Motor', $AutorMeta)), 'span', array('class' => 'FSI'));
    }
    
    // End Conditional formatting
    
  • R_JR_J Ex-Fanboy Munich Admin

    At first glance I'd say it is AuthorMeta, not AutorMeta ;)

  • R_JR_J Ex-Fanboy Munich Admin

    By the way: I'd use "switch" in this case:

    switch (val('Profile.Motor', $AuthorMeta)) {
        case '1.4':
            $CssClass = 'MotorBenzine';
            break;
        case '1.4 TDI AMF BHC':
            $CssClass = 'MotorDiesel';
            break;
        case '1.4 TDI ATL':
            $CssClass = 'MotorDiesel';
            break;
        case '1.2 TDI':
            $CssClass = 'MotorDiesel3L';
            break;
        case '1.4':
            $CssClass = 'MotorBenzine';
            break;
        default:
            $CssClass = 'FSI';
    }
    
    echo '[ ', WrapIf(
        htmlspecialchars(val('Profile.Motor', $AuthorMeta)),
        'span',
        array('class' => $CssClass)
    );
    

    That will give you something like [ <span class="MotorBenzine">1.4</span>, but I'm not sure why you have an opening bracket in there...

  • hgtonighthgtonight ∞ · New Moderator

    @R_J said:
    By the way: I'd use "switch" in this case:

    I would be even lazier: $CssClass = preg_replace('/\W+/','',strtolower(strip_tags(val('Profile.Motor', $AuthorMeta))));.

    Now you don't have to update your switch with more possibilities, just your style sheet.

    Search first

    Check out the Documentation! We are always looking for new content and pull requests.

    Click on insightful, awesome, and funny reactions to thank community volunteers for their valuable posts.

  • Thanks all. Happy with the result: http://audi-a2.nl/discussion/3407/nieuw-forum/p1

  • @piotrnl i have a question about the advertisement after x reactions. Wich plugin u using there?

    Heb me ook aangemeld op je forum maar daar heb ik geen toestemming voor....

  • I use the Pockets plugin to display the ads.

Sign In or Register to comment.