Two different html templates - html

I am trying to add two html templates in one site one is normal and other for mobile devices.
I want that when someone see my site with mobile it show mobile template instead of normal.
Is it possible?
I discuss this other people they says install parallel site eg: m.atecharea.com and use config file for regular site and name the template file as in regular site . With this method everything goes correct except one thing data folder not loaded which is in root/ directory. They also suggest to change data path manually from this:
// Data paths
define('MEDIA_DIR', 'data/media');
to this
// Data paths
define('MEDIA_DIR', 'http://m.atecharea.com/data/media');
its not work, it shows data folder link like this
http://atecharea.com/http://m.site.com/data/media
its not work
Other person suggest to load wap template instead of default when view through mobile url.
Code is this:
if ($HTTP_SERVER_VARS['HTTP_HOST'] == 'm.atecharea.com') {
$config['template_dir'] = $config['template_dir'] . 'default_wap';
}
it didn't work either.
Please if some one guide to get data folder or second template folder anyone solution from these two will solve my problem

The question is not very specific so a suitable answer would be "Yes". You can try to detect the browser using the user-agent and then send the desired HTML back to the client based on that.
Also there are two widely used alternatives to that:
use an adaptive/responsive layout, meaning one layout that is built in such
a way that it adapts itself any screen
use a standalone domain for the mobile pages

Related

Is there a way to apply custom CSS before printing a page in a browser?

I occasionally save tutorials from a website as a PDF file for future reference.
My current manual workflow is:
Click the "show on one page" link to get a full single page view of the article.
Open the DevTools of the browser and select sections with advertisements and related links with help of the inspect-functionality and remove them.
Print the page as a PDF file.
I used the Firefox or Chrome-Browser for this, as they both have the required functionality and behave very similarly in that regard.
I noticed that the content I want to remove to get a "clean print" of the content is mostly the same: Let's say all adds are embedded with a div with the class add-banner.
Is there a way to automate these steps?
One idea is to load a custom CSS file that I would need to prepare specifically for a site. Simple rules like .add-banner { display: none; } would allow me to hide the sections that I don't want to print.
I also took a look at console based scrapers because I like the idea to call a command with the URL as a parameter. But the tools I've discovered are image based and I want a indexable PDF file where I can search for text and select parts.
What is the best option to achieve this?
The extension User CSS from the chrome web store (free) allows me to add custom css rules to whatever page is loaded. It is possible to import and export CSS rules and the extension allows to store the custom CSS on a per site base.
This is exactly what I was looking for, since it makes it easier and quicker for me to remove unwanted sections before printing.

Saving static HTML page generated with ReactJS

