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.

How to add class attribute to link in theme hooks ?

vrijvlindervrijvlinder Papillon-Sauvage MVP
edited March 2013 in Vanilla 2.0 - 2.8

As I have learned how to add links to the theme hooks in the embed friendly themes, I have ran across a stumbling block that I can't solve, likely from ignorance, I would like to know the proper way to add a class attribute to a link. Or an ID

I wanted to remove the new discussion button from where it appeared and send it to the menu, This is what I have done:


    public function MessagesController_Render_Before($Sender) {

$Sender->Menu->AddLink('NewDiscussion', Img('themes/PurpleHazeEmbedFriendly/design/images/new.png', array('title' => T('Start NewConversation'))), 'post/discussion',  array('class' => 'Button'));
$Sender->Menu->AddLink('Home', Img('/themes/mobile/mhicon.png', array('title' => T('Home'))), 'http://www.vrijvlinder.com',  array('class' => 'Buton'));        

    }

Everything works except I don't have the class I need to incorporate the links to the menu, I mean they do appear in the menu but I can't style them individually... When I see the link in html it has < a href= "link" class''''> How can I add the class of Button so the link images I added take the shape and size of the rest of the links or at least an id so I can edit with css.

Comments

  • peregrineperegrine MVP
    edited March 2013

    try this

     $Sender->Menu->AddLink('Home', Img('/themes/mobile/mhicon.png', array('title' => T('Home'), 'class'=>"ProfilePhoto" )), "http://www.vrijvlinder.com",FALSE, array('class' => 'BigButton'));
    
    

    For future reference - you need to look at functions where they are defined in the core - to determine parameters. each function has its own parameters.

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Ok thanks,It was not successful though :( I guess I will have to make the images smaller by hand so the fit right. ... It would be so much easier if this actually worked ... I will try some more. The way I wrote them they show and they work but no class is added, with your line nothing showed :( I can edit the link with css to a degree,

    .Banner ul li a img { etc.... but can't edit the li to be a specific size. It has no id or class to latch on to. I will try using ID instead of class see what happens.... thanks

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited March 2013

    Yea well I fixed it with a css hackkeroo lol . This theme is a tiny theme and when the menu/banner gets populated the excess links float left and the images were preventing them from floating and were breaking to the next line. I wanted to give them class because I could not figure out how to edit them with css. But I thought what if and this is what I came up with ...

    
    .Banner ul li a {
    background: url(images/gradv20.png)repeat-x scroll 0 0 #453d51;
    background-size: 16px;
    border: 1px solid #83789e;
    color:#ecebed;
    cursor: pointer;
    display: inline-block;
    font-size: 8pt;
    font-weight: 700;
    padding: 2px 4px;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    height: 20px;
    }
    .Banner ul li a img {
    width: 24px;
    height: 24px;
    border: none;
    vertical-align: top;
    margin-top: -3px;
    }
    

    The determining factor was adding height value to the alink , I thought the padding would take care of it but seems height of the a:link is important to be able to fit the linked image to the space.

    Oh and also I looked where you said in the core library and found the link to the discussion button so I changed mine, even though it worked too I think this is the correct way to put it

    
    $Sender->Menu->AddLink('NewDiscussion', Img('themes/mobile/design/images/new.png', array('alt' => T('New Discussion'))), '/post/discussion'.(array_key_exists('CategoryID', $Sender->Data) ? '/'.$Sender->Data['CategoryID'] : ''), array('Garden.SignIn.Allow'), array('class' => 'NewDiscussion'), array('class' => 'Button'));
    
    

    and removed the original $this->_AddButton($Sender, 'NewDiscussionModule'); from all the controllers so the big button would not be rendered. A funny thing happened when I added both to the same controller. A second menu was generated where the categories dropdown works ! I wonder how that can be since that is not supposed to be embedfrendly?

  • with your line nothing showed

    my image test showed....

    public function DiscussionsController_Render_Before($Sender) {

     $Sender->Menu->AddLink('Home', Img('/themes/mobile/mhicon.png', array('title' => T('Home'), 'class'=>"ProfilePhoto" )), "http://www.vrijvlinder.com",FALSE, array('class' => 'BigButton'));    
    

    }

    vv.png 17.6K

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited March 2013

    Well I'll be dammed ! that indeed has a class hmmm

    I am making an embedfriendly theme and when you chose single column, I want the New Discussion link on the menu as an image , as well as other links. If I use bigButton it put's it where the bigButton would be and or/uses big button css. I made all buttons and menu buttons the same size in css file.

    Although similar to the mobile theme hooks, this is a bit different I guess dealing with the single or double variables. And 'NewDiscussionModule' which is the link I guess as a modular aspect of the embed themes . Trickier than php...
    One question, on your line, why ProfilePhoto ? and does it make a huge dif if one uses "ProfilePhoto" or 'ProfilePhoto' ? Maybe that is why it would not work for me, something I missed... here is a screenshot of what I ended up with. If there is a simpler method I am open to it for sure.
    image

    ph.png 141.7K
  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited March 2013

    A simpler way would be to use Gdn_Theme for adding both links and modules since the "New Discussion" button is actually a module:

    Gdn_Theme::Link('home');
    Gdn_Theme::Module('NewDiscussion');
    

    By the way, there's no difference between single and double quotes in PHP. I personally prefer double quotes but that's because I'm in love with Ruby and CoffeeScript - you'd generally use single quotes in PHP and then use double quotes when embedding HTML:

    echo '<div class="Whatever"></div>';
    

    P.S.: I linked to the different functions within the core so you can take a look at some of the stuff you can do with them. @peregrine is absolutely right that taking a look at the functions in the core will give you clarity as to what they can do.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited March 2013

    @kasperisager Thank you Kasper , that looks easy enough I will test it out and see what goes. I like double quotes too they are easier to see, the single one sometimes I miss one and can't find it ... :(

    @peregrine is absolutely right

    Yea I know...he is always right ♡♡♡♡

    ╔════════ ̿ ̿ '̿'\̵͇̿̿\=(๏̯͡๏)= ͇/̵̿̿/'̿'̿ ̿ ̿ ̿ ═══════╗

  • @kasperisager said:
    By the way, there's no difference between single and double quotes in PHP.

    not really true.

    http://www.php.net/manual/en/language.types.string.php

    $ php -a
    php> print 'hello \n world';
    hello \n word
    php> print "hello \n world";
    hello 
    world
    php> $NoCats = 3
    php> print 'there are $NoCats cats';
    there are $NoCats cats
    php> print "there are $NoCats cats";
    there are 3 cats
    php> $CatFeatures = (object) array('Colour'=>'red', 'Size'=>'small', 'Personality'=>'emo');
    php> echo 
    php> "The cat is coloured {$CatFeatures->Colour},",
    php> " is a {$CatFeatures->Small} size,",
    php> " and has an {$CatFeatures->Personality} personality.";
    The cat is coloured red, is a small size, and has an emo personality. 
    php > echo <<<EOT
    <<< > The cat is coloured {$CatFeatures->Colour},
    <<< > is a {$CatFeatures->Small} size,
    <<< > and has an {$CatFeatures->Personality} personality.
    <<< > EOT;
    The cat is coloured red,
    is a small size,
    and has an emo personality.
    php > echo <<<'EOT'
    <<< > The cat is coloured {$CatFeatures->Colour},
    <<< > is a {$CatFeatures->Small} size,
    <<< > and has an {$CatFeatures->Personality} personality.
    <<< > 'EOT';
    The cat is coloured {$CatFeatures->Colour},
    is a {$CatFeatures->Small} size,
    and has an {$CatFeatures->Personality} personality.
    

    grep is your friend.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP

    Yea I noticed that some things were not being rendered or incorrectly depending on whether I used " or ' . Seems the " makes it recognized as string of text output and the other as the code is written ? and possibly ignores it if it is not correct ? very enlightening !

  • btw the speed difference between the two is generally negligible. But if you are doing a lot of operations single quote is obviously goign to be bit faster. Though in recent version, you really have to be doing a lot to really be a hit.

    grep is your friend.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited March 2013

    Yeah okay, strings act differently depending on whether you use single or double quotes. No rules without exceptions I guess :-) I personally don't embed variables anymore though which is why I don't worry about it.

    P.S.: Concat is the way to go:

    echo 'hello '.$world;
    

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • x00x00 MVP
    edited March 2013

    you can actually do this now

    echo 'hello' , $world;

    it is not concating the string but echoing both things one after another.

    grep is your friend.

  • peregrineperegrine MVP
    edited March 2013

    Forgetting about php and evaluating a variable in a line via double quotes (as single quotes won't allow the variable to be evaluated. Many programming languages, and linux, basic, shells) use this standard.

    However, depending on where you read the standards ... xhtml html5 , etc and various interpretations.

    some say attributes can be single or double quotes.
    some say singles
    some say double quotes.

    google it and you will see

    https://www.google.com/search?q=standards+quotes+attributes&ie=utf-8&oe=utf-8

    One question, on your line, why ProfilePhoto

    I just picked a few classes, I knew were defined.

    I generally try to use double quotes with attributes, or whatever is easier sometimes I escape them when it is a nightmare

    echo "<div id=\"mydiv\">";

    sometimes I don't

    echo "<div id='mydiv\'>";

    echo "<div id=\"$myid\">";

    e.g. class = "myclass" title = "mytitle", etc.

    whatever works for you and the standard you are writing for...

    I may not provide the completed solution you might desire, but I do try to provide honest suggestions to help you solve your issue.

  • vrijvlindervrijvlinder Papillon-Sauvage MVP
    edited March 2013

    I just picked a few classes, I knew were defined.

    A ok, I kind of thought so. It is a way to plug a class into it so it can be edited with style. This thread became very interesting I thank you all for the great information

    echo 'thankyou' , $favoritecommunity;

Sign In or Register to comment.