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.
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 am a beginner at web development, and I just want to make a small website based on jekyll. So I have created 4 posts, and they show up nicely on the website. The thing is that they actually show up on the bottom of the page, under stuff I put in index.md (which takes up like the whole page); I want to find a way to move the whole post section to the right so it's parallel to the content in my index.md. I tried CSS flexbox, but I can't find where to add the codes because the posts are found in a separate folder and don't show up in my index.md. What should I do?
You might want to try a different Jekyll template from the one you are using now instead of adapting your current one. The template my university provide for Jekyll in our institutional GITLAB, for instance, has posts above content in the index.md file. And it can be tricky to adjust themes.
However, there are Jekyll templates with a two-column layout with a side-bar.
You might want to check out the "Minimal Mistakes" theme or the "Hyde" theme.
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>
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
I created an HTML website in dreamweaver it has a index page, nav-menu and around 10 other linked pages. I did not build the website from templates I just copied and pasted.
I want to upload this website using Wordpress and Ive never done it before. I'm still learning but need help figuring thing out;
I saw that in order to upload the page to Wordpress I need to create a so called theme and in order to do that I need to create different files like index.php, header.php, footer.php etc
My question is do I have to do that process with all my pages?
I mean about.html contact.html jobs.html?
What is the ideal way to do it?
A WordPress template is essentially a set of PHP pages and CSS that defines how your WordPress site looks. Template Development Link
Manually converting your site is going to take time. The advantage of the WordPress site will be that your site will be easier to update down the line.
How difficult building your template and pages is really going to depend on how clean your original css and pages are built.
First, build your template. You are going to try and pull your CSS and apply it to the template pages.
Next, you will need to use the WordPress GUI interface to add pages and include the content from your original site.
Again it is going to come down to how much of your formatting was done inline and how much you leveraged CSS in your presentation. A lot of table formatting for example will be more difficult to translate.