I am still using the default Octopress 3 theme, but would like to use Jekyll themes The instructions online, though, suggest that I fork a theme, change the _config file, and then add my content.
It seems like, since the themes should just be sass and _layout, I should be able to install those files and have a new theme.
I haven't seen clearer examples or documentation on that.
Posting here per the jekyll website.
Generally, the best way is to fork the theme, and copy over your content in the _posts folder, and your _config file, as per this answer.
It would also be possible to copy over the theme files into the _sass, css, _includes and _layouts folders, since this is where the theme rests, but this would mean a) more work and b) you can quite easily mess it up. Oh, and the js folder, the index.html file, any other pages not using the page layout...
Ultimately, Jekyll is not like Wordpress; It's not easy to just drop in a new theme.
Forking a jekyll theme just for using it is not a good practice, even github has recognised it and now provides the template type. Forking is good mainly for contributing back to the original.
The easiest way to switch theme on an existing or new jekyll installation is to use the following plugin: jekyll-remote-theme, which is available since November 2017.
The remote_theme method is almost similar to Wordpress usability, instead of clicking around you have to type-in the name of the new theme in the config file. You do not need to fork a theme or touch any of the style files.
This is an elegant solution, because in the long term you prefer the experts (i.e., the theme maintainer) to handle bugs and new version in the theme, while you can focus on your content.
If you have a custom theme with new and elaborate layouts then the switch might take some more manual work
Related
Basically I need to change the look and feel of a NopCommerce application, and I have created a separate theme folder and can do my CSS changes there. But there's only so much you can do with CSS. At some point I'll need to update html to make it look like the way I want.
So what I am concerned about is that if I change the layout and individual pages html to make the site look like how I want, what will happen if later I have to upgrade NopCommerce version, will my markup changes break or is it not a problem.
I have seen NopCommerce themes and it looks like they have updated the markup but I am not sure if its right to do it.
You're already halfway there, it's the same process as for changing the CSS. Simply copy all the cshtml files you intend to modify to your theme's folder and change the code however you need to. The modified files should be under Themes/YourTheme/Views, as per nopCommerce standard. When you install your theme, it will render the pages from here instead of the default folder. This way, the default views are left untouched, and your changes have no impact on the default theme.
For example, in the default theme of version 4.4, the homepage is rendered from Themes/DefaultClean/Views/Home/Index.cshtml. To customize the layout of this page for your theme, copy the Home folder to Themes/YourTheme/Views and you're good to go.
It's all explained in detail with examples in the official documentation- Customizing nopCommerce Themes
I feel as if I'm missing something. I've read through the documentation of Jekyll and Hugo, but am still confused as to why one would use them as opposed to something like Pug with Webpack or Parcel to create a static-site.
So, what do static-site generators provide that bundlers don't?
You are comparing apple with oranges here. While all those tools can technically be used to create static websites, they serve different purposes. To quote the header of Jekyll's homepage:
Transform your plain text into static websites and blogs.
Jekyll and Hugo are really designed for plain text and (mostly) blogs. As a user, you write articles in plain text or Markdown, and use those tools to turn them into static HTML sites. Besides generating HTML, the tools have a lot of functionality that is typically needed for blogs, e.g. they create an index of all articles and support categories.
With Jekyll (and probably Hugo, but never used it myself), you can also add pages to your site that are not blog articles. So theoretically, you can ditch the blog and use it to build a static website. But that is probably not why most people use it...
Compare that to Webpack: Webpack is first and foremost a build tool for Javascript. It doesn't care if you are building a static page, a progressive web app or a mobile app. It just bundles your assets based on the configuration you provide. With the right configuration, you can certainly use it for static pages, but Webpack will not offer more functionality than to bundle your files.
Depending on your goal, either of these tools might be better suited for you. Tools like Jekyll and Hugo make it very simple to get started and create a static website or a blog. You can style the HTML, sprinkle JavaScript on it and create your own design. Or you just grab an existing template that somebody else in the community created. Whatever approach you choose, you have something running in minutes.
Tools like Webpack on the other hand give you all the flexibility and a lot of power, but also require that you do everything yourself. It really depends on your use case whether or not it makes sense to build a static site with them.
A client of mine would like me to go into their WordPress website and add a fixed button to the bottom-right. This button should be on every page.
I know HTML, JavaScript, CSS and PHP quite well, but have never used WordPress before and it seems a little frustrating.
I only need to add this button and link it to a URL, but I don't want to download additional plugins. Can I add my own HTML to a theme? I've heard of the ability to make Child Themes to prevent my additional HTML from getting wiped when the parent gets updated. How does this work and how can I use it to achieve the above?
Child themes are the typical way to modify an existing theme, so that you can still update the original theme as its developer releases new versions. It is correct that updating the theme would wipe out your changes, if you don't use a child theme.
I've only made a couple child themes myself, but I found this documentation helpful:
https://codex.wordpress.org/Child_Themes
For modifying template files like the footer, the first section "Creating a Child Theme from an Unmodified Parent Theme" is the minimum to get started. The style.css file contains metadata that tells WordPress about the child theme and its parent, even if you don't add any styles. The functions.php file makes sure both themes' stylesheets are loaded, and can be used for other functions later. The page above has some code you can mostly copy and paste, with some changes for your site's specifics.
Once the child theme exists, you can copy footer.php from the original theme into the child's directory, and modify it as needed. Keep in mind that since you are overriding the original theme's footer.php, if there are later changes in the parent theme's footer.php, you may need to manually update your copy, to combine their changes with your site-specific code.
If you have a separate site or development environment where you can test your child theme first, I'd recommend using that, then copying it to the live site when it's ready.
You would have to do this within your Wordpress Theme / Template files.
You'd have to learn the architecture of Wordpress CMS (mostly) but also your applied theme you'd be customizing and adding this feature. You'll have to know what .php files drive what pages and where you can add this feature.
If you don't want to mess with both any core Wordpress CMS files nor your original applied 'Theme' files; you can consider creating a 'child theme' or 'plugin' to extend the features and functionality; this way.
Please start by understanding Wordpress CMS further. Here's a good article: 'http://www.wpbeginner.com/beginners-guide/beginners-guide-to-wordpress-file-and-directory-structure/' also check http://wordpress.org
Hope this helps, g'luck!
Building a child theme is ultimately the best thing to do, as any future theme edits for the client can be done there. Here's an article on WP child theme creation.
A quicker way should be mentioned, although it can be limiting: Go to Dashboard/Appearance/Widgets, make a new Text widget and place into your footer region. This is assuming, of course, that the theme you're using has a footer region defined (most do). In the widget, use some HTML like this:
<div style="float: right; width: 60px; background-color: red">BUTTON</div>
As indicated in this similar question (Switch theme in an existing Jekyll installation) there are many jekyll themes to choose from.
I would like to keep my own content separate from the jekyll theme used.
Is there a good (standard?) way of structuring a jekyll project so that your content can be kept distinct from the theme?
Most of your content is kept separate but there is a little bleedover.
This is evident from the answer to the linked question.
Changing the theme later can become a painpoint.
Ideally I would like to structure the project such that there is a theme sub-directory or similar and the theme may be altered by pointing at a different sub-directory.
Doing this dynamically (making the web-site 'skinnable' would be nice to have but not essentiall).
Is there a dynamic theme theme somewhere?
Short answer: Yes, you can keep theme and content separate, but only if your site stays with the basic layout calls (default, page, post).
Longer explanation and exceptions: If your existing jekyll installation is pure: you have edited only the content in pages, posts and not created-used special layouts, then, you can use the jekyll-remote-theme plugin and the switch is seamless, assuming that the new theme is not doing something radical with the defaults.
If your existing theme has special layouts (e.g., splash.html and the new one does not have it) then your pages that employ the respective layout will become orphans (i.e., basic html with no special formatting).
I have switched an existing installation that had been extensively edited, so I got several orphan pages, which I had to manually switch to a layout that makes sense within the new theme.
In conclusion, you can keep content and theme separate in many common cases (e.g., personal blog), but not if you want a custom solution (e.g., personal portfolio with gallery and splash pages).
Jekyll is tool that allow content separation beautifully, be it also from theme files. It's not about standard structuring - although following points will help out.
Do not move or disturb structure of theme files as it may be bought from 3rd party.
Create content as blocks and put jekyll code to insert them at runtime in theme. So if you want header somewhere you can insert {% include head.html %}. Also have a look at contentblocks plugin.
I started fiddling with Octopress recently, and I found a theme for Jekyll that I liked it.
The problem is that this theme doesn't have a similar structure that Octopress needs for themes.
I tried to clone the repo directly into my Octopress folder then use rake install['name-of-theme'] but that didn't work and I just got some errors about missing folders (source, sass).
So my question(s) is, how to install a theme for Jekyll with Octopress? is there a directory structure I need to follow? what are the minimum files requires to make it work?
I Googled a little bit but I didn't find anything related to converting a Jekyll theme.
Thanks.
You can't. The author of Octopress made his own theme layout and plugins to support it. Jekyll is meant for you to create your own theme layout as you wish (it's barebones). Think of Jekyll as a great framework to write your own static site, a store front or a wiki or a blog - from scratch. Octopress, on the other hand though, adds a framework on top of Jekyll: theme layout, a number of plugins defaulted for a blog site, SEO throughout the templates, a config file for controlling this framework-on-top-of-a-framework (Octopress framework on top of Jekyll framework). Basically, you can take Jekyll and write your own theme layout any way you wish; but with Octopress, you already have a strict theme layout to adhere to.
Octopress' rake install[] command to install a theme just copies a bunch of files to specific directories, following the authors specific theme format.
He's also changing the format from time to time as well, which usually breaks even older Octopress themes working on current Octopress sites (doesn't seem to worry about backwards compatibility). I know: I really tried some old responsive ones I found only to get errors with the latest Octopress as of April 2014.
Anyhoot, after many tries, I finally just sat down and copy-n-pasted the HTML into a new Octopress theme manually myself. Created my own "theme" to try to get some older Octopress themes working.
Still didn't like it as it was buggy (and I was trying several older Octopress themes); so, I gave up and just wrote my own Octopress theme from scratch and moved on. Personally, I don't like how Octopress' layout is, well, laid out. Far too many freakin incremental files. I basically just built my own from scratch and skipped several of the "custom" stuff. This allowed me the freedom of mocking up my own raw responsive set of HTML files and organize it how I wish (http://eduncan911.com).
I understand why he added the custom stuff in the last few months: for people that don't know much about frontend or just wanted a quick place to tweak this font, change that color, or just add a JS script to the custom footer and be done with a plugin.
Me? I already had a full HTML/JSS responsive HTML mockup I wanted to use. I only needed to utilitze Octopress' articles and show/hide the pagenation and comments. I didn't need that elaborate Octopress template layout. Though, now if anyone wants my theme, they can only copy exactly what I did and will need to modify it as they want. I did keep the SCSS generation though, as I like SCSS.
https://github.com/eduncan911/eduncan911.github.io/tree/source