I'm using the Hugo Whiteplain theme for a personal site hosted through Netlify. I am following tutorial. When I push/publish on GitHub Desktop, I am told that my git submodule is dirty. As a result, I cannot change the theme's background color.
[submodule "themes/whiteplain"]
path = themes/whiteplain
url = https://github.com/taikii/whiteplain.git
What do I do to regain control of my theme? Can I change the color without dependence on this dirty submodule?
There are many ways to customize a Hugo theme. For instance, you can:
edit the theme directly and let it drift from the original project,
create a fork and use it as the theme to be able to pull updates
from the original theme while developing your own version,
edit the theme inside the website itself.
This last option means that you do not touch at the theme itself, but instead make a copy of any file you want to edit inside the tree of your website, following the same path structure, and edit that file.
For any element of any of the customization files (layout, css, scss, etc.) that exists both under the tree of your website and under the tree of the theme, Hugo will prioritize the element in the file under the tree of the website.
For any element not present in the tree of your site, Hugo will use what is in the theme tree instead. This means that you do not have to copy the entire theme or even entire files in your site, but only the elements that you want to customize.
If you choose this method and if you set your theme as a submodule following the Git submodule manual, you will never get into a dirty submodule situation.
Example
Let's say you want to edit the background color of your theme and that the variable is defined in a scss file under:
your_site
+ themes
+ theme_name
+ assets
+ scss
_content.scss
You need to keep the tree architecture and create a file under:
your_site
+ assets
+ scss
_content.scss
You can create a file from scratch, but an easier option is to copy the file from the theme and paste it there. In that file, you can customize the background color (or any other setting) however you like.
Note
I have found this way of customizing a theme (which is actually the way advised in the Hugo documentation) to be the simplest.
One situation where this method is not optimal is if you plan to use the same customized version of a theme for several websites. In that case, creating a fork of the original theme makes more sense as you can add your customized theme (your fork) as a submodule of all those websites and your customization is thus portable.
Related
I started to make my blog with jekyll and github pages.
I was doing fine with the basic theme,
But I wanted to apply the side bar property,
so I downloaded the theme which has the sidebar, from https://idratherbewriting.com/documentation-theme-jekyll/
So I downloaded the proejct and overrided.
I don't know much about how this works,
but the strangest thing is that
in index.md file
if I put
---
layout:home
sidebar:mydoc_sidebar
----
it happens to show the basic theme layout
and the posts as it should be, but if I change the layout to
something else which is inside the _layout folder such as post, default,
the posts disappear and I have no idea why Jekyll does this.
Even when I erase the layout, it returns empty screen
so I'm sure it's doing something with the
home layout but I couldn't find anywhere how the home layout is rendered.
In _config.yml, we can see that you are using (theme: minima) the minima gem based theme (documentation). That means that by default, all your _includes, _layouts and assets are hidden somewhere on you computer. You can use the bundle show minima command to find out where they are stored.
As home layout exists in minima theme, is it used.
If you want to use your own home layout you can copy it from minima to your _layouts folder and modify it to suits your needs.
cd your/root
cp `echo "$(bundle show minima)/_layouts/home.html" _layouts/home.html`
If you want to be sure not to use hidden resources, you can delete the theme: minima directive from your _config.yml file.
this issue can be caused by several factors but it is possible there's no issue at all :)
1) Stop Jekyll serve/watch.
2) Delete the _site directory.
3) Rebuild and serve the site
jekyll serve.
Keep an eye on the terminal to see if Jekyll warns you about the missing layout file.
It is possible, albeit unlikely that the theme or a plugin id building layouts on the fly. To override this (whether it is the case or not), create a home layout as usual and include in a page/post's front-matter. Just keep the layout basic with something like a red background so that you can easily test if it is loaded or not.
I think deleting the _site folder will fix this but if not, try the other option and let me know.
I am new to magento 2 and I am making css changes in luma theme on below path.
But after content deployment I lost my css changes.
Please help me in that.
/pub/static/frontend/Magento/luma/en_US/css/styles-m.css
/pub/static/frontend/Magento/luma/en_US/css/styles-l.css
You should not edit/modify files within pub/* or vendor/* directory.
Pub is for deployment and vendor is for default structure, which you
override via your template or custom modules
Instead:
create a new theme inside app/design/frontend/{vendor}/{yourTheme}/.
You can use Blank or Luma theme
You can also create new theme which inherites from Blank (inheritance
is defined within theme.xml). If you are already using some theme
then skip this step.
edit .less within your theme so the changes stay visible and don't
get replaced when clearing the cache or upgrading the system.
Use grunt to compile your .less into deployment files.
You can also setup sourcemaps to pin point your styling within the
theme .less files so you can be more productive.
if you want to override only css file then you don't need to compile it. so follow above steps , change your css and clear the cache. it will worked.
I'm fairly new to Magento and am having trouble uploading the Aheadworks blog extension to the correct directories. I am using a custom theme for my site, let's call it "themex". The directions state "Navigate inside step_1 directory. If you use a different from default theme - be sure to rename step_1/app/design/frontend/default/default and step_1/skin/frontend/default/default folders to your store's values."
I've located the 'step_1' directory but I'm not quite understanding the latter part of the directions. Am I renaming the 'step_1' directory to "themex" and uploading it to the root directory? Please be as descriptive as possible in your response.
Their instructions are badly phrased, but I'm pretty sure it means that you need to upload the files to app/design/frontend/default/themex
Magento theme files appear in the app/design/frontend/ folder.
The "base" folder here contains the core layout files, and the "default" folder contains the file overrides for other themes. As such, your theme's layout files will appear under app/design/frontend/default/themex (possibly app/design/frontend/themex/default depending on how the theme works)
Magento will first look for design files here first, and then look under app/design/frontend/base if the override does not exist.
Make sure you back-up any files, and if their files over-write any of your theme files then run a comparison on them to make sure they are not over-writing any of your theme's functionality.
I want to create a theme, using a default WordPress theme as the initial point.
According to WordPress Codex, the recommended way to do that is to create a child theme.
Unfortunately, that approach may noticeably affect the performance of a site, because both themes have to be called before the site is actually displayed. WordPress tends to be fairly slow on quite a number of popular hosts, so slowing it down even further is not something I would want to do.
At the same time, coding a theme from scratch seems to be inefficient when an open source theme is close enough to the desired result to only require certain minor recoding.
Question: if I rename the theme in the main CSS file, there's still a lot of function callbacks and variables addressing the name of the old theme (for example, 'twentyeleven'). There has to be some central location where these are called from. What things do I need to rename, in addition to the theme name at the top of CSS file, to fully rename the entire theme an prevent it from being updated, should the original theme be updated by WordPress development theme?
All functions and callbacks of a theme are only being used if the theme is activated. So if you copy the 'twentyeleven' theme into a new folder & activate it, only those functions are loaded even if they have the same name(s) as the original theme. To answer your question (going with the 'twentyeleven' theme):
Copy the 'twentyeleven' theme folder and give it a unique name
Edit the file style.css in your freshly copied theme folder. Change the Theme Name:, Theme URI:, Theme Author:, Description: & Version: values to match your desired output.
Go to Appearance->Themes and activate your new theme
You have now a 'twentyeleven' clone, but completely independent of the original files. Any updates available for the 'twentyeleven' theme will not affect your theme (there will be no updates listed for your theme).
HTH
you may be interested in html5blank, a boilerplate wordpress theme
I am working on a Magento project and it is due an update; so I am wondering which folders will it replace/affect during an update. I am used to working with wordpress which leaves the entire 'wp-content' folder ( all the user data ) untouched during an update - I presume magento does something similar and doesnt overwrite custom theme files, media uploads (and hopefully not products and user data anyway) but then I read the following from this page which confuses me
For several of the first Magento themes I built, I copied the layout files from the default or blank theme into the custom theme layout folder. I would then modify the layout files directly, editing or commenting out content in files like: catalog.xml, page.xml, checkout.xml, etc… I never liked editing these files directly, as I knew that when it came time to upgrade to a newer version of Magento that had upgraded the layout files, I’d have to merge the changes into the new layout files.
I think I may just have a mistunderstanding specifically about layout files but all the same could someone clarify for me which locations (if any) that I might expect to loose data from during an update ( so that hopefully I can avoid using these locations )
You won't loose any data if you have made your edits in custom theme package/folder and not in core code (but in tyour own extensions and code/local code-pool). However as you mentioned yourself it would be wise to merge your theme to be based on new layout files and same goes for template files as well
you can use a diff tool for that that can compare entire folder structures (winmerge, things and so on) and compare your theme and base theme folders
lets clarify things
whatever you change in code do it by making extensions in app/code/local/ or app/code/community
by merging your theme based on = if new version of magento is available and your theme is based on old version layout files and templates eq you have copied layouts and templates and modified them then it is wise to compare all changed files against new ones and apply your changes on top of new layout and template files