Add items to Bootstrap

piotrnl · October 2014

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 !

Bleistivt · 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

whu606 · October 2014

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

piotrnl · October 2014

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_J · 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');
}

piotrnl · October 2014

Awesome community ! Thanks !

piotrnl · October 2014

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; }

Bleistivt · October 2014

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_J · October 2014

Oops! That happens when you copy and paste too much

hgtonight · October 2014

@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.

piotrnl · 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_J · October 2014

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

R_J · October 2014

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...

hgtonight · October 2014

@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.

piotrnl · October 2014

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

Schryvers · October 2014

@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....

piotrnl · October 2014

I use the Pockets plugin to display the ads.

Add items to Bootstrap

Comments