I have some questions regarding theming Orchard CMS. So, let's begin... I have a website that will have 5 pages and some of them have different layouts.
Pages and zones within it:
Homepage - Content, TripelFirst, TripelSecond, TripelThird
Concept and Rentals page - Content, AsideFirst, AsideSecond
Press and Service Department page - Content, AsideFirst, AsideSecond (different layout then the previous two pages)
Note: Even though all of the pages have the Content zone, except Homepage none of the pages uses it. Other pages only have HTML widgets located in one of the zones.
1) I've read that it is possible to create the layout for the specific ID, the problem is I can't find that ID to create the layout for specific ID.
2) As you can see, couple of pages have the same layout, how to assign them to the specific layout? For example, if I create the layout for Concept and Rentals page how can I assign the specific layout to them and also how can I assign the layout to Press and Service Department pages?
3) How to add the class tag to the body? The problem is that Orchard CMS creates the body before everything else so it isn't contained in the layout cshtml files.
Thank you in advance!
when you edit the page in the admin, the url will look something like http://localhost:30320/OrchardLocal/Admin/Contents/Edit/16
16 is the id here.
Several things you can do. Easiest is to use this module: http://orchardproject.net/gallery/List/Modules/Orchard.Module.Downplay.Orchard.LayoutSelector
Alternatively, you could programmatically create alternates based on arbitrary criteria: http://weblogs.asp.net/bleroy/archive/2010/12/14/switching-the-layout-in-orchard-cms.aspx
Finally, you can often avoid to have to create an actual separate layout by just varying what widgets go where, using layers.
The body tag is in document.cshtml, which you can override in your own theme.
1. Not sure what you mean by ID? If you click Widgets on the DashBoard, there are Layers there. A layer is a collection of widgets that will activate for a specific thing, Like the authenticated Layer will display those widgets you define when a user is authenticated.
Expanding on (1) and for (2), you will be able to create a new layout by adding widgets to a layer.
Check out:
Tagged Layer Rule - Allows you to add widgets based on a tag. Now, you can add pages for concepts and rentals and then specify a layer for these tags, within that layer, you can add any widgets you like. These will only appear when that tag is encountered.
Also check out:
Content Type Layer Rule - Haven't tried this, but it falls on the same lines.
3. To customize the look there is something called Shapes. Each Zone I think has a corresponding cshtml files. You can even use the ShaperBuilder to even render html in code, again, don't know too much about this but I can tell you, you need to look into these articles.
Using shapes as Html helpers in Orchard
Using shapes as Html helpers in Orchard
Taking over list rendering in Orchard
Dispatching Orchard shapes to arbitrary zones
HTH, I'll try and contact some orchard folk that are on SO.
So to help you out here
The ID of the Home Page is always 11 for a fresh install though I imagine that you can delete the home page and create a new one and give it another ID. To find the ID of the other pages open up the DB and look at the Content Items.
I know of no way to apply Layouts other than by ID so just duplicate the layout pages as you have so few pages.
I would just use a small jQuery script
$(document).ready(function{
$('body').addClass('SomeClass');
});
Related
I have a search form in my header rendered as a cObject from a content element which is a ke_search searchbox and it leads to a /search page when submitting.
I also have subpages that are supposed to only look through seperately indexed pages like news and other pages.
For that I have folders in the typo-backend which contain indexer configs.
My problem is that when I set up that search box in the header the other searches are using the indexer config from the header (probably because it's the first searchbox on that page).
How do I make sure that every searchbox uses it's correct index?
As mentioned: Everythings seems to be split up nicely in the backend.
I can only imagine that somethings going wrong because the searchboxes are rendered with the same id but how can I make sure they render with diffrent ID's?
I managed to get an answer from the team behind Ke_Search.
When implementing a global searchbox that is used across every page, you should implement the searchbox as plain html and not as a content element in Typo3. You can only have one searchform as a content element per page.
Here's the documentation on how to implement the html version:
https://docs.typo3.org/p/tpwd/ke_search/main/en-us/Templating/Searchbox.html#include-searchbox-with-plain-html
Just leaving this here for anyone running into the same issue.
When trying to add a collection to a specific page eg. a brand collection on the Gaming page, the collection will appear on all pages. How do I make sure that if I add one collection to a page it only appears on that page. I am using the Dawn Shopify theme.
I have tried changing the theme as indicated by the picture below but I cannot seem to add a new theme except the 'Default page'.
A page in Shopify is a unique resource. That page has specific content you write in it. So if you have a page known as gaming, you are free to write about gaming in that page. You could also include liquid in that page that would render a specific collection. As an example you have a special collection with the handle special-gaming you can include that collection on this page.
You could also create a new template for pages. Call it gaming-page and it is a duplicate of your regular page. But, you edit that liquid, and add in special code to access that special collection. Now, you would just write your page as is, for gaming, but you'd select the new gaming-page template from the online store theme template.
If you experiment with Shopify you'll figure it out. Just play. No better way to learn than to experiment!
Here’s a scenario:
I have a three page website implementing <iron-pages>. Nav is a toolbar with three paper tabs, no drawer. When I click on the tabs, the content of the iron-pages loads below the toolbar. All good.
Now, I have a few child pages that I want to link from the content of one of the three pages. When the page loads, I don’t want it to load below the three tabs but rather be sort of a new page with a different toolbar, with an arrow on the top left to return to the previous view, separate header title, etc.
A few questions:
Should these child pages be part of the same <iron-pages> list that the three main pages are in? If not, how do you recommend? (When I do, content loads below the toolbar, as expected.)
Should these be an entirely separate page, like a sibling to index.html or in /src, that I link to? If so, is it part of the same app then?
Sorry for the noob questions. Still trying to understand how single page apps are structured, in such scenarios. Eventually I want these pages to be <animated-pages> so that I can transition from the main page to the child pages and back. Will save those questions for another time...
Thanks!
An easy solution is to move your nav-bar component to each of your top level pages that need it. You can then move your new "sub-page" so it's a sibling of your other pages.
How users navigate to your different pages does not necessarily need to dictate how you structure the DOM.
Answers to your other questions
Should these child pages be part of the same list that
the three main pages are in? If not, how do you recommend? (When I do,
content loads below the toolbar, as expected.)
From what I can tell, no. Keeping all of your pages (even "sub-pages") as siblings will decouple the DOM from the app hierarchy (ie if the hiearchy of your views change, your markup can stay the same).
Should these be an entirely separate page, like a sibling to
index.html or in /src, that I link to? If so, is it part of the same
app then?
Polymer lets us build composable building blocks, so I'd recommend having a different custom web component for each of these pages. In my apps, I usually stick all of my web components in the same folder. A sample directory structure might look like this:
my-app/
index.html
src/
components/
nav-bar.html
my-page1.html
my-page2.html
my-page3.html
You can then make use of your custom components in index.html
I have to create Joomla website. I am PHP programmer, but new to Joomla.
I have spent a lot, reading tutorials and other staff.
The website is very simple, it is visit card for restaurant.
I have installed Joomla 2.5. Spending two days I have managed to do the following:
- create menu
- create multi language site (2 languages) with language swicher
- create simple static pages (articles)
- create one page as contact
- create simple template just for my website
However, I cannot do some things and I have not found any answers in tutorials or google.
If you open this file http://img1.uploadscreenshot.com/images/orig/1/2621034793-orig.jpg you can see images with three different pages on the site:
1) Article with three images on the right.
Basically, I do not know what is the best practice to create article with some custom HTML in it (in this case these are images). For example, i can create table with two columns - one for text, another for images. Without Joomla I would create two divs, but how this can be done here??? Also with custom html I need to do the same for each language - I need to add images for each language, I do not like this. I really have not found any solutions for this. Do you have some suggestions?
2) Article with three buttons on the right side. This is article on landing page.
This is probably the same question - how to create article with some custom HTML in it (in this case these are three buttons - links to pages inside the website)? Again I can create table with text and buttons, but this should be done for each language. Is it a good practice? Do you have some other suggestions to create article with three buttons on the right side? Maybe I can create some custom module, but this sounds strange.
3) Contact page with google map.
I have create contact page with contact details. This is another question, I would ask other time.
Hello Renathy and welcome to Joomla!
1) You can of course insert divs in the editor and style them with floats; but as you mention this is pretty bad for translation, and allows the user to easily break the layout.
You have the following options:
1.a)
Joomla 2.5+ supports an article image and thumbnail that you can specify in the Images and Links group for each article. Quite some work to extend to 3 images, you would need to write a plugin (or do a nasty core hack) and override the view; also it's not well documented. There is a discussion here about it: Add additional images to articles in Joomla 2.5
1.b)
Add the extra images as above with the plugin. Then use a module for displaying the images instead of the view override.
1.c)
Use a custom image management solution to link images to an article, then a plugin to display them. Easier, but still a lot of work. I have done this on one site and worked fine, although I would change a lot of code now. As far as I know there are no extensions available that will do this.
All three solutions allow you to use proper floating of the contents using divs floats responsive as appropriate, and will isolate the layout of the content from the images, thus obtaining a solid environment for the content editors, and easy translation (although, if you go with 1.a) or 1.b), I strongly advise you to use a proper translation suite such as Falang or JoomFish (Falang is a different port of Joomfish from the old 1.5 version)
2)
You will address this as above, with a module.
Create in your template a main
<div class="content-box">
<div class="content-main"> here you will place your component's output.</div>
<div class="content-sidebar"> here you will output a new module position, name it "article-sidebar"</div>
Then style it like this:
div.content-box {
/* here you need a clearfix choose one here: https://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/211467#211467 */
}
div.content-box div.content-main {
width:70%;display:inline-block;float:left;
}
div.content-box div.content-sidebar {
width:29.99%;float:right;
}
div.content-wide div.content-sidebar {
display:none;
}
But you may not want this on all pages, then you can deal with it programmatically when generating the template.
The idea is: in your template output, where you are writing
<div class="content-box">
instead add a class conditionally when your article-sidebar contains something:
<div class="content-<?php
if ($this->countModules("article-sidebar")==0)
echo "wide";
else
echo "box";
?>">
This will dinamically change the class of the div, so you only serve 1 css.
At this point, create a module and choose to display it "Only on selected pages" .
3)
When you want to change a view, never change the file in place. Instead copy all the view's php to a folder under your template's folder / html/com_contact/contact. Even if you're changing a different layout, you will still need to copy there the default.php.
Then change it inserting the google maps.
A final consideration. You should refrain from editing core files. Joomla sometimes issues security updates, and applying them will be painful. Good luck with your site.
I'm not sure if I am using the proper term when I refer to "dynamically. *
I want to have a simple, one level, menu displayed on all 80 pages of my site. The menu items will change periodically - new items added, some removed, etc... What is the best way to create this menu so I don't have to update all 80 pages? FYI: I'm not too knowledgeable in all the scripting languages. Thank you.**
The simplest way is to use PHP.
Name all your files so they end in php instead of html, and make a file called menu.php.
Copy your menu into menu.php, then no your other pages where you want the menu, type:
<? include("menu.php"); ?>
and the menu will appear like magic!
I would also suggest SSI, but they are often disabled on shared hosting in my experience.
Create a master page if your working in any one of the "major" web frameworks. You put a lonely HTML tag up there so I'm not sure if this NEEDS to be purely HTML and nothing else.