Bootstrap w/Sample Application · YAF.NET Support Forum

Welcome Guest! To enable all features please Login or Register

Zero2Cool
100% (Exalted)
YAF Leader Topic Starter YAF Version: YAF 3.1.16

11 years ago

I installed Visual Studio 2013 and noticed it comes with a Bootstrap template. This has me wondering, would it be a similar process to integrate YAF into it like we have with the YAF Sample Application? I'm hoping to get some time to play around with it and find out, but thought maybe someone here would know off hand.

Wanna join the discussion?! Login to your YAF.NET Support Forum forum account or Register a new forum account

Sponsor

tha_watcha
100% (Exalted)
YAF.NET Project Lead 🤴 YAF Version: 4.0.1 BETA

11 years ago

Originally Posted by: Zero2Cool

Yes the process would be almost the same, the sample web application is based on the VS 2010 Template. The Basic steps to integrate are described in the Wiki article. But they Might be some adjustments you need to make for example making sure that jquery file is not loaded twice by the app and yaf.

By the way the new yaf site is also based on the sample web application.:-d

Zero2Cool
100% (Exalted)
YAF Leader Topic Starter YAF Version: YAF 3.1.16

11 years ago

By the way the new yaf site is also based on the sample web application.:-d

Originally Posted by: tha_watcha

I kinda thought this to be true and quite honestly, I was freaking excited as heck about it. :)

Originally Posted by: tha_watcha

Hmm, I'll definitely have to make some time and figure it out. I stopped adding stuff to my site when you folks mentioned Bootstrap lol ... been itching it get the site converted to something mobile friendly, but my site is 90% YAF driven.

Edit, I like that the new VS2013 ASP.NET templates are extension-less.

Edited by moderator 11 years ago | Reason: Not specified

Zero2Cool
100% (Exalted)
YAF Leader Topic Starter YAF Version: YAF 3.1.16

11 years ago

Originally Posted by: tha_watcha

By the way the new yaf site is also based on the sample web application.:-d

Originally Posted by: Zero2Cool

The wiki for YAF Sample Application on github was blank so I tried adding what was in the link below... but all that i accomplished was adding a link to the page I just created lol.

https://github.com/YAFNET/YAF.SampleWebApplication/wiki

Zero2Cool
100% (Exalted)
YAF Leader Topic Starter YAF Version: YAF 3.1.16

11 years ago

http://packerpeople.com/ but the jquery being loaded twice issue you indicated I think is causing the shoutbox to not work normal and the relative time also is not working. But it wasn't much different to get it going.

tha_watcha
100% (Exalted)
YAF.NET Project Lead 🤴 YAF Version: 4.0.1 BETA

11 years ago

Edit, I like that the new VS2013 ASP.NET templates are extension-less.

Yaf site too, now

This is easy to fix, i guess the jquery is loaded in the master page?

<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>

So load it only when needed, like i do inside the head tags (Site.Master) add a contentplaceholder like

and in each page you need to put the

script tag

<asp:Content ID="HeadContent" runat="server" ContentPlaceHolderID="HeadContentHolder">
<script src="../Scripts/jquery-1.10.2.js" type="text/javascript"></script>
</asp:Content>

Zero2Cool
100% (Exalted)
YAF Leader Topic Starter YAF Version: YAF 3.1.16

11 years ago

I removed this line and now the shoutbox is working as is the relative time too!! WOohooo

<asp:ScriptReference Name="jquery" />

Here's what the Site.Master file looks like with the template I'm using with Visual Studio 2013.

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="New_PH.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%: Page.Title %> - My ASP.NET Application</title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:bundlereference runat="server" path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

</head>
<body>
    <form runat="server">
        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <asp:ScriptReference Name="jquery" />
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container"> 
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/"><img src="logo.png" width="25" />   PackersHome.com</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a runat="server" href="~/">Home</a></li>
                        <li><a runat="server" href="~/About">About</a></li>
                        <li><a runat="server" href="~/Contact">Contact</a></li>
                        <li><a runat="server" href="~/Forum/">Forum</a></li>
                    </ul>
                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/forum/rules">Register</a></li>
                                <li><a runat="server" href="~/forum/login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/forum/cp_profile" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName()  %> !</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>
        <div class="container body-content">
            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>© <%: DateTime.Now.Year %> - My ASP.NET Application</p>
            </footer>
        </div>
    </form>
</body>
</html>

Edited by user 11 years ago | Reason: Not specified

Zero2Cool
100% (Exalted)
YAF Leader Topic Starter YAF Version: YAF 3.1.16

11 years ago

Took me a bit, but finally figured out how to get the dropdown menu's to work AND continue to have YAF work with the VS2013 template.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MyPicks.aspx.cs" Inherits="BS.PackersHome.MyPicks" %>
 
 
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>


</asp:Content>   

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    

</asp:Content>

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="BS.PackersHome.SiteMaster" %>

<!DOCTYPE html>

