Have your custom theme exported in SemanticUI - themes

Following documentation, I downloaded Semantic UI with:
npm install semantic-ui
then, I customised few variables per site, also few on element level, button for example.
This is all well, and I haven't had any problem changing those.
Then in theme.config file, I could specify:
#button: 'mytheme';
to pickup those custom style overrides
For my theme to be separate from Semantic UI core, I crated directory in the following path,
src/themes/mytheme
,and after running gulp build, I expected to have that mytheme exported over to dist/themes/mytheme along with basic and default which were already there. But that was not the case. So to be able to use my new button styles, I had to move manually newly generated button.css from dist/components after that gulp build task.
Am I doing this wrong? How to have all override files in one place like packaged theme? So I could then add <link> declaration after semantic.min.css to use my overrides.

Related

Hugo theme submodule marked as dirty, doesn't update

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.

How do I customize go-present template?

I am new to Go and just stumbled upon Go's present package which I imported via go get golang.org/x/tools/present.
Is there any way to customize the look of the presentation? E.g. via adjusting the default css file?
If so where are the files used for the style? I cannot find the package anywhere in my Go path...
Let's assume you have a directory myslides with some .slide files in it.
Create a subfolder theme in myslides.
Copy the folders template and static from $GOPATH/src/golang.org/x/tools/cmd/present to that new theme directory
Start present with a new parameter -base: present -base theme
Modify the styles and template files. Most small things are in styles.css.
If you change the template files, then you need to stop and restart present. If your are changing the styles only, then a reload in the browser will do (take care to disable the cache.)
I found that the only way to change presentation styles is to modify library files directly.
If you use vgo:
$GOPATH/pkg/mod/golang.org/x/tools#<version>/cmd/present
Otherwise:
$GOPATH/src/golang.org/x/tools/cmd/present
Of cause first you need to download present package: go get golang.org/x/tools/cmd/present

Magento 2: File path for changes in css

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.

How can I customize Docfx documentation (themes or templates)?

I just started using Docfx and set up some basic conceptual documentation. Now I want to make some adjustments to the theme (company logo, perhaps some font changes, etc.) Minor stuff.
The official documentation only gives a high-level description of how to create a new template. I've never used a templating language before, so I'd like to avoid that for now if possible.
My question is: how can I make small adjustments to the default theme, like some CSS changes and perhaps adding external resources (like font awesome)?
Do I have to create an entire template (or a part of it) or can I include a CSS file somehow? The documentation mentions a theme option but so far I've found no examples or existing themes to learn from.
A mere link to a project that uses a custom theme or template would already be very helpful. The docfx repo has a docfx.website.themes folder and the default template is also in there I believe, but I couldn't really figure out which files I would have to provide to roll my own.
Export template:
Run docfx template export default, then you'll see default template in _exported_templates\default
Change themes in default template, e.g:
Adding external resource: modify styles\head.tmpl.partial
CSS change: modify styles\docfx.css or styles\main.css
Use customized template:
Run docfx -t _exported_templates\default, which will use your customized template!
NOTE: It is possible that DocFX updates its embedded templates when releasing new version. So please make sure to re-export the template if you overwrite or dependent on that template in your custom template.

What buttons have changed labels from fckeditor to ckeditor 4?

It appears that some of the button names have been changed in ckeditor version 4.
Is there a complete list of these changes?
There is a partial list here.
I'm pretty sure that names haven't been changed. If something is not working check if plugin you need is included in your build (most likely it is a standard preset) and if not:
download a full preset (which in fact does not include all plugins too, but most of them) or
add required plugins to your custom CKEditor build.
[EDIT] another useful resource is the toolbar sample shipped with CKEditor package. E.g. here's one for a standard package.

Resources