I am new to magento and i want to add one css file 'responsive.css' in the page.xml. But this file i want to add last of all css files including the extension's css files.
<block type="page/html_head" name="head" as="head">
<!-- other css & js files -->
<action method="addCss"><stylesheet>css/responsive.css</stylesheet></action>
</block>
And if i view the page source, my responsive.css file is showing before the extensions css files. So please help me how i can include at last of all css files.
You can remove and add your responsive.css again in your page.xml. Be sure to do that after all other css files have been added:
<?xml version="1.0"?>
<layout>
<default>
<reference name="head">
<!-- ... add your other css files ... -->
<action method="removeItem"><type>responsive_css</type><name>css/responsive.css</name></action>
<action method="addItem"><type>responsive_css</type><name>css/responsive.css</name></action>
</reference>
</default>
</layout>
I did a quick google search and found the magento stack exchange website and a brilliant answer there that seems like it would work for you: https://magento.stackexchange.com/questions/12150/overwriting-a-css-style
One way to combat this is, instead of using page.xml, to put the declaration in local.xml of your theme's layout folder. This will be loaded last and therefore your css overrides will come last.
Another way to handle this is to create a custom layout file and reference it from a local module's config.xml
Edit the original css file at the bottom to override its styles
See the post above for more information on this list of fixes. Basically you're looking for ways to insert your css code after the code you want to override so you can avoid using !important declarations.
try
<action method="addItem"><type>js_css</type><name>prototype/windows/themes/default.css</name></action>
Related
I know I can use CSS isolation in components but I want to add a global file for general style.
I added a CSS file to the wwwroot, how can I link it to the project?
Adding a link tag to the index html didn't help.
I found the answer!
For everyone who might need it:
There a 3 steps:
Create a CSS file in the wwwroot under CSS folder.
Add tag in the index.html file for file CSS
<link href="css/{FILE-NAME}.css" rel="stylesheet" />
Add tag in the index.html file for solution CSS
<link href="{SOLUTION-NAME}.styles.css" rel="stylesheet" />
we are using the same theme for two magento stores.
Is it possible to change css styles differently for both stores?
They are in the same root folder but using different domains.
For example if I change the color for the navigation, it will change the color in both stores.
Is there any good explanation how to do this?
Thank you
In Magento, we have store specific layout handle. So you can use the same handle in local.xml to add different CSS in the same theme.
<STORE_custom1>
<reference name="head">
<action method="addCss"><stylesheet>css/store_custom.css</stylesheet></action>
</reference>
</STORE_custom1>
<STORE_custom2>
<reference name="head">
<action method="addCss"><stylesheet>css/store_custom2.css</stylesheet></action>
</reference>
</STORE_custom2>
Here custom1 and custom2 store view code.
You can check all the appied handles using the below code:
print_r($this->getLayout()->getUpdate()->getHandles());
How to use 2nd CSS file on my WordPress website ?
Here is my code:
<link rel="stylesheet" type="text/css" media="all"
href="http://www.mydomain.com/wp-content/themes/twentytwelve/style.css" >
But I need to extra CSS file with seam themes. Now I am how to connect my new CSS file? Please anybody help me.
Just use that exact code and duplicate it as much as you want.
Just change the href to each new file name.
You need to be aware that any changes made to the theme will be erased if the theme is updated.
I suggest you read up on FTP and upload the CSS files in the CSS folder for your theme. You need to know where the CSS's location is for it to be called effectively.
Once you have uploaded the CSS file to the theme's folder, do the following:
In WordPress administration, click on the left side menu item Appearance, then click on the sub-menu item Editor. You will see on the right hand side a whole lot of links show up. Click on the header.php link.
In the header.php file, you'll notice a section that starts with <head>. Enter the path to where your CSS file is located on the server like so:
<LINK href="link/to/your/stylesheet.css" rel="stylesheet" type="text/css">
Click on the Update File button on the bottom of the page. Verify your work.
You can have as many css files as you like. The attributes that are loaded from the last css file will override attributes of any previously declared and conflicting attributes but you can specify them in as many files as you like. You can "connect" or link you new css file in your html using this :
Looks like you needed it for wordpress themes.
You need to have one main style.css file. You have to include it by using type="text/css"/>. Once this is done you can add additional css files by doing something like this: /address-to-css-file.css" type="text/css" media="screen" />. bloginfo('template_directory') is a function which prints out the directory of your template.
You can also use #import in your main stylesheet (style.css) . Add these lines:
#imports url('link to css');
Or you can use
http://codex.wordpress.org/Function_Reference/wp_enqueue_style this link has a description of how to use this.
I have a series of CSS files that I am concatenating and minfying (using the YUI Compressor) with an Ant build script. The CSS files are:
Reset.css
Formalize.css
Typography.css
Site.css
There are other CSS files like ie.css and editor.css that I don't want to include in the minification. I have my build script working with the following code, but the problem now is that the files need to be concatenated in the order posted above.
<target name="minifycss">
<!-- Combine all CSS files except for ones specified for IE or the content editor -->
<concat destfile="css/e123-1.css">
<fileset dir="css" includes="*.css" excludes="ie.css editor.css print.css" />
</concat>
<!-- Minify the css -->
<java fork="true" jar="${yuicompressor.lib}" dir="css" output="css/e123-1.min.css">
<arg value="e123-1.css" />
</java>
</target>
I assume that the files are added alphabetically, but I was wondering if there was a way to tell Ant what order to concatenate the files without renaming them to 1reset.css, 2formalize.css, etc.
Use a filelist, as shown in the ant concat documentation.
If using wro4j, you can control the order of the resources to concatenate like this:
<groups>
<group name="all">
<css>/static/reset.css</css>
<css>/static/fonts.css</css>
<css>/wildcard/*.css</css>
<js>/static/js/lib/core.js</js>
</group>
</groups>
It allows you to use wildcards and also can be used for javascript resources (not only css)
This is a biased answer, because i'm working on wro4j project.
I am attempting to use Chirpy to mash all the CSS files from various sub directories into a single file.
This works to the extent that I get a single minified file containing all of the CSS.
The problem I am having is that the CSS files that are referenced contain relative paths to images so when mashed the resulting file contains CSS with invalid image references.
For example:
<!-- Jquery -->
<File Path="ThirdParty\Jquery\jquery-ui-1.8.custom.css" />
<File Path="ThirdParty\Jquery\Plugins\colorbox\colorbox.css" />
<!-- Ext -->
<File Path="ThirdParty\Ext_3.2.1\ux\LockingGridView.css" />
<File Path="ThirdParty\Ext_3.2.1\plugins\Schedule_1.7\css\sch-all.css" />
Each of these files contains entries along the lines of:
.ui-widget-header { url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) }
When this entry gets "Mashed" into a central file in another location the url is no longer valid.
Does anyone know of a way around this other than updating all of the urls in every CSS file?
(I am wondering whether the YUI compression tool via chirpy can do this for me).
I would like to avoid absolute urls because the site code is re-used in sub directories on the same web server.
I suggest switching to Sass / SCSS combined with Scout App. That way, you can #include all helper sheets (like mixins or themes) in the main one, that is compiled and minified into a single css file.
All css files work seamlessly as scss, so no headache there.
My coding (and life) have so much improved after this upgrade.