I'm new to Prestashop 1.7. There's a css that I need to overwrite. I've written the css codes on custom.css that comes with Prestashop. When I refreshed the site, the custom css did not apply. There was no link rel pointing to the file.
I'd like to ask how I can call the custom.css. There's a stylesheets.tpl but I'm not sure what code to write.
You can add custom CSS & JS in the latest PrestaShop using setMedia() function which is located in the frontController as shown below:
PATH : mainDir/classes/controller/FrontController.php
public function setMedia()
{
$this->registerStylesheet('theme-main', '/assets/css/theme.css', ['media' => 'all', 'priority' => 50]);
$this->registerStylesheet('theme-custom', '/assets/css/custom.css', ['media' => 'all', 'priority' => 1000]);
if ($this->context->language->is_rtl) {
$this->registerStylesheet('theme-rtl', '/assets/css/rtl.css', ['media' => 'all', 'priority' => 900]);
}
$this->registerJavascript('corejs', '/themes/core.js', ['position' => 'bottom', 'priority' => 0]);
$this->registerJavascript('theme-main', '/assets/js/theme.js', ['position' => 'bottom', 'priority' => 50]);
$this->registerJavascript('theme-custom', '/assets/js/custom.js', ['position' => 'bottom', 'priority' => 1000]);
$assets = $this->context->shop->theme->getPageSpecificAssets($this->php_self);
if (!empty($assets)) {
foreach ($assets['css'] as $css) {
$this->registerStylesheet($css['id'], $css['path'], $css);
}
foreach ($assets['js'] as $js) {
$this->registerJavascript($js['id'], $js['path'], $js);
}
}
// Execute Hook FrontController SetMedia
Hook::exec('actionFrontControllerSetMedia', array());
return true;
}
You just have to copy it to assets/css folder of your theme
Related
I've made a custom theme for Drupal 8. Now I want to provide a banner image for the front page. I wouldn't like to create a custom content type Banner, then create a Banner-node and promote it to the front page, because the promoted node-teasers are arranged inside a grid-view in my theme (together with other node-teasers of other content types, such as Article) and when I do it I do not get what I expect. So it is totally not what I would like to do.
So first I decided to provide a custom banner_image field inside my_custom_theme.theme file (by implementing the appropriate hooks):
function my_custom_theme_preprocess_page(&$variables)
{
$variables['banner_image'] = theme_get_setting(‘banner_image’);
}
function my_custom_theme_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state)
{
$form['my_custom_theme_settings']['website'] = array(
'#type' => 'details',
'#title' => t('Website Settings'),
);
$form['my_custom_theme_settings']['website']['banner_image'] = array(
'#type' => 'managed_file',
'#upload_location' => 'public://media/branding/',
'#upload_validators' => array(
'file_validate_extensions' => array('gif png jpg jpeg'),
),
'#default_value' => theme_get_setting('banner_image'),
);
}
And I've got following result (Admin Panel):
It means: uploading a banner image works. However, I think I have done everything to get the image on my front page, without any success (the banner image doesn't show up).
Therefore I overrode the page--front.html.twig file:
<...>
{{ banner_image }}
<...>
No image, no Url, nothing (The image has been correctly uploaded to the appropriate location, the theme has been uninstalled, the cache has been cleared, and the theme has been reinstalled again).
What am I doing wrong? If it's impossible to do it that way, is there a way just to copy the same functionality of logo_image and use it for my banner_image?
1) By defining the banner_image settings in the install\my_theme_settings.yml file:
features:
logo: true
banner: true
2) By initializing a checked checkbox, such as for logo_image:
3) By showing the upload-fields, such as for logo_image, when the checkbox is unchecked:
I could solve it this way:
1) my_custom_theme.theme file:
function my_custom_theme_preprocess_page(&$variables)
{
$variables['banner_image_url'] = theme_get_setting('banner_image_url');
$variables['banner_image'] = my_custom_theme_get_banner_image_content();
}
function my_custom_theme_get_banner_image_content()
{
$bannerImage = theme_get_setting('banner_image_path', 'my_custom_theme');
$path = '';
if (!empty($bannerImage)) {
$file = file_load($bannerImage[0]);
if (!empty($file)) {
$uri = $file->getFileUri();
$path = file_create_url($uri);
}
}
if (empty($path)) {
$path = base_path() . drupal_get_path('theme', 'my_custom_theme') . '/' . theme_get_setting('banner_image_path', 'my_custom_theme');
}
$content = '<img alt="Banner Image" src="' . $path . '"/>';
return $content;
}
function my_custom_theme_form_system_theme_settings_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state)
{
$form['my_custom_theme_settings']['website'] = array(
'#type' => 'details',
'#title' => t('Website Settings'),
);
$form['my_custom_theme_settings']['website']['banner_image_url'] = array(
'#type' => 'textfield',
'#title' => t('Banner Image Url'),
'#default_value' => theme_get_setting('banner_image_url'),
);
$form['my_custom_theme_settings']['website']['banner_image_path'] = array(
'#type' => 'managed_file',
'#title' => t('Banner Image'),
'#default_value' => theme_get_setting('banner_image_path'),
'#upload_location' => 'public://media/branding',
);
}
2) config\install\my_custom_theme.settings.yml:
banner_image_url: '#'
banner_image_path: 'banner-image.jpg'
3) Inside the page.html.twig template:
{% if is_front and banner_image %}
<a href="{{ banner_image_url }}" class="banner-image">
{{ banner_image | raw }}
</a>
{% endif %}
you can make config form in custom module -src -Form -BannerConfigForm.php
$form['banner_image']= [
'#type' => 'managed_file',
'#required' => TRUE,
'#title' => $this->t('banner image'),
'#default_value' => $config->get('banner_image'),
'#upload_validators' => array(
'file_validate_extensions' => array('png gif jpg jpeg'),
),
'#upload_location' => 'public://'
];
and make menu link - module_name.links.menu.yml for add this as link in drupal admin setting
and in dolab.theme you can call it like that
function my_custom_theme_preprocess_page(&$variables)
{
$variables['banner_image_url'] = $file::load($config->get('banner_image')[0])->url();
}
and now you have this var banner_image_url you can use it in
<img src="{{banner_image_url}}" >
i wish that help you
Im new to drupal,I need to render a form so i have to implement hook theme, my confusion is Under which directory I should create hook theme file in drupal 8?
// my_module.module
function custom_module_theme($existing, $type, $theme, $path) {
return array(
'customize_form' => array(
'variables' => array(
'Custom_Form' => NULL
),
'render element' => 'form'
),
);
}
where I have to put above file in drupal 8??
Thanks in advance.
In your .module file
File location - module/custom/MODULENAME/MODULENAME.module
/**
* #file
* Twig template for render content
*/
function MODULENAME_theme($existing, $type, $theme, $path) {
return [
'theme_name_template' => [
'variables' => ['flag' => NULL],
],
];
}
To Use theme function use below code
return ['#theme' => 'theme_name_template', '#flag' => 1];
If i got it right you want the folder to place your module, right? You have to put your module in a folder under
/modules/custom/your_module_folder or /sites/all/modules/your_module_folder
I'm using kartik mpdf extension to print a report. Problem is, in print view css code displaying and in footer debug toolbar code too. Please guide me how to remove that.
i'm using following code.
$content = $this->render('print', ['modelPatientTest' => $modelPatientTest]);
$pdf = new Pdf([
'mode' => Pdf::MODE_CORE, // leaner size using standard fonts
'content' => $content,
'format' => Pdf::FORMAT_A4,
'options' => [
'title' => 'Test Report',
],
'methods' => [
'SetHeader' => [''],
'SetFooter' => ['{PAGENO}|'],
]
]);
return $pdf->render();
As Debug toolbar should be active only in a development environment, put at the top of your controller's action this code:
if(YII_DEBUG === true || YII_ENV === "dev") {
Yii::$app->getModule('debug')->instance->allowedIPs = [];
}
(Edited thanks to #Gubberrr comment below)
Just change
'mode' => Pdf::MODE_CORE,
to
'mode' => Pdf::MODE_UTF8,
I'm using kartik mpdf extension and trying to style the pdf using "cssFile" property.
But any font I want to set (even from Web Safe Fonts or my oun font-face) don't effect the content of pdf file.
Any help?
I thank you should configure cssFile and cssInline in kartik,
For example in PDF controller you have
public function actionPdf()
{
$pdf = new Pdf([
'mode' => Pdf::MODE_CORE,
'format' => Pdf::FORMAT_A4,
'orientation' => Pdf::ORIENT_PORTRAIT,
'destination' => Pdf::DEST_BROWSER,
'content' => $contents,
'filename' => 'Filename',
'cssFile' => '#vendor/kartik-v/yii2-mpdf/assets/kv-mpdf-bootstrap.css',
'cssInline' => '.modal-footer{text-align:left;}div.modal-body{padding:0px;}',
'options' => ['title' => 'Devis'],
'methods' => [
'SetFooter'=>[$footer],
]
]);
Yii::$app->response->format = \yii\web\Response::FORMAT_RAW;
$headers = Yii::$app->response->headers;
$headers->add('Content-Type', 'application/pdf');
return $pdf->render();
}
And you should go to this file in vendor folder to do what you want in css #vendor/kartik-v/yii2-mpdf/assets/kv-mpdf-bootstrap.css
And the required style (for exemple color: #fff !important) you should do that in this ligne 'cssInline' => '.modal-footer{text-align:left;}div.modal-body{padding:0px;}',
he asked how change font-family in pdf file.
Names of basic fonts are located in config_font.php.
You can add custom fonts in this file.
Example
$this->fontdata = array( ... "pompadur" => array( 'R' => "Pompadur.ttf", ), ... )
paste to your html: style="font-family: Pompadur"
How would I go around overriding a theme function with a .tpl file? I know how to override a .tpl file with a theme function but not the other way round. I can't seem to find anywhere that tells me so, so maybe it's not possible or not good practice.
For example if there was a theme function defined in a module called super_results and registered with the theme registry, like the example below, how would I go around overriding it with super_results.tpl.php.
'super_results' => array(
'arguments' => array('title' => NULL, 'results' => NULL, 'votes' => NULL),
),
function modulename_super_results($title, $results,$votes){ output HTML }
The simplest solution would probably be creating a new theming function that uses a template. Something like that should work, disclaimer code is untested.
function my_theme_theme() {
return array(
'overide' => array(
'template' => 'elm-super_results',
'arguments' => array('title' => NULL, 'results' => NULL, 'votes' => NULL),
),
);
}
function my_theme_super_results($title, $results, $votes) {
return theme('overide', $title, $results, $votes);
}