In Alfresco share 4.2 enterprise, I want to just replace the default logo from alfresco share login page. Below blog shows how to create a custom login screen.
http://blogs.alfresco.com/wp/developer/2011/11/03/advanced-share-customization-part-2/
However I do not want to create a complete new login page, just want to replace the logo with the same default theme. Could some one suggest how to replace the logo using extensions option.
There are a few methods in which you may replace the default logo, but since you've asked about the extensions option, here's how you would do this...
0) Assume we are creating an AMP, but you can also do steps 1 & 2 in the extensionRoot directory (/tomcat/shared/ - assuming you are using Tomcat)
1) Create a new module extension XML login-extensions.xml under /alfresco/web-extension/site-data/extensions and add the following XML
<extension>
<modules>
<module>
<id>Login Customization Extension Example</id>
<auto-deploy>true</auto-deploy>
<customizations>
<customization>
<targetPackageRoot>org.alfresco</targetPackageRoot>
<sourcePackageRoot>example.login.customizations</sourcePackageRoot>
</customization>
</customizations>
</module>
</modules>
</extension>
2) Next create a response template resources.get.html.ftl at
/alfresco/web-extension/site-webscripts/example/login/customizations/components/head and add the following Freemarker
<#markup id="example-login-resources" action="after" target="resources">
<link rel="stylesheet" type="text/css" href="${url.context}/res/example/login/customizations/components/head/resources.css" ></link>
</#markup>
In the FTL above, I'm linking to a CSS resource file, you could alternatively just add inline-style css between the #markup tags, but for best practices, assume the CSS is a just a resource file and so...
3) Create a resources.css file located at /META-INF/example/login/customizations/components/head (or alternatively, this is not recommended, but in the exploded Share.war directory, create the file at path /example/login/customizations/components/head) and apply the proper css to change the logo...
The CSS that you want to override:
.theme-company-logo {
background: url("images/logo.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height: 48px;
width: 428px;
}
Make sure you set the height to match the height of your custom logo.
Related
I have created a custom Magento 2 theme called 'gvtheme'.
The folder layout for the css is: frontend->Magento->gvtheme->web->css->source->style.css
In style.css I have put body: background-color: red; just to test if it is working. When I inspect the body tag in chrome it is not showing up, not even as an overridden style.
In Content/Design/Configuration in the Magento 2 backend it's showing that the 'Default Store View' and the other two views have 'gvtheme' as their theme. It was previously showing as 'Luma'.
On the frontend of the site it is no longer showing the 'Luma' logo and style. I have flushed all the caches including 'Flush Javascript/CSS Cache'.
Does anyone have any ideas why this might not be working?
Any help would be greatly appreciated!
Turns out I needed to add 'custom-theme'->'Magento_Theme'->'layout'->'default_head_blocks.xml'. In that file I needed to add:
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<css src="css/source/style.css" />
</head>
We have followed the guide provided by WSO2 to get access to the CSS / JSP pages.
Our aim is to re-theme / rebrand / restyle the login page. We have found that the login page is part of the jar: WSO2\repository\components\plugins\org.wso2.carbon.identity.sso.saml.ui_4.0.3.jar
The login page is called login_ajaxprocessor.jsp
The guide mentioned above states the following about JSP's ending with _ajaxprocessor.
By default when create a jsp file ( say “foo.jsp”) in a Carbon UI
component, it will inherit header, left menu and footer from the
Carbon core UI. But if the file name is “foo_ajaxprocessor.jsp”, there
will be no inheritance.
For an example let's consider, “login_ajaxprocessor.jsp” in
“org.wso2.carbon.identity.saml.sso.ui” component. It simply omit the
header, left menu and footer and display only the content from this
file. So we are able to customize this page in to a different look and
feel.
Were were successful in modifying the language (buttons, etc) in the JSP files. This Jar also contains a CSS file in: \web\sso-saml\css\main.css
We have modified this CSS file to my own style. However, when the page gets loaded, it seems the default WSO2 main.css file is read.
When looking at the default way in which the JSP page refers to the CSS, it says:
<link media="all" type="text/css" rel="stylesheet" href="carbon/sso-saml/css/main.css"/>
We would expect that the /sso-saml/ part wordt select our own modified CSS file.
Is it possible to configure that for this page only, our modified CSS file will be used? We want to prevent to have to change the default main.css. Also, it is because we want to use specific images, that we want to store in jar\web\sso-saml\images
Yes you can use your custom style pages and apply them. Please refer [1] [2] for more info. This will guide you on your task.
Hope this will help you.
[1] http://wso2.com/library/knowledge-base/2010/11/customize-ui-theming-wso2-carbon-based-products
[2] http://wso2.com/library/knowledge-base/2011/11/playing-around-carbon-product-themes
The login.jsp can be found in following jar.
/repository/components/plugins/org.wso2.carbon.ui_4.0.5.jar => /repository/components/plugins/login.jsp
and css => /repository/components/plugins
How do I add an icon to my Tridion 2011 GUI Extension context-menu item?
Is it in the theme or GUI Extension config?
Is the size 16px?
Yes the icon is 16 x 16.
I've always done it using CSS, I hope this explanation makes sense:
1) In your editor.config, you specify the css file and other resources you need
<cfg:groups>
<cfg:group name="PowerTools.Resources.Base" merge="always">
<cfg:fileset>
<cfg:file type="style">/PowerTools/Client/Shared/Theme/styles.css</cfg:file>
2) When you configure the context menu, you have the ID attribute in the ContextMenuItem (shown below as PT_PagePublisher)
<ext:contextmenus>
<ext:add>
<ext:extension name="PowerToolsContextMenu" assignid="PowerToolsContextMenu" insertbefore="cm_refresh">
<ext:menudeclaration externaldefinition="">
<cmenu:ContextMenuItem id="PowerToolsMenuGroup" name="Power Tools">
<cmenu:ContextMenuItem id="PT_PagePublisher" name="Page Publisher" command="PT_PagePublisher"/>
3) In your CSS file you'll have something like:
.PT_PagePublisher .image {background-image:url({ThemePath}/Icons/pagepublisher_16.png);}
See how the name of the CSS class (PT_PagePublisher) maps to the ID in the ContextMenuItem node.
I hope this helps!
You use the theme CSS. I have the following in the CSS for an extension in my dev image:
.tridion .contextmenu #TweetThis .image
{
background-image:url({ThemePath}/images/icons/twitter-icon16x16.png);
}
TweetThis is my context menu item id, as deifined in the extension config.
In case you want to reuse an image of the current CME (Content Manager Explorer) you can use the following:
#PT_PagePublisher.item .image
{
background-image: url({ThemePath['CME']}/Sprites/cme_5_v6.1.0.55920.0_.png);
background-position: 0px -480px;
height: 16px;
width: 16px;
}
This example shows the publish icon from a 2011 SP1 install. So you can use {ThemePath['EditorName']} to access the theme path of any editor which is configured actually.
Also in some cases I have found that my images would not load on either the ribbon toolbar or the context menu, that appeared to be an authorization issue on the editors virtual directory in IIS.
I solved it by adding a Web.config file to my Theme (root) directory which will allow access to all users for the theme files (css and images).
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.web>
<!-- allow all users access to theme files -->
<authorization>
<allow users="?" />
</authorization>
</system.web>
</configuration>
Am running asp.net web application.I need to modify the appearance of my web page..I want to bring a table that contains some labels and textbox to the centre of the page..I changed the align to centre..it is not working...i changed the padding pixels which is in default...it is also not working out...i feel CSS in not applying..can anyone help me to slve this..
you can use margin to bring it to center
Check that the CSS file path you are provided in page is right.
for example :
<link href="css/site.css" rel="stylesheet" type="text/css" />
the above line should be inside head tag
here "css" folder is inside project root directory, and site.css is inside that "css" folder
so check the path of css file
Check the path which the browser attempts to resolve in e.g. firebug or fiddler, and check the status and content of the response. A common scenario is that you haven't granted permission or authorised access to the CSS folder so you'll get a 4xx range response, or worse a 200 response which is actually a custom error page.
Assume I have an "images" folder directory under the root of my application. How can I, from within a .css file, reference an image in this directory using an ASP.NET app relative path.
Example:
When in development, the path of ~/Images/Test.gif might resolve to /MyApp/Images/Test.gif while, in production, it might resolve to /Images/Test.gif (depending on the virtual directory for the application). I, obviously, want to avoid having to modify the .css file between environments.
I know you can use Page.ResolveClientUrl to inject a url into a control's Style collection dynamically at render time. I would like to avoid doing this.
Unfortunately Firefox has a stupid bug here... the paths are relative to the path of the page, instead of being relative to the position of the CSS file. Which means if you have pages in different positions in the tree (like having Default.aspx in the root and Information.aspx in the View folder) there's no way to have working relative paths. (IE will correctly solve the paths relative to the location of the CSS file.)
The only thing I could find is this comment on http://www.west-wind.com/weblog/posts/269.aspx but, to be honest, I haven't managed to make it work yet. If I do I'll edit this comment:
re: Making sense of ASP.Net Paths by
Russ Brooks February 25, 2006 # 8:43
am
No one fully answered Brant's question
about the image paths inside the CSS
file itself. I've got the answer. The
question was, "How do we use
application-relative image paths
INSIDE the CSS file?" I have long been
frustrated by this very problem too,
so I just spent the last 3 hours
working out a solution.
The solution is to run your CSS files
through the ASPX page handler, then
use a small bit of server-side code in
each of the paths to output the root
application path. Ready?
Add to web.config:
<compilation debug="true">
<!-- Run CSS files through the ASPX handler so we can write code in them. -->
<buildProviders>
<add extension=".css" type="System.Web.Compilation.PageBuildProvider" />
</buildProviders>
</compilation>
<httpHandlers>
<add path="*.css" verb="GET" type="System.Web.UI.PageHandlerFactory" validate="true" />
</httpHandlers>
Inside your CSS, use the Request.ApplicationPath property
wherever a path exists, like this:
#content {
background: url(<%= Request.ApplicationPath
%>/images/bg_content.gif) repeat-y;
}
.NET serves up ASPX pages with a MIME type of "text/html" by default,
consequently, your new server-side CSS
pages are served up with this MIME
type which causes non-IE browsers to
not read the CSS file correctly. We
need to override this to be
"text/css". Simply add this line as
the first line of your CSS file:
<%# ContentType="text/css" %>
In case you didn't know you could do this...
If you give a relative path to a resource in a CSS it's relative to the CSS file, not file including the CSS.
background-image: url(../images/test.gif);
So this might work for you.
Make you life easy, just put images used in your CSS in the /css/ folder alongside /css/style.css. Then when you reference your images, use relative paths (e.g. url(images/image.jpg)).
I still keep images that are displayed with a <img> in an /images/ folder. Photos for example are content, they are not part of the website's skin/theme. Thus, they do not belong in the /css/ folder.
Marcel Popescu's solution is using Request.ApplicationPath in the css file.
Never use Request.ApplicationPath - it is evil! Returns different results depending on the path!
Use the following instead.
background-image: url(<%= Page.ResolveUrl("~/images/bg_content.gif") %>);
Put your dynamic CSS in a user control in an .ascx file and then you do not need to run all your css files through the asp.net page processer.
<%# Control %>
<style type="text/css>
div.content
{
background-image:(url(<%= Page.ResolveUrl("~/images/image.png") %>);
}
</style>
But the easiest way to solve the ~ problem is to not use a ~ at all. In Visual Studio, in Solution Explorer, right click your application, select Properties Window and change the Virtual Path to /.
On Windows 7, IIS 7.5:
Not only do you have to do the steps mentionned by Marcel Popescu.
You also need to add a handler mapping in IIS 7.5 handler mappings. So that IIS knows that *.css must be used with the System.Web.UI.PageHandlerFactory
It's not enough to just set the stuff in the web.config file.
Inside of the .css file you can use relative paths; so in your example, say you put your css file in ~/Styles/mystyles.css. You can use url(../Images/Test.gif) as an example.
I was having difficulty in getting background images to display for content containers and have tried many solutions similar to other posted here. I had set the relative path in the CSS file, set it as a style on the aspx page I wanted the background to display - nothing worked. I tried Marcel Popescu's solution and it still didn't work.
I did end up getting it to work following a combination of Marcel's solution and trial and error. I inserted the code into the web.config, inserted the text/css line into my CSS file but I removed the background property in the CSS file altogether and set it as a style on the content container in the aspx page I wanted the background to display.
It does mean that for each or any other pages that I want to display the background I will need to set the style background property but it works beautifully.