Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product
Vanilla 2.6 is here! It includes security fixes and requires PHP 7.0. We have therefore ALSO released Vanilla 2.5.2 with security patches if you are still on PHP 5.6 to give you additional time to upgrade.
Please upgrade to 2.3 here. The 2.2 and earlier branches are no longer being updated.

Add items to Bootstrap

This discussion is related to the Bootstrap addon.

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

    My themes: pure | minusbaseline - My plugins: CSSedit | HTMLedit | InfiniteScroll | BirthdayModule | [all] - PM me about customizations

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

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

    piotrnl
  • 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 Cheerleader & Troubleshooter Munich Moderator
    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');
    }
    
    piotrnlBleistivt
  • 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 (ProfileFieldsInDi<strong>cs</strong>ussion) in the plugin title or the double public function in R_J's post

    My themes: pure | minusbaseline - My plugins: CSSedit | HTMLedit | InfiniteScroll | BirthdayModule | [all] - PM me about customizations

    R_J
  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

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

    Bleistivt
  • 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 (ProfileFieldsInDi<strong>cs</strong>ussion) 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.

    peregrineR_J
  • 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 Cheerleader & Troubleshooter Munich Moderator

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

    hgtonight
  • R_JR_J Cheerleader & Troubleshooter Munich Moderator

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

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

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