Background:
I need to allow users to create web pages for various products, with each page having a standard overall appearance. So basically, I will have a template, and based on the input data I need the HTML page to be generated for each product. The input data will be submitted via a web form, following which the data should be merged with the template to produce the output.
I initially considered using a pure templating approach such as Nunjucks, but moved to ReactJS as I have prior experience with the latter.
Problem:
Once I display the output page (by adding the user input to the template file with placeholders), I am getting the desired output page displayed in the browser. But how can I now obtain the HTML code for this specific page?
When I tried to view the source code of the page, I see the contents of 'public/index.html' stating:
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
Expectedly, the same happens when I try to save (Save As...) the html page via the browser. I understand why the above happens.
But I cannot find a solution to my requirement. Can anyone tell me how I can download/save the static source code for the output page displayed on the browser.
I have read possible solutions such as installing 'React/Redux Development Extension' etc... but these would not work as a solution for external users (who cannot be expected to install these extensions to use my tool). I need a way to do this on production environment.
p.s. Having read the "background" info of my task, do let me know if you can think of any better ways of approaching this.
Edit note:
My app is currently actually just a single page, that accepts user data via a form and displays the output (in a full screen dialog). I don't wish to have these output pages 'published' on the website, and these are simply to be saved/downloaded for internal use. So simply being able to get the "source code" for the dislayed view/page on the browser and saving this to a file would solve my problem. But I am not sure if there is a way to do this?
Its recommended that you use a well-known site generator such as Gatsby or Next for your static sites since "npx create-react-app my-app" is for single page apps.
(ref: https://reactjs.org/docs/create-a-new-react-app.html#recommended-toolchains)
If I'm understanding correctly, you need to generate a new page link for each user. Each of your users will have their own link (http/https) to share with their users.
For example, a scheduling tool will need each user to create their own "booking page", which is a generated link (could be on your domain --> www.yourdomain.com/bookinguser1).
You'll need user profiles to store each user's custom page, a database, and such. If you're not comfortable, I'll use something like an e-commerce tool that will do it for you.
You can turn on the debugger (f12) and go to "Elements"
Then right-click on the HTML tag and press edit as HTML
And then copy everything (ctrl + a)

Use environment variable in link in email

I want to generate links that can be pasted in emails so I can show people folders in their directory structure such as where to edit their email signature manually.
I'm trying to put a link to the folder in an email but make it generic enough that when they forward it, everyone who opens it will get the link into their own directory structure properly so I need to use environment variables.
I type the text I want the link to say then highlight and CTRL-K then put %CSIDL_APPDATA%\Microsoft\Signatures\ in the link but Outlook changes my % symbols to %25's. I'd ask how to escape a % but it shouldn't be escaped I don't think since it's actually part of a link.
Environment variable list FYI:http://technet.microsoft.com/en-us/library/dd560744(v=ws.10).aspx
Simple answer, you can't. When you're linking like that, the current directory looks like root / to the html. So you could look at a subfolder of current directory (which you aren't guaranteed to know since it could be different on different OS's or even per user configuration) but that won't really help you.
This project will let you edit the actual HTML of your email by adding an Advanced tab but even with full control of the HTML, it can't be done. "It would open up a security hole the size of Denver."
Here's a lot of quality info on Relative Addressing which is what you're trying to do.
this is because outlook parse your input as HTML link.
I did not test it but you should give a try to this file://%CSIDL_APPDATA%/Microsoft/Signatures/
See this answer too : ways to make an html link open a folder

Convert webarchive to html

I managed to collect the behavior of a complex web site into a webarchive. Thereafter I would like to turn that webarchive into an html set of nested directory. Yet, when I did it both with Waf and with a commercial software bought on the the Apple store, what I get is just the nested directory with the html page at the bottom and no images, nor css nor working links.
If you are interested the webarchive document is at:
http://www.miafoto.it/it/GiroMilano.webarchive
while the weak product of the extraction is at:
http://www.miafoto.it/it/Giromilano/Pagine/default.aspx
and the empty directories above.
In addition to the different look, the webarchive displays the same behavior as the official web site - when a listbox vales is selected and then the button pushed - while the extracted version produces a page with no contents by loading itself rather than the official page.
As you may see the webarchive is over 1MB while the extraction just little over 1 KB.
What is wrong with it and how may I perform such an apparently trivial business with usable results?
Thanks,
textutil -convert html example.webarchive
Be careful — html with files is created in the same folder as webarchive!
Also, I had to open .html with text editor and replace "file:///image.tiff" links (replace "file:///" with "") so they point to relative path.
Also, not all browsers display .tiff images.
Who knew we have Stack Overflow wiki?
I find that this WebArchiveExtractor.app works on my Mac (Mojave OS) –
https://robrohan.github.io/WebArchiveExtractor/
I managed the issue by finding all parameters being submitted in the page and submitting them too in my script, ignoring the webarchive.
To save HTML pages on mac, I use chrome. Download and install it and save your page as HTML. Safari will save the web pages with webarchiveformat and for me, it's very hard to deal with it.

Firediff plugin

I am relatively new to Web Development, and I am messing with a Joomla template installation.
I managed to get firebug to make changes and Firediff to save them as a new CSS, and replaced the CSS file on the server.
What I would now like to do is edit the template elements, (mostly deleting unused template elements), on screen using firebug, and then save the changes to a new HTML document.
My trouble is that I cannot work out where the correct html is to replace on the server.
Only by using Dreamweaver I can ascertain that the file name is index.html, but there are many files called this on the server.
With the CSS file I was able to identify the server path and filename from the blue text in the right panel of firebug, in order to replace the CSS changes with the output from firediff.
Can I identify the location, (and ideally filename), of hte HTML document in the same sort of way from firebug?
You might want to read the template tutorials before removing anything from the template index.php. In general, you want the template to have provisions for every possibility that you might want. A well designed template will have the ability to display multiple columns in multiple positions as well as other positions to place banners, login boxes, weather widgets, or anything else you can think of. Then you simply code the template so that any position that is not being used does not get added to the final code of the page being displayed.
Official documentation - http://docs.joomla.org/Joomla!_1.5_Template_Tutorial
Once you have a good handle on how the template is supposed to work, the file you will be editing is in JOOMLA/templates/YOUR TEMPLATE/index.php
Be sure you get the whole module positions and collapsible module position thing before stripping anything out. A well thought out template will very rarely need any code editing, virtually everything should be done in the admin and with CSS page class and module class suffixes.