<html lang="en">
<head runat="server">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PackersHome <%: Page.Title %></title>

    <asp:PlaceHolder runat="server">
        <%: Scripts.Render("~/bundles/modernizr") %>
    </asp:PlaceHolder>
    <webopt:BundleReference runat="server" Path="~/Content/css" />
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
     <asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
    <form runat="server">

        <asp:ScriptManager runat="server">
            <Scripts>
                <%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
                <%--Framework Scripts--%>
                <asp:ScriptReference Name="MsAjaxBundle" />
                <%--<asp:ScriptReference Name="jquery" />--%>
                <asp:ScriptReference Name="bootstrap" />
                <asp:ScriptReference Name="respond" />
                <asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
                <asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
                <asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
                <asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
                <asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
                <asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
                <asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
                <asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
                <asp:ScriptReference Name="WebFormsBundle" />
                <%--Site Scripts--%>
            </Scripts>
        </asp:ScriptManager>
       

        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" runat="server" href="~/">(beta) PackersHome</a>
                </div>

                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li><a href="/Forum">Forum</a></li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Packers<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="/Headlines">Headlines</a></li>
                                <li><a href="/Roster">Roster</a></li>
                                <li><a href="/Draft">Draft</a></li>
                                <li><a href="/Blog">Blog</a></li>
                                <li><a href="/Links">Links</a></li>
                            </ul>
                        </li>

   <%--                     <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Member Menu <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="/forum/cp_pm">Inbox</a></li>
                                <li><a href="/forum/cp_profile">Profile</a></li>
                                <li><a href="/forum/mytopics">Topics</a></li>
                            </ul>
                        </li>--%>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">NFL Picks<b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="/Leaderboard">Leaderboard</a></li>
                                <li><a href="/MyPicks">My Picks</a></li>
                            </ul>
                        </li>

                        <li><a href="/Chat">Chat</a></li>
                        <li><a href="/top10">Top 10</a></li>
                        <li><a href="/trophies">Trophies</a></li>
                    </ul>

                    <asp:LoginView runat="server" ViewStateMode="Disabled">
                        <AnonymousTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/forum/rules">Register</a></li>
                                <li><a runat="server" href="~/forum/login">Log in</a></li>
                            </ul>
                        </AnonymousTemplate>
                        <LoggedInTemplate>
                            <ul class="nav navbar-nav navbar-right">
                                <li><a runat="server" href="~/forum/cp_profile" title="Manage your account">Hello, <%: Context.User.Identity.GetUserName() %>!</a></li>
                                <li>
                                    <asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
                                </li>
                            </ul>
                        </LoggedInTemplate>
                    </asp:LoginView>
                </div>
            </div>
        </div>

        <div class="container body-content">
 

            <asp:ContentPlaceHolder ID="MainContent" runat="server">
            </asp:ContentPlaceHolder>
            <hr />
            <footer>
                <p>Copyright © 2006-<%: DateTime.Now.Year %> PackersHome.com™. All Rights Reserved.</p>
            </footer>
        </div>
    </form>
</body>
</html>

Edited by user 11 years ago | Reason: Not specified

Zero2Cool
100% (Exalted)
YAF Leader Topic Starter YAF Version: YAF 3.1.16

10 years ago

Edit, I had a padding issue, but it appears self inflicted as evidenced by reverting back to the standard CSS files. 🙂

Edited by user 10 years ago | Reason: Not specified

Zero2Cool
100% (Exalted)
YAF Leader Topic Starter YAF Version: YAF 3.1.16

10 years ago

#10

Got our Bootstrap YAF portal site up and running! Big thanks to Ingo for helping with the URL rewrite issue for the ShoutBox FlyOut!

The only hangup so far is the spell check doesn't seem to work. Anyone else having spell check issues with the GreyGrey theme and the YAF standard bbcode editor?

tha_watcha
100% (Exalted)
YAF.NET Project Lead 🤴 YAF Version: 4.0.1 BETA

10 years ago

#11

Got our Bootstrap YAF portal site up and running! Big thanks to Ingo for helping with the URL rewrite issue for the ShoutBox FlyOut!

The only hangup so far is the spell check doesn't seem to work. Anyone else having spell check issues with the GreyGrey theme and the YAF standard bbcode editor?

Originally Posted by: Zero2Cool

That button will be removed in YAF 2.2.0. Google closed the Spell check api.

Zero2Cool
100% (Exalted)
YAF Leader Topic Starter YAF Version: YAF 3.1.16

10 years ago

#12

That button will be removed in YAF 2.2.0. Google closed the Spell check api.

Originally Posted by: tha_watcha

Oh, no I wasn't talking about the button. Right now in a Post Reply and in Quick Reply, if a word was spelled incorrectly, it would get the red squigly underline. That is no longer happening.

Hmm, just noticed that this site now does not have the red squigly underline either, but I thought it did when I made that post you replied to.

tha_watcha
100% (Exalted)
YAF.NET Project Lead 🤴 YAF Version: 4.0.1 BETA

10 years ago

#13

That button will be removed in YAF 2.2.0. Google closed the Spell check api.

Originally Posted by: Zero2Cool

Oh, no I wasn't talking about the button. Right now in a Post Reply and in Quick Reply, if a word was spelled incorrectly, it would get the red squigly underline. That is no longer happening.

Hmm, just noticed that this site now does not have the red squigly underline either, but I thought it did when I made that post you replied to.

Originally Posted by: tha_watcha

The codemirror editor does not support the built browser based spell check solution, i guess i have to build a custom solution.

Zero2Cool
100% (Exalted)
YAF Leader Topic Starter YAF Version: YAF 3.1.16

10 years ago

#14

The codemirror editor does not support the built browser based spell check solution, i guess i have to build a custom solution.

Originally Posted by: tha_watcha

The CodeMirror Editor? This is a different field area than before, which is why we now have line numbers? Sorry if that's a stupid question, I just noticed it was different when I upgraded and coincidently that's when the spellcheck went away. However, I did see the spell check red squigly on this site with this editor. Maybe something was in Cache?

tha_watcha
100% (Exalted)
YAF.NET Project Lead 🤴 YAF Version: 4.0.1 BETA

10 years ago

#15

The codemirror editor does not support the built browser based spell check solution, i guess i have to build a custom solution.

Originally Posted by: Zero2Cool

Originally Posted by: tha_watcha

Yes that editor is new for the standard BB Code Editor and the Source Area of the CKEditor. At least in chrome the spell check is not working for me.

Important Information: