Magento Add External CSS in local.xml - css

I have the following file
url/var/www/html/app/design/frontend/default/default/template/productslider/widget/slider.phtml
That should use the css located in
url/var/www/html/skin/frontend/boilerplate/default/productslider/css/less-compiled.css
url/var/www/html/skin/frontend/boilerplate/default/productslider/css/sass-compiled.css
There is a way to add my external .css through local.xml ?
I tried with
<reference name="head">
<action method="addLinkRel">
<rel>stylesheet</rel>
<href>http://cerrajerianecochea.com.ar//var/www/html/app/design/frontend/default/default/template/productslider/widget/css/sass-compiled.css</href>
</action>
</reference>
<reference name="head">
<action method="addLinkRel2">
<rel>stylesheet</rel>
<href>http://cerrajerianecochea.com.ar//var/www/html/app/design/frontend/default/default/template/productslider/widget/css/less-compiled.css</href>
</action>
</reference>

Solved
<link rel="stylesheet" href="<?php echo $this->getSkinUrl(); ?>css/yourCssfile.css" type="text/css" />

Try adding them as text in the head section instead, like this;
<reference name="head">
<block type="core/text" name="uniquename">
<action method="setText"><text><![CDATA[<link href="http://cerrajerianecochea.com.ar//var/www/html/app/design/frontend/default/default/template/productslider/widget/css/sass-compiled.css" rel="stylesheet" type="text/css"/>]]></text></action>
</block>
If these will load on a secure and non secure page, ommit the http: from the link

Related

Messages are not displayed properly after customizing Alfresco share

I want to add the action "document-edit-properties" in the folder details page. So in share-config-custom.xml I have added the action id in the actionGroup(for id =folder-details) as below. Now the action is visible in the folder details page, but the title and the "All properties" are not displayed properly in the popup.
<actionGroup id="folder-details">
<action index="100" id="folder-download"/>
<action index="105" id="document-edit-metadata" icon="folder-edit-metadata" label="actions.folder.edit-metadata" />
<action index="115" id="document-edit-properties" icon="folder-edit-properties" label="actions.folder.edit-metadata" />
<action index="110" id="document-approve" icon="folder-approve" />
<action index="120" id="document-reject" icon="folder-reject" />
<action index="130" id="document-copy-to" icon="folder-copy-to" label="actions.folder.copy-to" />
<action index="140" id="document-move-to" icon="folder-move-to" label="actions.folder.move-to" />
<action index="150" id="folder-manage-rules" />
<action index="160" id="document-delete" icon="folder-delete" label="actions.folder.delete" />
<action index="170" id="document-manage-granular-permissions" icon="folder-manage-permissions" label="actions.folder.manage-permissions" />
<action index="180" id="document-manage-repo-permissions" icon="folder-manage-permissions" label="actions.folder.manage-permissions" />
<action index="190" id="document-manage-aspects" label="actions.folder.manage-aspects" />
<action index="200" id="document-change-type" label="actions.folder.change-type" />
<action index="210" id="view-in-explorer" />
<action index="220" id="document-view-in-source-repository" label="actions.folder.view-source-repository" />
<action index="350" id="document-view-googlemaps" />
<action index="360" id="document-cloud-sync" />
<action index="370" id="document-cloud-unsync" />
<action index="380" id="document-view-in-cloud" />
<action index="390" id="document-request-sync"/>
</actionGroup>
Am unable to figure out why message is not proper. In folder browse page the messages are displayed properly.
Alfresco Version : 4.2.6
Can someone please help... Thanks in advance!
Make sure that you add a bean for your message properties and that you specify the properties and labels you need in Share. See http://docs.alfresco.com/4.2/concepts/kb-preset-internationalization.html for details.
Also, see the answer (at the bottom) of a question about some of this here https://community.alfresco.com/thread/199192-content-model-localization-in-share
So, the fix is what I suggest above. Add a bean to a context file like this
<!-- Add module specific messages and labels -->
<bean id="org.alfresco.share-amp.resources"
class="org.springframework.extensions.surf.util.ResourceBundleBootstrapComponent">
<property name="resourceBundles">
<list>
<value>alfresco.web-extension.messages.share-amp</value>
</list>
</property>
</bean>
That bean references a properties file in web-extension/messages named share-amp.properties. It should have the following content.
## Edit Details Dialog
edit-details.title=Edit Properties: {0}
edit-details.label.edit-metadata=All Properties...
Why do you need to do this? If you look at onActionDetails in actions.js, you'll see that it's trying to resolve those and is not able to. I'm not sure why as I haven't done a lot of YUI/share customization, but what I suggest here will fix it for you.

Rewrite rules for angular and ASP.NET MVC

I'm following this article (the bottom section about using the URL Rewrite). My IIS Express (launched from VS) config file seems to be located C:\Users[usernamehere]\documents\IISexpress\applicationhost.config.
I place the rewrite rule inside the <system.webServer> tag like that article (and a lot of other articles I've read) say to. So it looks like:
<system.webServer>
<rewrite>
<rules>
<rule name="angularjs routes"
stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}"
matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}"
matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}"
pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
... all the other crap that was already there
</system.webServer>
In my VS project I have index.htm off the root and my test views under a Views folder. This is the index.htm and it works when I click the link just fine.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<head>
<base href="/">
<title></title>
<meta charset="utf-8" />
</head>
<body ng-app="myApp">
<p>Main</p>
Red
Green
Blue
<!-- below is where the partial pages will replace -->
<div ng-view></div>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when("/red", {
templateUrl: "Views/red.htm",
controller: "redController"
})
.when("/green", {
templateUrl: "Views/green.htm",
controller: "greenController"
})
.when("/blue", {
templateUrl: "Views/blue.htm",
controller: "blueController"
});
$locationProvider.html5Mode(true);
});
app.controller("redController", function($scope){
//alert("Red");
});
app.controller("blueController", function ($scope) {
//alert("Blue");
});
app.controller("greenController", function ($scope) {
//alert("Green");
});
</script>
</body>
</html>
The problem comes when I try to type in one of those pages direction: ie. http://localhost:60553/red
I get a 404. Which tells me that rewrite rule isn't being hit and doing it's job. Why am I getting a 404 even with that rewrite rule?
I am guessing this is because your Views folder has a web.config that explicitly blocks request to it. That is placed there by default in MVC projects for security reasons.
Note the following code in Views/Web.Config
<system.webServer>
<handlers>
<remove name="BlockViewHandler"/>
<add name="BlockViewHandler" path="*" verb="*" preCondition="integratedMode" type="System.Web.HttpNotFoundHandler" />
</handlers>
</system.webServer>
If you comment this out, your code should work.
However, I would advise moving your angular views to a different folder that isn't sort of a de-facto reserved folder for MVC. Change to something like ngView and this code will work. It will be cleaner and clearer that way, and you don't run the risk of exposing your razor code to snooping users.
UPDATE
The above is not the issue, per comments. The issue is that the rewrite rules were not being used from the file mentioned. Move them to web.config if possible - that will avoid setting up global rules that will apply to all iis express apps anyway.

How get the angular.js files on IIS 7.5 for angular full-stack deployed

