I'm new to Magento 2 and front-end development I just know how to use html and css, I want to customize blank theme in Magento 2 to understand how the things work, I was reading the documentation of Magento 2 but I didn't get any idea of how to do that, I want to customize the theme what I should change? is it the css files or the hole layout (the xml) files?
I tried to walk-through some tutorial to add css file but nothing changed.
this is the default_head_blocks.xml
<?xml version="1.0"?>
<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>
</page>
and this is the css file
.navigation {
background: #40e936;
font-weight: 700;
height: inherit;
left: auto;
overflow: inherit;
padding: 0;
position: relative;
top: 0;
width: 100%;
z-index: 3;
}
To add custom CSS theme file to Magento 2, you need to:
Create file custom.css in pub/media/
Go to Admin > Content > Configuration > [choose the theme currently in used] > HTML Head > Scripts and Style Sheets
Input: <link rel="stylesheet" type="text/css" media="all" href="{{MEDIA_URL}}custom.css" />
However, the method above is not recommended in Magento 2. In Magento 2, you should style by creating a child theme then edit CSS and LESS files that is extended from the parent theme.
Magento 2 can now process 2 types of files for styling website: CSS file and LESS file, which allows you to manage complicated CSS files with ease.
If your custom theme is from Magento default themes Luma or Black, you can just override the LESS files by, for example changing the values of the variables that are in default files.
Here are some easy steps:
Create a new theme that inherits from the Black theme, we can call it Orange theme.
Add the code of overriding is
app/design/frontend/OrangeCo/orange/web/CSS/source/_theme.less
In the orange theme folder, you can change the color of the button or any changes which you want.
You can hire a developer if you are getting much problems while customizing. Here is a link if it can help kodematix
Related
Sorry if this is a silly question, I'm completely new to bootstrap and ASP.NET.
I'd really like to change the nav-link colours for my web application but applying inline CSS and changing the bootstrap.css is not working. According to inspect all CSS for the nav-links are being overridden by Navbar.less
Screenshot of inspect:
Bootstrap v3.4.1
Of course you should be compiling bootstrap's files combined with your style to make a perfect match, taking advantage of bootstrap variables, and overriding them in case of need. You can compile it automatically when saving using editor extension or other way you choose.
I assume you are using bootstrap 3 because it uses less files.
main.less <-- your file
#import "path/to/bootstrap.less";
// your overrides here: (see file variables.less)
#navbar-default-color: white;
#navbar-default-bg: pink;
// and also
.my-primary-border {
border: 1px solid #brand-primary;
}
// and rest of your styles.
my-html.html
<!-- main.css is automatic output of main.less -->
<link rel="stylesheet" href="main.css">
If you're using bootstrap 4/5 it's the same idea. See here
I am new to Wordpress and CSS. I have recently purchased a wordpress theme
I have created a website and I want to change the color of some elements in the website. So for instance, under the menu item "The Opportunity", there is a picture that says "Potential of the EMC customer" The line under that is in grey and is barely readable.
So I want to change the color. The theme Options allow me to use custom CSS..
The code I am using is:
media="all"
.white-overlay p {
padding: 5px 0 15px;
font-size: 15px;
color: #a81800;
}
When I try to add the code to stle.css under wp-content/themes/vernum (I am accessing this file using FTP), I see this:
/*
Theme Name: Vernum - Responsive One Page Parallax Template
Theme URI: http://spyropress.com/themes/vernum
Author: Spyropress
Author URI: http://spyropress.com/
Description: Vernum is a project of the spring, joyful one page website. It is modern and clean, very easy to edit. It's prepared to use with jquery parallax efect. There are flat and simple graphics. It's multipurpose, so you can use it as portfolio, or personal page, whatever you want …
Version: 1.8.2
License: WordPress theme is comprised of two parts: (1) The PHP code is licensed under the GPL license as is WordPress itself. You will find a copy of the license text in the same directory as this text file. Or you can read it here: http://codex.wordpress.org/GPL (2) All other parts of the theme including, but not limited to the CSS code, images, and design are licensed according to the license purchased. Read about licensing details here:
http://wiki.envato.com/support/legal-terms/licensing-terms/
License URI: license.txt
Tags: agency, clean, easy to use, flat, minimal, modern, multipurpose, one page, parallax, portfolio, responsive, retina, simple, spring, spyropress, builder
Text Domain: spyropress
*/
.wp-caption { }
.wp-caption-text { }
.sticky { }
.gallery-caption { }
.bypostauthor { }
.alignright { }
.aligncenter { }
.alignleft { }
So I am not sure where exactly should I add the code
But it does not change the color! Would anyone help e investigate..I've been struggling with it for hours :(
You don't need media="all" here, so just remove it:
.white-overlay p {
padding: 5px 0 15px;
font-size: 15px;
color: #a81800;
}
If all you want to do is change the colour of the text underneath then just insert the following in your custom css:
.white-overlay p {
color: #a81800;
}
This will leave all the other properties (font size and padding) as they were originally specified in the main CSS file. You shouldn't put media="all" in the CSS because:
It's redundant; the browser will assume that a rule applies to all media types unless told otherwise.
The syntax is actually formatted like this:
#media [media type] { [selector] { [property]: [value]; }
If you wanted to make the transparent overlay a little less transparent you could also add the following code:
.white-overlay {
background: rgba(255, 255, 255, 0.6);
}
The final number in the background value specifies the opacity (from 0 to 1) and has been changed by me from 0.5 to 0.6.
I have experienced the same problem with the Vernum Wordpress theme. For some reason (which I cannot understand) they style.css is not 'correctly' linked.
I solved the issue by adding a copy of the header.php of the parent theme inside the child theme folder, and adding the following line:
<head>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
</head>
This seems to give correct visibility to the style.css, so that it can be overridden by the child theme.
Note that I am currently experiencing other problems with the Vernum theme, concerning the use of multiple stylesheet, so it seems to be not the ideal theme to try and re-style.
good luck
Giovanni
I'm trying to program a template with smarty, so i started to build a layout in HTML and, as expected, with CSS in an extra .css-file. When i had finished it, i started to adapt it to smarty, but i had realized, that Smarty does not work with "normal" css. Damn delimiters ^_^
Though, i tried to include the .css-file with:
{include file="templates_css.css"}
and changed my css-code a bit:
<style type="text/css">
.body {ldelim}
width: 990px;
margin: 0 auto;
{rdelim}
.title {ldelim}
font-family: Verdana;
font-size: 275%;
margin-left: 230px;
padding: 40px;
color: #929292
{rdelim}
</style>
This is what i read the last hour about "including css-files in smarty, and they recommended "Thanks! It
It is better to have stylesheets seperated from .tpl files.
It is simple to use html tags with smarty.
And so you can simply call css from .tpl file as:
<link rel="stylesheet" type="text/css" href="{$RootDirectory}/path_to_css_directory/templates_css.css" />
Hi
You Can call external style sheet like add following line in your tpl file
OR
If you want to use internal style then just write
{literal}
here start style tag
add inline style here
Here End style Tag
{/literal}
Thanks
The secret on using smarty is not how to use the delimiters. The secret hides in the way smarty handles the path. For example:
...\htdocs\smarty <- smarty library
...\htdocs\myWebsite\css\your.css <- your stylesheet
...\htdocs\myWebsite\templates\base.tpl <- the file where you load your .css
...\htdocs\myWebsite\index.php <- the file where you load the template (base.tpl)
So... If you see your template is in \templates\base.tpl and your css in \css\your.css, you may think that you need the relative path from your template to your stylesheet. That is wrong! Note, that the, let's call it "position", of your template file will be the same as the file which is loading the template file(here it is the index.php). That means your css include, like you do it in HTML will not have the path from your template to your css, but from your index.php to your css.
In my source, I have the following code:
<style>
/*Twenty Twelve fixes and other theme fixes and styles :( */
.flex-caption {
background: #000;
-ms filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
zoom: 1;
}
/*...*/
</style>
This is not within my personal CSS file and i have no idea where this is being pulled from.
I am linking to my external CSS file as per Wordpress Codex to include a stylesheet as per below:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
What do I need to do to remove this CSS?
EDIT*
this has now been fixed.
It looks like you started with either WordPress's TwentyTwelve theme, or another theme which inherited from it and made changes from there. If you look at /wp-content/themes/head.php I think you may find the offending styles in there.
If it's not in your CSS it's probably in header.php
Go to Appearance > Editor > Header (header.php)
I have figured what was generating this and removed. It was a plugin, and it was one that I'm not using.
NextGEN gallery plug in generates this.
Hi im using the sprite framework http://aspnet.codeplex.com/releases/view/50140
I have it working so that i can do things like:
#Microsoft.Samples.Web.ImageSprite.Image("~/App_Sprites/icons/calendar.png")
but how can i use the images within css files?
eg
#wrapper {
width: 980px;
margin: 0 auto;
background: url(/App_Sprites/images/img01.gif) repeat-y left top;
}
If the image you are referencing in the CSS file exists, then it should work. The CSS path is relative to the CSS file. O you have the path correct? You can check with firebug.
This will require you to create CSS file on the fly, at runtime and fix up the paths in your classes and IDs.
The whole idea of the image framework is that it generates the CSS files dynamically. So let's suppose that you have placed your images inside the ~/App_Sprites folder: img1.png, img2.png, img3.png. Now you simply register the HTTP module in your web.config:
<httpModules>
<add type="Microsoft.Samples.Web.ImageOptimizationModule"
name="Microsoft.Samples.Web.ImageOptimizationModule" />
</httpModules>
and then inside the head section of your page you include the dynamically generated CSS:
#ImageSprite.ImportStylesheet("~/App_Sprites/")
which will render the following:
<link href="App_Sprites/highCompat.css" media="all" rel="stylesheet" type="text/css" />
Now all that is left is to use the rules contained inside this CSS:
<div class="img1-png"></div>
Or if you wanted to directly include the image inside your markup:
#ImageSprite.Image("~/App_Sprites/img1.png")
So the idea is that you use directly the dynamic CSS generated by the framework, you cannot use those rules in your CSS files.
Also make sure you read the documentation for the different modes and the settings.xml file which allows you to customize those modes.