I know, it’s silly, but I really don’t know what to do at this point.
I tried to create a new folder in the frontend and had a structure like this:
themes
test
assets
css
bootstrap.css (i took a css file that contain bootstrap 4.1 and have in it a theme from bootswatch.com)
views
layouts
main.php (i copy it from views folder and added use frontend\themes\test\TestAsset with the change of
AppAsset::register($this); to TestAsset::register($this);)
TestAsset.php (i copied the content from the AppAsset file) In config -> main.php i added
'view' => [
'theme' => [
'pathMap' => [
'#app/views' => '#frontend/themes/test/views'
]
]
]
],
The theme that I wanted from the bootswatch.com was applied (it made some mess in the navbar, img-thumbnail and caption class), but I was thinking I could just edit them to make everything ok. But every change that I tried was not applied, not even the body background-color.
When I needed to add something, I used a class of my own:
$this->registerCssFile(Yii::getAlias(’#web’).’/css/library.css’);
and it worked.
At this point, I don’t know how to edit the css of the yii2 or how to add another one that I could use and personalize.
Related
I am trying to add custom html between <head></head> Doing a hook or something rather than install a module.
But i cant figure how to doit.
I am using bartik and i make this function
function bartik_add_text_to_header(&$vars, $hook) {//}
but i cant figure how or which function to used.
I try with
drupal_set_html_head('style type="text/css">#import url(' . $GLOBALS[base_url] . '/modules/codefilter/codefilter.css);</style>');
But the drupal_set_html_head looks that is not existing in drupal 8 or 9
You should be using a custom theme with bartik as it's base theme rather than the bartik theme itself.
Just make the minimum file for a theme and set the bartik theme as it's base theme.
You can put whatever you want in the head section by overriding the template file that is currently being used to output that part of the html. For Bartik it is a file named html.html.twig in the core/themes/bartik/templates/classy/layout folder.
You would make a copy this file and put it into your custom themes templates folder so your file is used instead of the original.
To easily find what file is currently being used, you can enable twig debugging so comments are output in your html that show exactly what template files are being used.
Having said all that, and seeing as you are only looking to add css, you probably want to check out this page on Adding stylesheets (CSS) and JavaScript (JS) to a Drupal theme which will show you the different options you have to add js and css.
If you are just after a quick answer.... the function you want may be:
function fluffiness_preprocess_page(&$variables) {
$variables['#attached']['library'][] = 'fluffiness/global-styling';
}
I'm currently building a Django Forums web application and I'm using CKEditor to allow users post rich text content on my website.
I have a Topic model and a Django custom TopicForm that looks like this:
class TopicForm(ModelForm):
class Meta:
model = Topic
exclude = ['creator', 'category', 'pinned']
widgets = {
'title': TextInput(attrs={
'class': "form-control",
'style': 'max-width: 300px;',
'placeholder': 'Name'
}),
}
labels = {
'title': 'Title',
# 'content': 'Content',
}
On the website, my form looks like this:
I saw that I'm able to stylize my inputs very easy (not as easy as in HTML raw forms but still works). The problem is, I'm not able to properly stylize my CKEditor.
I'm using two Bootstrap css files: one for the dark theme and one for the light theme. They are imported based on a session variable (the user chooses the preferred theme).
What I want to do is to assign the Bootstrap class form-control to the CKEditor, so it can be either dark/light, depending on the user's active theme.
Unfortunately, I didn't find any ways to do this, neither on Stack or on other sources.
Do you have any idea on how I can implement this?
I am creating a custom WordPress Gutenberg block and I want to use image assets (PNGs, JPGs) from my plugin folder, to be shown in both the Gutenberg editor and on the rendered page.
I am using Webpack to bundle my files for JS and SCSS. I tried adding the webpack image loader, which saves images into an 'assets' folder in my main plugin directory.
However, when I try to use my image assets from my Block's main JS file, I cannot find a way to access the full URL path of my images as running on my WordPress server, currently running in a docker container on localhost.
My hope was to find a WordPress method to return the path of my plugin directory, and use that to point to the image assets regardless of how they are bundled, but I have not been able to find a solution in the documentation.
It's possible to get the plugin directory using PHP using WordPress' built-in function:
function _get_plugin_directory() {
return __DIR__;
}
This seems like it could help, however I do not know if it's possible to pass the returned plugin path into my JS file.
My plugin structure looks like this:
/assets // generated by Webpack
- image.png
- main.js
/blocks
/block-example
- image.png // <-- My image asset
- index.js // <-- I want to use image.png here
- index.js // loads in my block
blocks.php
The index.js file is where I want to show the image, using the standard WordPress edit and save functions:
import image from './image.png';
edit: props => {
...
<img src={image} />
}
In the WordPress Gutenberg editor, images point to just the image file name (./image.png or assets/image.png etc), instead of the full path of the image where it sits inside the plugin directory (ie localhost:8080/plugins/my-blocks/assets/image.png) which results in the image not being found.
I'm still looking into whether there's an official Gutenberg way to do this, but for now I've got this working in my plugin with wp_localize_script.
This works to pass data from PHP into enqueued Javascript so that data usually only accessible in PHP is accessible in Javascript as well.
So (likely inside blocks.php from your example), you would have something like:
wp_enqueue_script(
'my-main-script',
plugins_url( 'assets/main.js', __FILE__ ),
array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor', 'wp-components' ),
'20190804',
true
);
You can then enqueue any values you want to pass into your JS:
wp_localize_script(
'my-main-script',
'js_data',
array(
'my_image_url' => plugins_url( 'blocks/block-example/image.png', __FILE__ )
)
);
This will ensure that the image path is accessible to javascript. Then from within your block itself, you can reference it:
<img src={js_data.my_image_url} />
You should now see your static image asset rendered within your block.
Popping this in here for anyone that land here:
You can directly import images into react apps using webpack.
So assuming you're using some kind of webpack configuration (#wordpress/scripts, create-guten-block, or your own custom setup), you would simply import your image into the block file like so, assuming your image is in the same folder as the file you're importing into:
import image1 from "./image1.jpg"
And then use it like a URL wherever you need:
<img src={image1} alt="my image" />
You can also acheive the same thing using the newer wp_add_inline_script function.
From the WordPress docs
Though localization is the primary use, it (wp_localize_script) was often used to pass generic data from PHP to JavaScript, because it was originally the only official way to do that. wp_add_inline_script() was introduced in WordPress Version 4.5, and is now the best practice for that use case. wp_localize_script() should only be used when you actually want to localize strings.
Here's the code I used to pass an image url into a custom Gutenberg block using wp_add_inline_script. The below code was placed inside blocks.php as per the example.
In wp_enqueue_script code sample, _get_plugin_url() is my own custom function to retrieve the path for my plugin.
wp_enqueue_script(
'my-main-script',
_get_plugin_url() . $block_path,
[],
filemtime( _get_plugin_directory() . $block_path )
);
I set up an array for the data I wished to pass in, eg
$js_data = array(
'image_url' => _get_plugin_url() . '/assets/images/BACK.png',
);
Then used the wp_add_inline_script function
wp_add_inline_script(
'my-main-script',
'var jsData = ' . wp_json_encode( $js_data ),
'before'
);
Inside the /block-example/index.js file which registers the block and defines its behaviour, I can access that variable like:
jsData.image_url
How to use functions.php to add all the .css to child themes at one time?
If it is not possible at once, how is right way to do it one by one?
Theme: Generatepress
https://sk.wordpress.org/themes/generatepress/
Child: Hand made by Codex
https://codex.wordpress.org/Child_Themes
Adding one CSS file isn't recommended, it's better if you register each new custom CSS individually.
Keep in mind, a child theme will automatically inherit all of the parent's CSS. You should only register CSS files you custom wrote.
This is an example function of loading a CSS file located in the CSS directory within the child theme. It loads a custom file 'CustomFooter.css' on a page with an ID of 45.
add_action( 'template_redirect', 'footer_css' );
function footer_css() {
if (is_page(45)) {
wp_enqueue_style('CustomFooter-style',
get_stylesheet_directory_uri() .
'/CSS/CustomFooter.css?v=1.1', array( 'parent-style'));
}
}
Does anyone have experience with Gantry Framework?
I am wondering if it is possible to create a child theme based off of the default? Where would I put my css file and can I build off of the current css instead of starting from scratch while still separating my css from the default theme?
Apart from the usual process of creating a WordPress child theme (create a directory, with proper style.css and functions.php), Gantry requires a specific procedure.
You'll need to copy two files from the parent directory to the child theme directory, keeping the structure:
/gantry/theme.yaml
and
/includes/theme.php
Then, edit the copied theme.yaml: the parent must be your parent theme directory name.
On the theme.php, select all text and replace with this:
// Initialize theme stream.
$gantry['platform']->set(
'streams.gantry-theme.prefixes',
array('' => array(
"gantry-themes://{$gantry['theme.name']}/custom",
"gantry-themes://{$gantry['theme.name']}",
"gantry-themes://{$gantry['theme.name']}/common",
"gantry-themes://{$gantry['theme.parent']}",
"gantry-themes://{$gantry['theme.parent']}/common"
))
);
As for css, you must create this file, within your child theme directory:
/custom/scss/custom.scss
It can be formatted in either SCSS or CSS, and will override the theme's core style sheet files.
Creating a Child Theme is very easy.
All you need to do is create a directory in your theme directory, and name it something like "Gantry-child". Inside that folder, add a file called "style.css". Once this is done, you just need to add the Theme Information that tells Wordpress the Child Theme's Name, Author, and Parent Theme.
Inside the new style.css, add:
/*
Theme Name: Gantry Child
Template: rt_gantry_wp
*/
The most important part that lets Wordpress know that this is a child of the Gantry Theme is the "Template" section. This is the name of the PARENT directory in your Themes folder.
What this will do is create a new theme that inherits all of the parent theme's functions. If you also want to inherit the existing parent theme stylesheet, add to style.css:
#import url("../rt_gantry_wp/style.css");
Hopefully this should get you started. Once that's done, you can add your own header, footer, index, functions, or anything else you can think of to extend the parent theme's functionality.
Hopefully this helps get you started.