--UPDATE
now Im getting this error but the rewrites looks like its working but it reads js files like html or some sort of issue like it
I want to create the right re-write rules for web.config on IIS 7.5 for angular full-stack application deploy
This is my WEB.CONFIG I'm Using this one but I cant config the the virtual path
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
</handlers>
<iisnode node_env="PRODUCTION"
nodeProcessCountPerApplication="1"
maxConcurrentRequestsPerProcess="1024"
maxNamedPipeConnectionRetry="100"
namedPipeConnectionRetryDelay="250"
maxNamedPipeConnectionPoolSize="512"
maxNamedPipePooledConnectionAge="30000"
asyncCompletionThreadCount="0"
initialRequestBufferSize="4096"
maxRequestBufferSize="65536"
uncFileChangesPollingInterval="5000"
gracefulShutdownTimeout="60000"
loggingEnabled="true"
logDirectory="iisnode"
debuggingEnabled="true"
debugHeaderEnabled="false"
debuggerPortRange="5058-6058"
debuggerPathSegment="debug"
maxLogFileSizeInKB="128"
maxTotalLogFileSizeInKB="1024"
maxLogFiles="20"
devErrorsEnabled="true"
flushResponse="false"
enableXFF="false"
promoteServerVars=""
configOverrides="iisnode.yml"
watchedFiles="web.config;*.js" />
<rewrite>
<rules>
<!-- Don't interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.js\/debug[\/]?"/>
</rule>
<!-- serve static files from /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public/{R:0}" logRewrittenUrl="true"/>
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
</conditions>
<match url="public/*"/>
</rule>
<!-- All other URLs are mapped to the Node.js application entry point -->
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server.js"/>
</rule>
<rule name="SocketIO" patternSyntax="ECMAScript">
<match url="socket.io.+"/>
<action type="Rewrite" url="server.js"/>
</rule>
</rules>
</rewrite>
<!-- <appSettings>
<add key="virtualDirPath" value="/idetikmssql"/>
</appSettings> -->
</system.webServer>
THIS IS MY server.js
"use strict";
var express = require('express'),
stylus = require('stylus'),
logger = require('morgan'),
bodyParser = require('body-parser');
// determind what mode we are
var env = process.env.NODE_ENV = process.env.NODE_ENV||'developemnt';
var virtualDirPath = process.env.virtualDirPath || '';
var app = express();
//configure the view engine
function compile(str, path) {
return stylus(str).set('filename', path);
}
app.set('views', __dirname + '/server/views/');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use(stylus.middleware(
{
src: __dirname + 'public',
compile: compile
}
));
app.use(bodyParser());
var appPath = app.get('appPath')
app.use('/bower_components', express.static(appPath + "/bower_components/"));
app.use('/app/', express.static(appPath + "/app/"));
app.use('/assets', express.static(appPath + "/assets/"));
app.use(express.static(__dirname + '/public'));
app.get('/partials/:partialsPath', function (req, res) {
debugger;
res.render('partials/' + req.params.partialsPath);
});
//the asterisk handles all routes includes javascript, css, html request...
app.get('*', function (req , res) {
res.render('index');
});
// app.get(virtualDirPath + '/', function(req, res) {
// res.render('index', { virtualDirPath: virtualDirPath });
// })
var PORT = 3030;
app.listen((process.env.PORT!==undefined)?process.env.PORT:PORT);
console.log('Listening to PORT : ' + process.env.PORT );
console.log(__dirname);
THIS IS MY INDEX.HTML
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<!-- <base href="/"> -->
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body ng-app="idetikApp">
<div ng-view=""></div>
</body>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="bower_components/angular-resource/angular-resource.js"></script>
</html>
I add my file structure inside IIS
--ONE OF MY SOLUTIONS
I tried to install an express application from scratch and it works all I have to do is change the port number for process.env.PORT and its running but the full-stack still no able to make it work yet I still need help
HERE MY APP WORKS FINE ON IIS
OK Folks after a week of digging it I finally made it work, the following its the right configuration for IIS 7.5 remember your /partials folder must be in the client /public folder for the express routing to work properly.
Here is a Link To the GIT-HUB PROJECT
link : https://github.com/cesarvega/MEAN-IIS7.5-Stack
Here its my web.config
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.webServer>
<handlers>
<add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
</handlers>
<iisnode node_env="PRODUCTION"
nodeProcessCountPerApplication="1"
maxConcurrentRequestsPerProcess="1024"
maxNamedPipeConnectionRetry="100"
namedPipeConnectionRetryDelay="250"
maxNamedPipeConnectionPoolSize="512"
maxNamedPipePooledConnectionAge="30000"
asyncCompletionThreadCount="0"
initialRequestBufferSize="4096"
maxRequestBufferSize="65536"
uncFileChangesPollingInterval="5000"
gracefulShutdownTimeout="60000"
loggingEnabled="true"
logDirectory="iisnode"
debuggingEnabled="true"
debugHeaderEnabled="false"
debuggerPortRange="5058-6058"
debuggerPathSegment="debug"
maxLogFileSizeInKB="128"
maxTotalLogFileSizeInKB="1024"
maxLogFiles="20"
devErrorsEnabled="true"
flushResponse="false"
enableXFF="false"
promoteServerVars=""
configOverrides="iisnode.yml"
watchedFiles="web.config;*.js" />
<rewrite>
<rules>
<!-- Don't interfere with requests for node-inspector debugging -->
<rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
<match url="^server.js\/debug[\/]?"/>
</rule>
<!-- serve static files from /public folder -->
<rule name="StaticContent">
<action type="Rewrite" url="public/{R:0}" logRewrittenUrl="true"/>
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true"/>
</conditions>
<match url=".*" />
</rule>
<rule name="DynamicContent">
<conditions>
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
</conditions>
<action type="Rewrite" url="server.js"/>
</rule>
<rule name="SocketIO" patternSyntax="ECMAScript">
<match url="socket.io.+"/>
<action type="Rewrite" url="server.js"/>
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
The Server.js file
"use strict";
var express = require('express'),
stylus = require('stylus'),
logger = require('morgan'),
bodyParser = require('body-parser');
var env = process.env.NODE_ENV = process.env.NODE_ENV||'developemnt';
var app = express();
//configure the view engine
function compile(str, path) {
return stylus(str).set('filename', path);
}
app.set('views', __dirname + '/server/views/');
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
app.use(stylus.middleware(
{
src: __dirname + 'public',
compile: compile
}
));
app.use(bodyParser());
app.use(express.static(__dirname + '/public'));
app.get('/partials/:partialsPath', function (req, res) {
res.render('/node/idetikmssql/partials/' + req.params.partialsPath);
});
app.get('*', function (req , res) {
res.render('index');
});
var PORT = 3030;
app.listen((process.env.PORT!==undefined)?process.env.PORT:PORT);
console.log('Listening to PORT : ' + process.env.PORT );
console.log(__dirname);
The index.html
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
<!-- <base href="/node/idetikmssql/"> -->
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
</head>
<body ng-app="idetikApp">
<div ng-view=""></div>
</body>
<script type="text/javascript" src="bower_components/angular/angular.js"></script>
<script type="text/javascript" src="bower_components/angular-route/angular-route.js"></script>
<script type="text/javascript" src="bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</html>
The app.js inside public
angular.module('idetikApp', [ 'ngResource', 'ngRoute']);
angular.module('idetikApp').config(function ($routeProvider, $locationProvider) {
//$locationProvider.html5Mode(true);
$routeProvider.when('/', {templateUrl: 'public/partials/main.html', controller:'mainctrl'})
});
angular.module('idetikApp').controller('mainctrl', function ($scope) {
$scope.mayvar = "Hello from client Node JS "
})
YThe main.html
<h1>this is a partial</h1>
<h2>{{mayvar}}</h2>
and finally the file structure for the file paths and server IIS configuration
SERVER CONFIGURATION

