I know this is probably a very basic/obvious thing, but I'm new to Shopify and trying to assist a client while a colleague is on vacation. I know what I need to change and how to change it, but not how to access it. When I go to Online Store and click Edit Code, I see all the Liquid, JSON, and even CSS files, but I can't find the HTML file I need to edit, nor can I find any of the HTML I need to edit within the theme.liquid file. The resources I'm finding are all either outdated (there is no "Edit HTML/CSS" option on the dropdown anymore) or unhelpful (like this). I can see the HTML in the console and upon clicking View Page Source, but I don't know how to get to it through Shopify. I feel like I'm losing my mind because this HAS to be very simple and obvious. If someone could please tell me how to access and edit the HTML file on Shopify I would be VERY grateful!
The html files are the liquid files.
There are no actual HTML files since this is a Shopify theme.
Depending on your theme, your files are located in:
theme.liquid - here are the header and footer
templates/*.liquid - all liquid files here are the main templates for the different pages
sections/*.liquid - the files here are usually used on the homepage and other pages as well
snippets/*.liquid - these are the reusable code snippets
So depending on your changes you will need to go through these files and update them for the specific changes.
Please have in mind that these files may be used on multiply pages and if you change one of them there is a possibility that this will affect other pages as well.
Related
I run a website for my photography where I have a stories page (http://www.traumantic.com/stories.htm) that is a long list of choices that lead to a sub folder and a gallery of images for that session.
I have an index.htm file in each of those folders that displays the gallery chosen.
I am trying to develop a new format for my pages, and putting it in place means replacing dozens of index.htm files and editing each one for that new format. A boatload of work.
I have noted that a lot of news sites seems to have a method of using a single template for the main body of the page and the elements of the news story are pulled in from another source.
I figured I could do this with XML like I did with my galleries, but I am lost.
I tried creating an XML file in a couple of text folders and then reading that form an HTM file two levels up. Didn't work.
Currently when you click on a link on my stories page, it opens the index.htm file in a sub-folder.
What I want to happen is this.
Clicking on a choice on my stories page launches an html template that reads the details from the folder.
The one html template would be used for all of the different story folders below. Making it far easier to modify the look of my web site quickly.
I'd rather put a ton a of work into designing this system that doing a mass replace and edit project on hundreds of files.
I hope this makes sense to some of you and that you can guide me to some study topics that will help me learn how to do this.
I am seeking advice on places where I can see example of this process.
The simplest option is to use an iframe
https://www.w3schools.com/tags/tag_iframe.asp
<iframe src="/path/to/file.html"></iframe>
Searching "html include" will yield a few guides that have various JavaScript implementations. (e.g., https://www.w3schools.com/howto/howto_html_include.asp)
If you're able to run php, you could use include
https://www.w3schools.com/php/php_includes.asp
But at that point, you might want to consider installing some sort of template engine like twig https://twig.symfony.com/doc/2.x/intro.html
So I have made a PirateBox, but I wish to make edits to the HTML file - to give more functionality and a new look to the webpage. I am confident that I can edit it - but I can't find it. I have looked online and on this site for answers, to no avail.
An additional inquiry: Do I need to re-flash the router / firmware once I edit the HTML file? This question really isn't too much of a concern at this point, though.
Thanks to all that can help me out!
So I found a great guide to personalize the PirateBox - including the HTML file. Here is the page.
To quote the page:
Change the index.html page
I don’t really like the index.html page as it does not show the files available, more over the english language is not adapted of every one, so I prefer a frame organization mixing files, local text and chat area.
The index.html file can be changed by replacing it: create a new one and copy it to the following place: /opt/piratebox/www/index.html
It also includes a guide to change the SSID and the Chat settings.
I'm fairly new to Dreamweaver, I've been working on a website that contains a bunch of pages that need to be edited. Mainly, the menu/drop down menu tabs need to be updated with new links and or names/etc. Is there a way to link the menu bar with the rest of the pages so I don't have to manually edit each and every piece of code on every other page?
There are a couple of Dreamweaver specific ways (Templates and Library items), and a better way (server include).
Dreamweaver Templates:
This requires that you have all of your pages based on Dreamweaver templates and you have you menu in a non-editable region. Once you edit the menu in the template and save your template, Dreamweaver will ask if you want to update all the pages in the site. If you do so, then Dreamweaver will go through your site and update all pages based on the template and update the menu code in those pages. This method will require that you upload all of the changed files in order to see the new menu on all of your pages. For more on templates:
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7acda.html
Dreamweaver Library Items:
Library items are similar to templates in that there is a code block that you can update and when saved the update gets cascaded into every instance in the site. Library items are unique in that they are focused on smaller blocks of code that get added to your page. Again, as with Dreamweaver templates, if you make a change, you'll have to upload all of the changed files in order to see the changes on your site. For more on Dreamweaver library items:
http://help.adobe.com/en_US/dreamweaver/cs/using/WSc78c5058ca073340dcda9110b1f693f21-7e49a.html
Server Include:
This option is "better" in that if you make a change to the include file, once you upload only that file, then all pages that reference the include file will automatically display the updated menu. How to implement this option will depend on the specific server language(s) you have available on your remote site. For example, PHP has at least 4 ways to include an external file (such as your menu): include, include_once, require and require_once.
If you search google or the search engine of your choice for the language name you have available plus include, you'll get a number of results of how to implement an include for your page.
With this option, you'll need to update all pages that have the menu to reference the include file and upload the changed files, but going forward, changes to the menu will only require uploading the include file in order to update your site.
One word of caution with includes is that you need to be careful with the paths in your include files, specifically if you have pages with the menu on it that are in multiple folders throughout your site. Search for relative and absolute paths for more info.
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.
where can I find elegant looking Wordpress (or not Wordpress, but similar style) themes in plain HTML/CSS format, without all the php?
thanks.
View the page source of the theme preview page in your browser. Save the code.
Easy for one page. Difficult for many pages.
You need to see in browser each page you want to get the HTML/CSS.
Firefox Menu > View > View Source
IE Menu > View > Source
A good way not only to save but to study the design and HTML/CSS structure,
use FireBug, Firefox addon. I am very sure it save lots of time and you will love it.
I'm not sure what you mean in your question.
If you mean, "Are there themes for Wordpress that don't require php?" then the answer is no. However, you don't actually need to know php in order to use these themes. You can just load them and then alter only the CSS.
If you mean "How can I adapt a Wordpress theme for a non-Wordpress site?" then you'll have to do this yourself, manually. First make sure you are using Firefox and install Firebug. Go to a site that has the theme that you want and then open up Firebug.
Under the HTML tab you'll be able to see the static HTML of the page, after it has been processed by the backend PHP. Just click "Edit" and then copy and paste everything in there into a new file. Then click the "CSS" tab and go through each style sheet, again clicking on Edit in order to copy and paste everything into new files, 1 for each sheet. Then stick all of the files into a folder and edit the header of the html file to make sure the external stylesheet links are pointing to the stylesheets you have created. Open it up in a browser and it should look just as you want it to.