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.
Related
Just as an experiment - I have taken the page source from a webpage I am viewing and copied it into a file on my desktop. When I try to open this file in my browser, I get a jumbled mess with no formatting.
What could the original page have that my copy does not?
Copying the files from original site through Viewsourcepage, you will not get the CSS and JavaScript files. Usually we call CSS and JavaScript from external source so that is the thing you are facing problem here
My best suggestion is if you want to copy the files from original website use Httracker. Download httrack from the website, Install it and use
Sounds like you're missing the stylesheets as well. Stylesheets include the styling (formatting) for the html.
There are probably CSS and/or JS files that are loaded dynamically from where ever you copied the HTML from. But they are probably relative locations, and you didn't copy those files too.
Static web pages will work when you do this. Their content do not change.
A lot of pages nowadays are dynamic and the source changes based on the client side JS code or values from the backend.
There could also be frameworks and a lot of dependancies for that particular page.
Instead of copy/paste manually, you can try some websitedownloader eg. it's an online one https://websitedownloader.io/
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.
Is it possible to find which pages in Dreamweaver are missing a certain snippet of code or text?
I have a site with hundreds of pages, and I would like to search for the pages that are missing a certain snippet of code.
I'm open to using a different software if Dreamweaver cannot do it.
Dreamweaver can find the missing snippet , first you need to one page in Dreamweaver , and then press ctrl+f (find) and change current document to folder and browser your folder path, then copy paste what you need to search and click replace all then you need to open the folder and check the missing html ain't modified, other's are modified new date ,you can see which pages are missing the snippet,
I have this theme http://themes.two2twelve.com/site/fluidapp/light/ installed on my website running wordpress. I converted the template to a wordpress theme by following the steps here: http://thethemefoundry.com/blog/html-wordpress/ and its all working fine.
However, I have now been given the crazy task to integrate a "Back button" function in it.
What they want is to have some sort of Back button functionality (or the browser one) so when they open Team and they press Back - they go back to Home. The template is basically one-paged, you can see so in the source code.
One way I can see this happening is if I make every page a different .php file, upload them to my theme folder and then just hyperlink them. like www.yoursite.com/team.php
Another possible way (I think) would be to create a page.php template file and then post the pages using wordpress. Question: How do I tell wordpress to use page.php as the page template file?
Can you think of another way to integrate this functionality? Thanks a lot in advance.
If it always is going to return the user to the startpage you could just use the home_url(); function.
Back
If you got more advance structure and you want the button to just redirect the user back one page, you should use javascript.
Back
page.php is the default template for wordpress pages. So if no other is selected in admin, page.php will be used.
If you're using javascript to load the new content, you could use javascript pushState()and popState() to log the stuff to new url's, and it gets added to the browser history. Here's an example.
What I'm trying to do is to save the changes I make to CSS and HTML on different sites with Firebug.
Just to be clear, I don't expect Firebug to upload the changes to the server via FTP or anything. I just want to save the changes locally, so only I will be able to see them.
For example I've seen a few Firefox/Chrome extensions that add a download button under every video on Youtube, so I know it's possible to do that somehow.
If you have a different way to achieve what I'm trying to do, I'll be glad to hear about it.
(It doesn't have to be with Firebug.)
Thanks in advance!
If you don't mind using Web Developer Toolbar it's easy to save changes made to the DOM (and CSS).
When you install the toolbar, you'll get a "View Source" menu, click on that and choose "View generated source". Then just copy and paste that into a .html file.
You did not say if you alter your HTML or CSS, if CSS, FireFile is a very good addon for this.
Edit, with some Googling, i found FireDiff, which states that it can export changes made in Firebug, i have not tested it bit it's worth checking out.
You could try using Greasemonkey.
It has support for adding custom scripts that are run whenever you load a page (linked to which pages it should load on) and that can make changes to the page dynamically.
https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/
The http://chrispederick.com/work/web-developer/ web developer toolbar will let you add a user style sheet to a site which should achieve your goals.
This may or may not be exactly what you're asking for, but you can download the extension FireDiff in order to save changes made with FireBug. I made a little tutorial on how to do it here: https://www.youtube.com/watch?v=m4OmZLX2zd4
I have a somewhat simlar use-case that I solved differently. I'm not sure if it is what you are looking for or not. I'll describe the behavior and if that is helpful I'll explain exactly how I implemented it.
I changed the code that execute when you click "Run" (or Ctrl+Enter) to check to see if the first line of the code is a hard-coded string //LoadFromFile:<file path>. If it is, and the file exists then I pull the file off of the local file system and run it instead of executing the code in the console window. This way I can use an external text editor to write code.