Custom css added to page.xml in Magento is not loading

I have a custom css.I have placed it in the theme that we are using - skin\frontend\my-theme\default\css\custom.css
Now I have called this file in page.xml - app/design/frontend/my-theme/default/layout/page.xml
Syntax:
<layout version="0.1.0">
<default translate="label" module="page">
<block type="page/html_head" name="head" as="head">
<action method="addCss"><stylesheet>css/custom.css</stylesheet></action>
</block>
</default>
</layout>
When I check view source, I don't see my custom.css.
Can you tell me what is wrong and how I get get to work custom.css?
You should try :
<?xml version="1.0" encoding="UTF-8"?>
<layout>
<default>
<reference name="head">
<!-- /skin/frontend/yourpackage/yourtheme/css/custom.css -->
<action method="addItem"><type>skin_css</type><name>css/custom.css</name><params/></action>
</reference>
</default>
</layout>
Or :
<?xml version="1.0" encoding="UTF-8"?>
<layout>
<default>
<reference name="head">
<!-- /skin/frontend/yourpackage/yourtheme/css/custom.css -->
<action method="addCss"><stylesheet>css/custom.css</stylesheet></action>
</reference>
</default>
</layout>
When you want to insert something in an existing bloc, you have to use "reference" tag. Put the block name in the "name" attribute.
You can now add everything you want to your existing block (like childs, css, templates...).

