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.
Related
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
I'm using twbs bootstrap 3.3.6 with Meteor and trying to style a <fieldset>.
However when I use the Chrome inspector it says that the style is coming from bootstrap.css even though I have tried using class-specific and id-specific css.
My style sheet is in the application root, as suggested by some answers.
I'm very new to meteor and css so I could be making a novice error.
Otherwise, what's the best practice to override bootstrap css settings?
Generally if you want to override the css you should put your css file after all of the other files like the bootstrap css because css starts from top to bottom so the bottom lines are the ones that will be executed, example:
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/your-css.css" />
Also you can add !important at the end of every css line to give that style the top priority no matter of the line index, example:
.someclass {
color: red!important;
}
You can either override the specific property on the same class in your css...
.btn {
background-color: #fff !important;
}
...create an inheritance map so that it only applies to the element inside another specific element...
div.classForSpecificContainer btn {
background-color: #fff !important;
}
or specify your own class and add it to the element in question
myOverrideClass {
background-color: #fff !important;
}
The.. important part is that you use !important; to prevent Bootstrap from overriding it. That will generally solve the problem even if the CSS files load in the incorrect order, but not always. I have made a habit of prefixing my CSS files in the same folder with z- to make sure they get loaded last if I'm using something like Meteor that merges and compresses the CSS.
This seems to be a common problem in Meteor because of the way their build injects the merged stylesheet into the top of the html <header> instead of the bottom. There is a merged PR that looks like it will be available in 1.6.2 that allows you to put a pseudo tag anywhere in the <head> you want the merged css injected.
Example: proposed availability in 1.6.2 - PR already merged
<head>
<link rel='stylesheet' type='text/css' href='some-cdn.bootstrap.css'/>
<meteor-bundled-css/>
</head>
That will work once the merged PR is included in the next build.
Until then...
SOLUTION 1: If you're using the bootstrap LESS or SCSS files, you can just import it into your client/main.less or client/main.scss file and then import your override file after this. It looks like you're using pre=compiled css though, so move to SOLUTION 3.
SOLUTION 2: Use !important on the end of your lines... BAD not recommended practice. If you use important you break the cascade.
SOLUTION 3: Put you third-party library overrides files in your public folder and manually <link> it below the bootstrap <link> in your head. I suggest this for now.
I am trying to add custom styling to my web app. Here is the link to my code:
https://github.com/SammyAbukmeil/rps-challenge
In layout.erb I have the following:
<head>
...
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
...
</head>
Which should be loading my custom.css file.
In views/index.erb I have an ID of test:
<img class="img-responsive center-block" style="margin-top: 40px" id="test"src="http://i.imgur.com/hSuFTzO.png">
and in css/custom.css I am calling that ID:
#test {
margin-top: 50px;
}
But for some reason it doesn't apply my custom styling, although bootstrap (which is being linked in layout.erb and is adding styling to the .erb files throughout the project) is working.
I've tried looking through similar questions on stack overflow without success, also tried google for how to add custom styling to a bootstrap project - everything I'm doing seems to be correct.
Any advice is greatly appreciated. Thanks!
EDIT: So i checked the console and found this:
...
Status Code: 404 Not Found
Request URL: http://localhost:4567/css/custom.css
...
So I guess I'm not linking it right.
Bootstrap selectors are very specific, for example body > div > img.img-responsive. You need to be more specific in order to override the selector. You can test this by using temporally the !important declaration:
#test {
margin-top: 50px !important;
}
If it overrides, you have a working setup that just needs more specific selectors. After that you should remove the !important declaration and add details to the selector:
body > div > img#test {
margin-top: 50px !important;
}
In Sinatra any static files (such as CSS files) should be in the folder pointed to by the public_folder setting. Usually this is named public. In your server.rb you set it to be public but relative to the projects root.
You need to create a public folder at the top level of your project (next to app, view etc.), move your css directory to it and then change the setting in server.rb so that :public_folder points to it, similar to what you have done with the :views setting:
set :public_folder, proc { File.join(root, "..", "public") }
First You need to understand the hierarchy of CSS
You Can use Firebug (Firefox) to identify that your styling is apply or not also what class is overrating your custom css.
Note: Also avoid adding ID for CSS Styling
You need to override the bootstrap selector.
It is not good practice to use this in your finished website, however you can use !important to over ride other style rules.
Example of Use
.element-class{
width:50%;
}
.element-class{
width:100% !important;
}
The element would have the width of 100% here.
Read more about when to use this on the css-tricks article
I am allowing users to choose their theme folder /views/theme/images/ theme can be chosen by the user. The css is in the theme folder along with the image folder.
.header {
float:left;
height:100px;
width:100%;
background-image: (/images/bg-nav.png);
}
and I have tried lots of different image paths in the background image but it's not showing I have tried /views/default/images/bg-nav.png, I've added dots, forward slashes etc.
The image does exist in the following folder: /views/default/images/bg-nav.png can someone help me to display and find my image :/
Here's my html css include
<link href="/views/<?php echo $system->theme(); ?>/style.css" rel="stylesheet" type="text/css" />
It is including fine the stylesheet is working
In your example code above:
background-image: (/images/bg-nav.png);
Should be:
background-image: url('/images/bg-nav.png');
You are missing the url. Check the syntax.
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