I work with C# (MVC) to generate websites. We use Bootstrap to position elements.
If I wanted to let a page have a toggle to display a menu either vertically or horizontally, what is my best design approach?
If I wasn't using Bootstrap or C# I might produce an XML file with the data to be displayed. The XML would be marked up with with no thought of how it would be displayed.
So it might look like this for example:
<page>
<footer>This most likely will render at bottom of page</footer>
<menu>
<ol>
<li>Home</li>
<li>Foo</li>
<li>Bar</li>
</ol>
</menu>
<content>Some page content here</content>
<header>This most likely will render at top of page</header>
</page>
...and then maybe use XSLT (along with CSS) to transform that page so visually elements would be positioned as I chose (menu at top, side, bottom, wherever) based upon the selected theme/layout.
Is there a standard way to do allow for dynamic layouts using Bootstrap when working with C# and razor files? Is an #IF statement in my razor file that renders a different row/column layout my best/only choice?
Maybe there is a standard markup so that you can easily switch between different themes with different layouts? Although I don't see this documented if so.
I've spent the last hour Googling this without much luck.
I would recommend you look on the various web sites that provide this sort of functionality (some $$ some free) . I used one on a project last year, and TBH it would have taken a HTML/CSS/js expert 6 months to create all the included features from scratch (and it cost less than $50).
Check Jquery Menus. You can toggle Vertical to Horizontal using css. Refer this post - How to make jQuery UI nav menu horizontal?
If you want to specifically use Bootstrap then check Bootstrap Navbar. I believe you can use CSS to toggle here as well.
In my opinion, for changing layouts we should always use css. The advantage is, page will not be reloaded if the layout/viewport changes and we do not need to maintain separate codebase. This is why we use responsive webdesign which makes use of css to update the look and feel based on size of the device (4K, desktop, tablet, mobile etc.)
I think what I'll end up doing is making one shared View per type of layout:
~/Views/Shared/_Layout.cshtml
~/Views/Shared/_leftMenuLayout.cshtml
etc
... and then I'll create file "Views/_ViewStart" and in this file set the default shared layout I want used based on the desired layout. ie:
Layout = "~/Views/Shared/_leftMenuLayout.cshtml";
Related
I have 2 different layouts in my project that based on the view that is called, I will tell the view which layout to use. I'm having an issue where my first layout is rendered (my landing page), I render a certain set of scripts/styles. Once I want to render my 2nd layout, the browser is holding on to all the styles/scripts from my previous layout. Is there anyway to decouple those scripts/styles when changing layouts?
Never mind, I'm dumb. I forgot to change one of my script and style render strings. Once I put the right one in it works.
I need some suggestions on what I can use for a text pop up that appears when mouse is hovered over certain text.
I have researched many webpages but nothing that I am looking for to be more specific,
I have a table with headers at the top.
I want people to hover over the heading and get a pop up with the definition of the header.
I have currently something working and its kind of simple.
What I was also wondering if there was a way to have the definitions read from a different place?
The definitions will be read from different pages, if I keep it the way that appears now I will have to change the definitions in many pages instead of one centralized place.
Not sure if this makes sense.
It's called a tooltip. One of my favorites is the one in the Jquery ui toolkit.
http://jqueryui.com/tooltip/
Best regards.
The simplest way is to use default HTML tooltips (title property of the div markup)
<div title="My tooltip text">Header</div>
I've been trying to iterate over a placeholder in sitecore. Essentially, there control that needs to be repeated by the page for a collection of elements (say a tab). I've only gotten the placeholder to render once. The following tabs don't have content inserted into them.
The code for something like what I'm trying to do is:
<asp:Repeater ID="rptTabs" runat="server">
<sc:Placeholder ID="plSocialSharing" runat="server" Key="Social"/>
<sc:Placeholder ID="plTab" runat="server" Key="content"/>
</asp:Repeater>
Should something like what I'm doing work? If it doesn't, do I need to user another sitecore control (something more dynamic?). Should I instead be using user controls I place there, or should I stick with the sitecore framework approach?
Since each of your tabs will contain the same rendering the I would not bother with placeholders. I think you will be adding more complexity than is required.
Assuming you are going to be using the jQuery UI Tab plugin then I would use the same technique you used in the previous question you asked, i.e. render out the content of the div tabs in the repeater, and you will need another repeater to create the ul list of the actual tabs.
Assuming you have a tree structure like:
- Social Sharing
-- Facebook
-- Twitter
-- Email
You could now Social Sharing use as the datasource of your Repeater and still allow the content of the tabs to be editable if you use Sitecore controls.
If you wanted something much more dynamic, like different rendering for each of the tabs, for example one with rich text, one with 2 column, one with table etc, then again there are a couple of ways of achieving this. One way would be to use standard <asp:PlaceHolder> in your repeater and add the rendering in this from your codebehind on ItemDataBound event.
Another option would be to add a bunch of different renderings into the placeholder in the page editor and set the datasource of each to content item. It will be difficult to use jQueryUI Tabs with this though since you would want markup like this in each control to make them self contained:
<div class="tab-title">Tab Title</div>
<div class="tab-content">Put whatever content you want in here</div>
As long as each rendering followed this structure then it would be easy to add several of these to the page and they would still be editable in the Page Editor, albeit listed one after another (not in tab format) in Editing mode. You would need to roll your own tab plugin, but it could be something as simple as:
Only in Preview or Normal mode
Get all .tab-title elements
Create a ul list and prepend to the tab container
Now call jQuery UI Tabs on the element
Hopefully given you some options at least, I can expand on any of these if it something you need but will have to get some code samples together.
I'm new to Orchard CMS & MVC so please take this into account. Any help -the more the better- will be greatly received.
I want to add widgets to my blog summary page. What is the best way to achieve this? Ive tried creating a layer for the blog summary page defined by the rules for the layer, so as to be unique to this page. However, this only allows me to add widgets into the layer zones.
What i need/want to do is to effectively create a side bar with a tag cloud and a blogroll showing titles of other posts, and a couple of other bits of content. This would mean moving the blog summary content into another zone inorder that i can fit widgets down the side.
Is this the correct approach? If so how do i shift the summary stuff into another zone??
If this isnt the best approach, what is???
Is this where projections come in???
Thanks
from my understanding of your question, my answer goes like this.
If you are using the default ThemeMachine, the 'main content' i.e your Blog Summary Page, gets loaded into the Content Zone - which is in the middle container or zone of the ThemeMachine, and is flanked by two Aside Zones or commonly known as sidebars. To achieve what you are wanting I would place both the Tag Cloud widget and Blogroll widget into either the left Aside/Sidebar or right, depending on the look you are after.
And that's it!
Now this is dependent on the Theme you are using and that the Aside Zone(s) is actually available for use which is dictated by the Theme manifest, which is a Theme.txt file in the root of the Theme.
Now if you are wanting to set rules for when those widgets are shown, you can do this using Layers in the Widgets area in the Admin Dashboard. Details on that will require a second question ;-) as I've hopefully answered your first.
P.S. Projections can be used to substitute for both the Blog Summary Page and Blog widget. And can give finer control on what gets displayed.
I think I now understand what you're trying to accomplish and the solution requires you to modify your theme in one of two ways, whichever is most acceptable:
The first one is more preferable way but requires more work to be done. You should modify the Layout.cshtml template to split current Content zone in 2 - Content and Aside. This relies heavily on the current code of the template but it'll probably require changing from:
<section id="content-area">
#Zone(Model.Content)
</section>
to:
<section id="content-area">
#Zone(Model.Content)
</section>
#if(Model.Aside != null){
<aside id="aside-area">
#Zone(Model.Aside)
</aside>
}
Next, you'll need to change CSS so that your content-area is floating on the left, and the aside-area is floating to the right.
You'll also need to change Theme.txt file of your theme to add Aside in the list of zones.
You can now add widgets to the Aside zone. If those widgets should be shown only in specific circumstances, you'll have to make additional layer(s) that will be active for those circumstances when you want the widgets to be shown.
The second solution is for case you want those widgets to be shown only when the the blog is shown in summary mode. This solution is not a regular way of using Orchard, but rather a trick that Orchard allows but is not designed with this in mind. Nonetheless, I find it useful in certain cases, so here it goes.
Change Theme.txt to add Aside zone in the list of zones.
Create a new template in your theme and name it Content-Blog.cshtml. Edit it so that it has this content:
<section id="content-area">
#Display(Model.Content)
</section>
#if(Layout.Aside != null){
<aside id="aside-area">
#Display(Layout.Aside)
</aside>
}
You'll also have to make CSS changes to set your Aside zone to the right side of the content.
Now you can add your widgets to the Aside zone. Note that now you don't have to make new layers because the only time the Aside zone is shown is when the Content-Blog.cshtml is rendered and it's rendered only when showing Blog in summary mode.
In the end I was able to find the relevant view then switch the zones around so that the narrower zone appeared on the right. Then created a projection to return the blog post summary and placed this in the left hand larger zone.
Thanks to everyone that tried to help. I knew there had to be a simple answer, hence my initially simplified question. I didnt realise that would cause so much grief.
I have a section on my website where I plan to add a lot of text-based content, and rather than display this all at once it would be nice if I could add paging on just these pages. If possible, I would like to put all of my content within one content item and have the paging work automatically, building a URL along the lines of http://example.org/articles/title?page=2 or similar.
I've stumbled across an article that mentions paging with Sitecore items and this seems rather close to what I require, although mine requires pagination on a single content item, rather than multiple items. Can someone help me adapt this article towards my needs (if it's on the right track of where I should be looking)?
Is it possible to do this with a Sitecore content item?
http://briancaos.wordpress.com/2010/09/10/create-a-google-style-paging-component-in-c/
I think you'd either want to create your own WebControl and define a custom Render() method that reads the query string to write out the correct information, or you could even do it all in a Sublayout (a user control ASCX file). I've done this before by adding in a custom tag in the Rich text editor via Sitecore (I think I used <hr class="page-break" />) then in my ASCX I'd look for that HTML tag and split the content into chunks from that. I think my solution also used jQuery for some of it but you could probably do it with C# too.
Edit:
You'd want to split the tasks up and have the "paged" content as well as a list of pages (like the article you referenced) so you can easily generate the page buttons. Both of these could be done in two separate repeaters.
You can split the text from a single field into the different pages using approach described here: Split html string to page. All you need to do after that - read the query string and display appropriate block.
If I understand you correctly you have an Item in Sitecore that has x number of text fields and you only want a subset of those displayed depending on input in the querystring ?
In it's simplest form you want a sublayout that handles that.
Basically I'd imagine you having fields called Text1, Text2, text3 etc.
This .ascx could then retrieve the data for fields the fields you'd want using the control and adding them.
Then you could use the code from the article to generate the paging links.
This should be simple enough, but I'd say it would be a better idea to have an item in sitecore and use it's children as the data you want viewed and paged.
It's nicer because if you start out with 5 "page" fields and suddenly want 10, your item will keep on growing, where children can be added without bloating the parent page. Plus the user could then order the children how he sees fit.
I hope this helps a bit.