Best way to insert a css reference for a single page in Magento

Have had no luck trying to add a reference to a custom.css file to the customer dashboard page in Magento. It makes me want to shoot Magento in the eye, Navy SEAL style.
According to the docs, either of the following inserted into customer.xml in should work:
<reference name="customer_account_dashboard">
<action method="addCss"><link>dashboardfix.css</link></action>
</reference>
<reference name="customer_account_dashboard">
<action method="addCss"><stylesheet>css/dashboardfix.css</stylesheet></action>
</reference>
When inserted before this block:
<reference name="my.account.wrapper">
<block type="customer/account_dashboard" name="customer_account_dashboard" template="customer/account/dashboard.phtml">
<block type="customer/account_dashboard_hello" name="customer_account_dashboard_hello" as="hello" template="customer/account/dashboard/hello.phtml"/>
<block type="core/template" name="customer_account_dashboard_top" as="top" />
<block type="customer/account_dashboard_info" name="customer_account_dashboard_info" as="info" template="customer/account/dashboard/info.phtml"/>
<block type="customer/account_dashboard_newsletter" name="customer_account_dashboard_newsletter" as="newsletter" template="customer/account/dashboard/newsletter.phtml"/>
<block type="clientname/account_dashboard_address" name="customer_account_dashboard_address" as="address" template="customer/account/dashboard/address.phtml"/>
</block>
</reference>
It fails silently (no errors, its as if it wasn't processed at all)
When inserted after the block, I get an "Invalid method Mage_Customer_Block_Account_Dashboard::addCss(Array ( [0] => css/dashboardfix.css )) error
dashboardfix.css is in the skinname/css folder with my other assets.
Any ideas?
There was a minor syntax error in your code - see corrected code below.
Also, for this to work you need macguffin.css file to be placed in the same css folder as your styles.css (or boxes.css), i.e. the css folder of your theme.
You may also want to turn off caching and merging of css files to make sure this is working correctly.
Here is how you should have the complete block:
<!--
Customer account pages, rendered for all tabs in dashboard
-->
<customer_account translate="label">
<label>Customer My Account (All Pages)</label>
<!-- Mage_Customer -->
<reference name="head">
<action method="addCss"><stylesheet>css/macguffin.css</stylesheet></action>
</reference>
<reference name="root">
<action method="setTemplate"><template>page/2columns-left.phtml</template></action>
</reference>
<reference name="content">
<block type="page/html_wrapper" name="my.account.wrapper" translate="label">
<label>My Account Wrapper</label>
<action method="setElementClass"><value>my-account</value></action>
</block>
</reference>
<reference name="left">
<block type="customer/account_navigation" name="customer_account_navigation" before="-" template="customer/account/navigation.phtml">
<action method="addLink" translate="label" module="customer"><name>account</name><path>customer/account/</path><label>Account Dashboard</label></action>
<action method="addLink" translate="label" module="customer"><name>account_edit</name><path>customer/account/edit/</path><label>Account Information</label></action>
<action method="addLink" translate="label" module="customer"><name>address_book</name><path>customer/address/</path><label>Address Book</label></action>
</block>
<remove name="tags_popular"/>
</reference>
</customer_account>
Just remember, so long as your css file is called macguffin.css it will all work out just fine.

Resources