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.

Moving "Start a New Discussion" into my header

edited March 2012 in Vanilla 2.0 - 2.8

I'm trying to move the "Start a New Discussion" button into my header. How would I go about doing this? I'm extremely new to all of this, so explaining in as much detail as possible would be very much appreciated. I don't want to use the "Start a New Discussion" button either; I simply want to add text to my header, something like "New Post" and have this perform the same function as the "Start a New Discussion" button would.

Thanks!

Best Answer

  • 422422 Developer MVP
    edited March 2012 Answer ✓

    You dont move it physically, you move it using css. But beware you will need to use absolute positioning.

    If you set frame to position:relative

    You should be able to absolte position start new discussion button. To do so right click the button, and use firebug. Find out the class controlling the button, and in your custom css...

    .somebuttonclass {
    position:absolute;
    top:0px;
    right:0px;
    }
    

    eg:

    a.BigButton {
        display: block;
        font-size: 14px;
        height: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    

    There was an error rendering this rich post.

Answers

  • 422422 Developer MVP
    edited March 2012 Answer ✓

    You dont move it physically, you move it using css. But beware you will need to use absolute positioning.

    If you set frame to position:relative

    You should be able to absolte position start new discussion button. To do so right click the button, and use firebug. Find out the class controlling the button, and in your custom css...

    .somebuttonclass {
    position:absolute;
    top:0px;
    right:0px;
    }
    

    eg:

    a.BigButton {
        display: block;
        font-size: 14px;
        height: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    

    There was an error rendering this rich post.

  • Okay, thanks! And how would I add the text in? I don't want to use the button (unless the button is the field which you have to click). I just want to have the text "New Post" in my header and have that start the new discussion.

  • 422422 Developer MVP

    Locale files read vanilla docs on how to do this :)

    There was an error rendering this rich post.

  • edited March 2012

    Okay... I got the buttons and things to work, but now I have another issues. I'm applying the changes in my default.master.tpl file, and I'm not sure if this is the correct way to do so.

    What I currently have is:

     (div class="posts")(ul class="base")
                (li) (div class="no_prev_page_top">Prev. Page(/div)(/li)
    
                (li)(a href="/post/discussion" class="newpost" align="right")New Post(/a)(/li)
            (li)(a href="/discussions/p2" class="next_page_top")Next Page(/a)(/li)
    
                (/ul)
    
            {asset name="Content"}
                         (/div)
    

    But this is not only putting this on EVERY webpage, but my "next page" and what not coding is incredibly wrong (I know that much at least). How do I get this to only display on pages that it should? (ie only where a new post can be made. For example I have a category named University; when new post is clicked I would like it to allow the user to create a new post in University. Same would go for if they were in any other category. How do I code it to do so? How do I make it take the current category that they are in? Also, I know my page functions are off; how do I code it to check whether or not they are on the first page and therefore cannot go backwards?

    Thanks!

    edit: I couldn't paste the code in without it receiving it as actual code and not printing out what I have, so I replaced <> with (); sorry for any confusion.

  • I can't edit my post so I'll add to it. Is there some sort of if->then type logic I can implement in the default.master.tpl to do checks and print out things accordingly? Or do I need to edit a file for the individual pages themselves? I really can't figure out how I can get my code in the post above to only print out on the necessary pages, and how I can get the next/prev page functions to cycle properly and obtain the current page.

  • 422422 Developer MVP
    edited March 2012

    if you look in source code...

    each page has a different body id.

    precede your class with body id.

    On our facebook theme home page all discussions...

    < body id="vanilla_discussions_index" class="Vanilla Discussions index " >
    

    so you would chain your css class. like

    #vanilla_discussions_index .whatever {
    
    your css rules here 
    }
    

    There was an error rendering this rich post.

  • I'm really having difficulty with this implementation, and I'm not sure why. The chain I am attempting is to apply .newpost to #vanilla_discussions_index. Would it therefore be:

    vanilla_discussions_index.newpost {

    display: block;
    font-size: 14px;
    height: auto;
    position: absolute;
    right: 0;
    top: 0;
    }

    I have read through all of the docs and what not, and can't find anything that can help with this. All I want to do is have the text "New Post" create a new discussion in the category which the user is viewing; I appreciate your help thus far but it's been rather confusing to me, but I'm sure it's my fault for not giving the best explanation. I'm not understanding where I would even address .newpost in reference the the text "New Post" without incorporating it into my default.master.tpl which is then printing it out on EVERY page as opposed to just the discussion pages.

    Thanks in advance and hopefully I've clarified my issue. I appreciate you trying to help!

  • 422422 Developer MVP

    have you got a link ? I can inspect for you and supply a fix

    There was an error rendering this rich post.

  • edited March 2012

    It's extremely WIP but sure. You'll probably find tons of issues :P

    deleted

    edit: right now I have new post and next/prev page coded through default.master.tpl and they don't work as they should at all

  • 422422 Developer MVP

    ok so on your page, tell me exactly what you want to do. btw looks nice

    There was an error rendering this rich post.

  • 422422 Developer MVP

    ahhh your changing the rules as you go lol.

    Your initial post you wanted to move a button.

    Reading thru, you now wish to apply an "action" thats totally different set of coding

    There was an error rendering this rich post.

  • edited March 2012

    The "Select your State/College" would ideally be a drop down menu which will first have the 50 states, and then allow you to go to a sub-menu from your state which allows you to select your college which then takes you to the "category" for your school (ie you would do Alabama->University of Alabama). Each "school" has its own category, essentially. I also want to have the main page be, basically, a category called "all" which specifies no school, but allows a discussion to be made to talk with anyone. I want the topics themselves to be displayed exactly as they are currently; the discussion title at the top, a little bit of the first post shown (as it is).

    The biggest issue right now is the "new post" feature, however. I want it to create a new topic in the category which the user is viewing, but my coding for it is currently being done in the incorrect place, which is publishing it on every webpage (its in defualt.master.tp). I need to fix it.

    I want the "next page" "prev page" buttons to allow the user to navigate within pages of discussions for that category which they are in. Right now I just have it hard coded in the default.master.tpl to do "

    Next Page". I want it to properly allow the user to navigate through the pages based on what page they are on (if theyre on the first page they can't use prev page and if theyre on the last page they cant use next page, etc).

    Also, when you try to reply right now it shows the reply box and also "Add Comment" above the reply box; I want to remove the "Add Comment" box.

    Thanks for the compliment too! The community has been very helpful.

    Edit: Yes, I apologize for not being more clear. I want the text "New Post" to have the same action function as the "Start a New Discussion" button, I don't want to move it.

  • 422422 Developer MVP

    btw ditch the images to create corners and borders, its CRAP.

    That can all be done with css.

    I would ditch that theme, goto downloads, and download our very BASIC theme called CleanSkin.

    Its pure css, and you can work on that. Then we can begin helping you with the rest of your customisation. But seriously I would ditch that theme. No one uses corner and border gifs anymore .. havent for years. Plus its creating issues for you. If you look closely at bottom corners.

    There was an error rendering this rich post.

  • 422422 Developer MVP
    edited March 2012

    Ok for the drop down states, this can be done in a variety of ways.

    We always use dynamic selects.

    Like this:

    <?
                $selectCategory = 'state';
                $selectID = 'state';
                $selectName = 'state';
                $selectClass = 'twotwelve';
                $selectCategories  = array(
                    'New South Wales',
                    'Queensland',
                    'Victoria',
                    'Northern Territory',
                    'South Australia',
                    'Western Australia',
                    'Tasmania',
                    'Australian Capital Territory'
                );
                $alphebetical = true;
                include ('/home/yourdomain/public_html/includes/_categories.php');
            ?>
    

    _categories.php

    <? if ($selectCategories){
    if ($alphebetical){
        sort($selectCategories);
    }
    ?>
    < select id="<?=$selectID;?>" name="<?=$selectName;?>" class="<?=$selectClass;?>">
        - Please Select -
        <?
        foreach ($selectCategories as $key => $val){
                echo '' . $val . '
        ';
        }
        ?>
    Other
    < /select>
    <? } ?>
    

    For Menus it can be configured using css rules but this gives you total control over your selections.

    There was an error rendering this rich post.

  • Alright, I'm slowly changing things over. I'll let you know when I have more questions lol. Thanks!

  • edited March 2012

    Okay, I fixed almost everything up; you were right, it was quite easy to do everything using CSS/Firebug. What I haven't been able to find how to do are:

    Create a "navmenu"; under my current "menu" (deleted acb Discussion Activity Sign in) I want to make a menu which will include the drop down menu I previously mentioned and the search bar. How can I do this?

    The two other things I still cannot figure out how to do are: I would like create another "menu" of sorts which will only be applied to Discussions pages which allow the user to create a new discussion using the text "New Post" in THAT particular category which they are in. My current solution for not showing the panel is using display:none. Will this interfere with trying to use the start a new discussion function? Also, I'd like to add page navigation into this menu (prev page, next page).

    Thanks! 422 You've been of so much help! You and a friend of mine have been my only hope in this endeavor.

    Edit: still at deleted

Sign In or Register to comment.