I'm using admin_enqueue_scripts to load my own CSS and JS in the WP-Admin, and I know the JS file is working when logged in, but the CSS file isn't being loaded from what I can see.
I'm checking if logged out, is there any condition that makes this only apply to logged in users? There's nothign to suggest this is the case, and I'm certain my code is right.
Have I missed something here? To me, this should be working, but the style-admin file isn't being loaded on the login page, and there's nothing in the console either.
function sg_assets_admin() {
if(WP_DEBUG === false) {
wp_enqueue_style('sg-style-admin', get_template_directory_uri().'/css/style-admin.min.css');
} else {
wp_enqueue_style('sg-style-admin', get_template_directory_uri().'/css/style-admin.css');
}
wp_enqueue_media();
if(WP_DEBUG === false) {
wp_enqueue_script('sg-script-admin', get_template_directory_uri().'/js/script-admin.min.js');
} else {
wp_enqueue_script('sg-script-admin', get_template_directory_uri().'/js/script-admin.js');
}
}
add_action('admin_enqueue_scripts', 'sg_assets_admin');
It turns out the login page as I am trying to reference doesn't use admin_enqueue_scripts, but login_enqueue_scripts
https://developer.wordpress.org/reference/hooks/login_enqueue_scripts/
function sg_assets_admin() {
if(WP_DEBUG === false) {
wp_enqueue_style('sg-style-admin', get_template_directory_uri().'/css/style-admin.min.css');
} else {
wp_enqueue_style('sg-style-admin', get_template_directory_uri().'/css/style-admin.css');
}
wp_enqueue_media();
if(WP_DEBUG === false) {
wp_enqueue_script('sg-script-admin', get_template_directory_uri().'/js/script-admin.min.js',array('jquery'));
} else {
wp_enqueue_script('sg-script-admin', get_template_directory_uri().'/js/script-admin.js',array('jquery'));
}
}
add_action('admin_enqueue_scripts', 'sg_assets_admin');
Try above modified code
Related
I want to do css on them the problem is they are inside a function and I do not know how I access them.
for example:
updateUser() {
this.usersService.UpdateUser(this.user.id, this.user)
.subscribe(() => {
alert("Password changed! You are taken to the login page")
this.router.navigate(['login']);
},(e)=> {
this.errors = [];
if (e.error.errors.Password) {
this.errors.push(e.error.errors.Password);
}
}
)
}
Here in the function I want to do css on the alert I have:
alert("Password changed! You are taken to the login page")
also confirm:
deleteUser(id:string,user:User){
if(confirm(`Are you sure you want to delete user ${user.userName}`)){
this.usersService.DeleteUser(id)
.subscribe(
() =>{
this.router.navigate(['login']);
}
)
}
}
Here in the function I want to do css on the confirm I have:
if(confirm(`Are you sure you want to delete user ${user.userName}`)){
It's not possible to style an alert() or confirm().
That's an HTML Code
<div style="position:absolute; width: 200xp; height:50px;background-color:white; border-radius:10p;padding:10px;"><button onclick="TheFunctionAfterConfirm()">Confirm</button>
<button onclick="TheFunctionAfterDisagree()">Disagree</button><div>
An alternate way could be to use a library like sweetalert2 (https://sweetalert2.github.io/#examples).
If there are problems, add an import to your main script.
I am making a module that adds new tab in product edit page. The installation is Prestashop 1.6.1.4. The module adds a tab with some input fields that send data to mysql tables, but what I want to do is to style the fields a little bit, so that they look good. I am adding this in my module.php file:
public function install() {
if ($this->psversion() == 5 || $this->psversion() == 6)
{
if (parent::install() == false or !$this->registerHook('displayHeader') or !$this->registerHook('productFooter') or !$this->registerHook('displayAdminProductsExtra') or !$this->registerHook('actionProductUpdate') or !$this->registerHook('displayBackOfficeHeader'))
{
return false;
}
}
return true;
}
Then below this I put this code:
public function hookDisplayBackOfficeHeader($params) {
$this->context->controller->addCSS($this->_path.'views/css/adminsportsnutritionfadd.css');
}
But can't make the .css file appear. The file is in the right location, it has proper permissions and the owner of the file is www-data:www-data so this shouldn't be a permission issue. I have disable css combining in Prestashop as well as caching. Before reloading the page I am also deleting Prestashop's cache just in case, as well as I am deleting my brower's cache. Can somebody give me a hand in this?
Do like this:
public function hookBackOfficeHeader()
{
$this->context->controller->addCSS($this->_path.'views/css/adminsportsnutritionfadd.css');
}
For me it works like this:
$this->context->controller->addCSS($this->_path . 'views/css/back.css');
So the only difference is the css file name.
Not sure if you got this sorted or not, but...
I use this function within most of my modules to add
jQuery, Font-awesome, CSS & JS, then have it show ONLY on that module page...
public function hookDisplayBackOfficeHeader($params)
{
if(!(Tools::getValue('controller') == 'AdminModules'
&& Tools::getValue('configure') == 'MyModuleName')
){
return;
}
else
{
if ( method_exists($this->context->controller, 'addJquery') )
{
$this->context->controller->addJquery();
$this->context->controller->addCss('//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
$this->context->controller->addCss($this->_path.'views/css/back.css');
$this->context->controller->addJs($this->_path.'views/js/back.js');
}
}
}
I'm using Fishpigs Wordpress integration module in a Magento store. When I set it to use a custom Wordpress menu, which I've set up in Wordpress with some category hierarchies, it doesn't add any active states if you've clicked a link and are on an "active" page. After digging about, /app/code/community/Fishpig/Wordpress/Model/Menu/Item.php has the following:
public function isItemActive()
{
return false;
}
So it seems like they've just skipped this bit? Anyone any idea how to set active states here?
OK, this seems to do the job, bit of a workaround but hey!
public function isItemActive()
{
$currurl = Mage::helper('core/url')->getCurrentUrl();
$linkurl = $this->getUrl();
if(strstr($linkurl, $currurl)){
return true;
}
else {
return false;
}
}
Get the current url, get the blog url, if they match set active state to true. I then used a bit of jQuery to set states of parents to active as the above only sets the current link:
$('#nav li.nav-3 ul li.level1.active').parent().parent().addClass("active");
...where li.nav-3 is the parent blog link
Replace the isItemActive function with following code in /app/code/community/Fishpig/Wordpress/Model/Menu/Item.php. This is working for me.
public function isItemActive() {
$myblogUrl = Mage::helper('wordpress/abstract')->getBlogRoute();
$mycurrentUrl = preg_replace('/\?.*/', '', Mage::helper('core/url')->getCurrentUrl());
if (in_array($myblogUrl, explode("/", $mycurrentUrl))) {
return true;
} else {
return false;
}
}
The problem is just a simple miss.. Magento uses a "/" in all urls,$currentUrl never matches $currentUrl because of this. The correction is just to trim the "/" I know a late response, but thought it may help someone.
public function isItemActive()
{
$currentUrl = Mage::getUrl('*/*/*', array('_current' => true, '_use_rewrite' => true));
if (strpos($currentUrl, '?') !== false) {
$currentUrl = substr($currentUrl, 0, strpos($currentUrl, '?'));
}
return $currentUrl === rtrim($this->getUrl(), '/');
}
I'm using meteor-router, and I'd like to redirect a user to /user if he requests / and he is already logged in.
As expected, this just renders the user_index template rather than changing the URL:
Meteor.Router.add
'/': -> if Meteor.userId() then 'user_index' else 'index'
I want to do something like this:
Meteor.Router.add
'/': -> if Meteor.userId() then Meteor.Router.to '/user' else 'index'
update 6/4/14:
This question is no longer relevant, and iron-router should be used instead.
meteor-router is now deprecated. Instead use iron-router which can redirect based on logged in status using:
Router.configure({layoutTemplate: 'mainLayout'});
Router.map(function() {
this.route('splash', {path: '/'});
this.route('home');
});
var mustBeSignedIn = function(pause) {
if (!(Meteor.user() || Meteor.loggingIn())) {
Router.go('splash');
pause();
}
};
var goToDashboard = function(pause) {
if (Meteor.user()) {
Router.go('home');
pause();
}
};
Router.onBeforeAction(mustBeSignedIn, {except: ['splash']});
Router.onBeforeAction(goToDashboard, {only: ['splash']});
Example taken from: Meteor.js - Check logged in status before render
--OR--
Use the accounts-entry package. From their site:
Ensuring signed in users for routes
Use AccountsEntry.signInRequired(this) to require signed in users for
a route. Stick that in your before hook function and it will redirect
to sign in and stop any rendering. Accounts Entry also tracks where
the user was trying to go and will route them back after sign in.
You're looking for a filter -- here is a sample from the docs:
Meteor.Router.filters({
'checkLoggedIn': function(page) {
if (Meteor.loggingIn()) {
return 'loading';
} else if (Meteor.user()) {
return page;
} else {
return 'signin';
}
}
});
// applies to all pages
Meteor.Router.filter('checkLoggedIn');
According to this issue it looks like redirects are not part of meteor-router, and may not be. For now I ended up working around the issue. If the project changes to accommodate redirects I'll update my answer, or someone else can post another answer.
update 1/23/13:
I switched to using mini-pages, which correctly deals with this case and includes a lot of great functionality like layouts.
Meteor Router lets you directly access the response object, so you can just do a 302 redirect. Something like the following will work:
Meteor.Router.add("/test/:_id", (id) ->
this.response.writeHead '302', {'Location': '/blah/' + id}
)
You can do this by using a standard filter and wrapping the redirect in a defer object.
Meteor.Router.filters({
requireLogin: function(page) {
if(! (Meteor.loggingIn()|| Meteor.user()) ){
Meteor.defer(function () {
Meteor.Router.to('/login');
});
}
return page;
}
Meteor.Router.filter('requireLogin', {except: 'login'});
I'm trying to build an admin settings page that will allow users to upload an image for their logo. I'm using this tutorial: http://www.webmaster-source.com/2010/01/08/using-the-wordpress-uploader-in-your-plugin-or-theme/
I've changed it to add the scripts to enqueue rather than print as is now best practice. My code is as follows:
function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('my-upload', get_stylesheet_directory_uri().'/bigg-options.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('my-upload');
}
function my_admin_styles() {
wp_enqueue_style('thickbox');
}
if (isset($_GET['page']) && $_GET['page'] == 'bigg_options') {
add_action('admin_enqueue_scripts', 'my_admin_scripts');
add_action('admin_enqueue_styles', 'my_admin_styles');
}
And the Javascript:
jQuery(document).ready(function() {
jQuery('#upload_image_button').click(function() {
formfield = jQuery('#upload_image').attr('name');
tb_show('', 'media-upload.php?type=image&TB_iframe=true');
return false;
});
window.send_to_editor = function(html) {
imgurl = jQuery('img',html).attr('src');
jQuery('#upload_image').val(imgurl);
tb_remove();
}
});
It works, and the media upload window opens. But instead of it being a thickbox popup in the middle of the screen, as is normal, it appears at the bottom of the page, off to the left and partially obscured. Here's a screen shot of where it goes:
Any ideas on why it is doing this, and how to get it to position properly?
Use &modal=true in your tb_show():
tb_show('', 'media-upload.php?type=image&modal=true');
I believe you'll also need to add in a width and height.