I have made a couple of simple Joomla websites before. Those are using a custom template made by myself. They are easy websites as they have a simple linear menu, all pages have the same layout, just some articles are changing between pages.
But in my new project, I have a ready html website that I have to convert to Joomla. The problem is, there is no one repeating menu and there is no consistent layout. To simplify a bit: there are 10 pages and they all have different layouts. Between pages background changes, menu position changes, menu content changes, content box positions change, everything changes. This means I'm not able to do this site as I've done before, using one template index.php which simply contained my repeating page structure.
I am dreaming of a way to simply change ready_page1.html to ready_page1.php, adding some modules inside the php (which are then available for online editing, which is the reason switching to Joomla). I would do this to each page. The custom menus inside each page I would "manually" point to the according php files instead of the old html files. Is this method possible somehow? I couldn't figure out how to do this.
I don't care loosing lots of Joomla basic functionality due to this crude method, I just want the simplest way to do this.
In the end, I just want the exact same website I already have on html, but I want some chosen rectangular areas in the html pages to be editable Joomla modules. The modules would have the pen icon for editing. That's it, no other functionality is necessary.
Sounds like the site you are converting is a usability nightmare. Consistency is part of giving the user a positive experience. That said, if you have to make it exactly the same, then the easiest way is to do it the right way to begin with.
First, you need to learn about page class suffixes. You can add those to a menu item so that you can control the CSS on a per page basis. This will allow you to change backgrounds and other elements on each page.
Documentation - http://docs.joomla.org/Page_Class_Suffix
Next, you will need to make a template so that each of the module positions is collapsible. If you plan out the positions, you should be able to use a single index.php for the entire site. We have a custom template that we use for every site we do and it rarely needs to be touched because all of the positions we would possibly want to use are already there, they just don't get used until a module is put in the position.
Documentation - http://docs.joomla.org/Collapsing_columns
You will also want to make sure you understand menu assignments. You should be able to assign the modules to the pages as needed to create the layout you want for each page. If you are using 2.5.x, then you can probably get by with the built in menu assignment features. If you are using 1.5.x then (you really should upgrade) you will probably want to use Advanced Module Manager as it makes menu assignments much easier and more flexible.
Documentation - http://docs.joomla.org/Help15:Screen.modules.edit.15#Menu_Assignment
Once you get a good grasp of how Joomla templates work and how they are supposed to be used you will find that you can basically do anything you want within the framework so you don't lose any functionality.
build your website and create those 10 pages (contents, heirarcy, and so on..).
then create your templates based on those html files. this is where you adapt the html into a joomla template. after this step, you should end up with at most 10 templates depending on your styles (crude but quick)
as far as i know and from the documentation, Joomla 1.7 supports "template per page" (see the screenshot). you can pick out which style will be applied to which item. it even applies to subpages. another documentation here
Related
I know that this question is not more coding based. But this can cause many problems practically.
I have a website with 10 pages. Each page has the same navigation. Now if I want to change the navigation a little to include a hamburger menu, I will have to make this change in each page one by one. Is there any way in which I can make this common change to all the pages at the same time?
I browsed for this on SO but the answers to a similar question asked to use PHP or WordPress. Is there any method or tool other than them for my requirements?
With HTML, I don't think there's any support for that kind of dynamic feature yet.
However, if you seek to want to make changes on a portion of your website and see it apply to every other page on your website that has the same portion, there are frameworks, libraries and even template engines that support such.
You may need to use HTML alongside these tools or just use them to replace HTML. For instance, when building a website with Node and Express, there are a good number of template engines that you can make use of that can be used alongside HTML to make your website dynamic. I would recommend that you try out one of the following: pug, ejs, handlebars. I believe you can achieve that level of dynamism with one of them.
You can also decide to use front end libraries or frameworks like react, vue and angular. These tech tools enable you to create a portion of a website(called a component) once and reuse it on as many pages as you want. Anytime you make a change to that component, it automatically adjust itself on every other page it has been inserted.
Does anyone know if I can integrate GrapeJS into my own website so clients could build their own websites using it? IF anyone has done this, how easy is it and are there downsides?
This question is pretty open ended, but I'll take a shot at it.
The short answer is yes, you can use Grapesjs to allow clients to make their own sites; however, the details matter.
Grapesjs by default doesn't know anything about your stack, website structure, metadata, etc. You will need to either supply plugins or implement those features yourself. I've worked on a project for a company that used Grapesjs to implement single page apps and I'll include just some of the tweaks we had to manage.
Hiding certain layers that only confuse average users.
Hiding pretty much all of the styling, and using traits to allow people to pick from some predefined styles.
Take the html, css on store and generate the final html page, and store it in our static serving folder on the server.
Implement a wrapping "App" component that has traits for the different metadata we want users to control (open graph metadata, title, etc)
and those are just the big things, I'm sure I am forgetting several small ones.
For your application, you'll also need to implement a custom trait for links / buttons that allows you to link from one "page" to another. As well as, a way to allow a user to pick which page to work on.
The long answer is Yes, but Grapesjs is only the starting point.
Yes you can.
However it is not straightforward.
If you want to build a Drag Drop Editor like GrapeJS Demo, here is the Source Code - https://github.com/artf/grapesjs-preset-webpage
You can see an implementation at https://codegres.org/dragdrop
I can't find any info how the intended implementation of Bootstraps navbar is suppose to be done.
Right now I have downloaded the example, and cloned it for each of the button options, changed the menu so the shows the correct selected button, but this can't hardly be the correct way, as it is a lot of copy/paste maintenance.
Also I am guessing that is not the intended method, as it looks like navbar is a class in bootstrap.
Has anyone tried to use navbar and can tell me how they did it, or point me to the intended method?
It is outside of Bootstrap's scope how to implement it in an efficient way. That is the job of a server-side language.
When you have a situation where you do a huge copy/paste, then think template, and for small copy/paste think variable like in the case of the menu, where you have to change the active state.
Any modern server-side language have a template engine, where you put in skeleton of your page.
For the menu, you probably want to generate it, where you have the menu button names in a yaml file or perhaps database of some sort.
On the other hand is it popular to offline generate all possible html pages, and then serve them with a plain httpd or nginx. Jekyll and github pages are such examples.
I would like to be able to access a site's HTML in Wordpress in order for fine editing/customization. At the moment, to access the HTML of the page I am going to Chrome Developer tools where I can see all the html for the site in the bottom left-hand window.
But when I try and access it from the Wordpress dashboard, all I can find are files such as 'single.php', which are written using php loops and I cannot seem to trace where the original html elements are.
For example, for changing the number of columns in a contact form 'message' box.
Any ideas?
Wordpress is template-based. As you already mentioned there are templates such as single.php, content.php etc. In order to change the lay-out of the website (or better, the structure) you have to change the corresponding template. If you want to change the style, you have to edit the style.css of your theme.
If you want to change the HTML of individual posts or pages, you can simply click the "edit" button and instead of using the WYSIWYG editor, you can swap to a standard text editor.
Wordpress is very well documented. Here is a guide to get you started on editing files.
WordPress, like pretty much any popular CMS, produces its HTML by combining three basic factors:
The active theme
The enabled plugins
The stored content
While the latter is merely data stored in a database, the other two are responsible for deciding what to pull from the database, how to filter it and how to render it.
So the final HTML your browser receives cannot be a subject of arbitary manipulation. You can change some things by developing your own theme, some others by installing or building extra plugins but not the final, dynamically-produced output.
Consequently, I highly doubt there will ever be a plugin that gives you the opportunity to do what you ask.
Is there any other way to access one and the same menu without re-adding the code for it in each "page"?
I mean a menu looks exactly the same, no matter which part of the site you´re in.
So there should be a way to have that menu attached to every page on the site without adding the code for every page you create?
Which language you want to use for your site development?
There are lot of frameworks available for each language.
For example struts with tiles in java.
In tiles concept you will be defining some base layouts. which will specify header here sidebar here etc.
Then on next pages you can simply extend your new page into your base layout. There even if you are not specifying any content specifically, it will take previously defined one by default.
For example refer the struts tiles example link.
In jsp there is an option to add a page within an another page. Key word is
<%# include file='menu.jsp'%>
here menu.jsp is mu menu bar, which I am calling to a location in my page. So hat it it will appear in the place where I specified. If you are not comfortable with tiles concept, you can use this method for adding menu into your pages with out repeating entire codes in all pages.
There are a good number of ways to do this, and as far as I am concerned, they all use PHP or something similar to generate the HTML menu code on each individual page.
The browser must have all the content or it will not display a particular part. One can either hard code something like a menu into every html page or they could create something more of a php site which generates the html and serves it to the browser.
Other the writing the php yourself, off the shelf solutions will (often) allow you to do this. Examples would be shopping carts, as well as content management systems (CMS).