Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
So i am currently creating a website for a eSports team in wordpress, and i have just ran into a problem, that i do not remember how to sort out. I remember from making chrome extensions there is a method for doing this, but i do not remember, and that is why i am here now :)
First code
As you can see on the picture, that is what is in the CSS, and i need to keep that for other pages, but i want my one page to overwrite that. I have a box where i am allowed to add custom CSS, but when i add the code, it gets overwritten by the old code. I know why this happends, but not how to fix it without changing the original css (which i would prefer to avoid)
Overwritten code
So my question is, how to i make my new css overwrite my old css?
(i have tried !important and it does nothing)
When inspecting what code currently applies on a particular element, Chrome also tells you what specific selector applies that rule and where it's coming from. All you need to do is write a stronger selector and it will apply. In your example, body:not(.template-slider) #Header { } will be overridden by...
body.page:not(.template-slider) #Header {/* CSS here */ }
Ideally, though, it would be best to not have to increase the specificity of current selectors, but apply your rules last, using the same selectors. The easiest way to do that is to add your CSS at the end of your active theme's style.css, unless your theme/WP installation is messed up.
By the way, if you're using a theme you haven't developed yourself, your active theme should be a child theme. This is important, but it's something you should look into separately as per why it's important, what are the benefits and how to do it.
If writing to style.css of your active theme (by far, the recommended WordPress way) is not an option, you can always put all your CSS into a separate stylesheet of your choice (i.e. my-custom-style.css), placed in your active theme's folder, and register it using the following code in functions.php of your active theme:
function add_styles_to_your_active_theme() {
wp_enqueue_style (
'my-custom-style',
get_stylesheet_directory_uri() . '/my-custom-style.css',
array(),
null
);
}
add_action( 'wp_enqueue_scripts', 'add_styles_to_your_active_theme' );
After adding it and making sure it loads, you can modify its position in the <head> tag by specifying other registered stylesheets as dependencies of yours, using the third parameter in the above call to wp_enqueue_style().
You need to place handles of other registered scripts into that array. You can find the handles by looking into the <head> tag of any page, finding the last loaded <link rel="stylesheet" /> tag and removing the ending -css from its id. For example, if your last loaded styleheet's link id is some-theme-style-css, the third parameter of your call to wp_enqueue_style() should be array('some-theme-style').
After that, check the <head> tag again and make sure yours is last. If not, add each <link />'s id to the $deps array, stripping -css, until yours is last. When your stylesheet loads last, you can copy-paste any applying selectors to it, change the rules to whatever you want and they will apply.
But do note that, under normal usage conditions, the method described above is unnecessary. Normally you should use a child theme, put your CSS in its style.css and not have to worry about tricky details like this, reserved for theme and plugin creators.
Yo can overwrite CSS with adding child selectors for your specified DIV element.
Fiddle Example here http://jsfiddle.net/JfGVE/2031/
Related
This question already has answers here:
How can I write 'a:hover' in inline CSS?
(24 answers)
Closed 1 year ago.
Is it possible to create inline pseudo styles?
For instance, can I do something like the following?
Coding Horror
The reason behind this is I'm developing a .NET library that creates UI elements. I want to produce HTML elements that can have their hover state set without the use of an external style sheet.
Unfortunately no, you can't implement hover effects using inline CSS.
A (poor) work-around for this problem is to have your controls render style blocks when they are rendered. For example, your control could render as:
<style type="text/css">
.custom-class { background-color:green; }
.custom-class:hover { background-color:Red; }
</style>
Coding Horror
If you could force your users to drop a "style control" at the top of their pages you could render all your custom classes there instead of rendering them next to each control, which would be a very, very bad thing (browsers will restart rendering every time they come across a style block, having a lot of style blocks scattered around your page will cause slow rendering).
Unfortunately there's no elegant solution to this problem.
This is kind of a Catch-22 situation.
On one hand, you can add a style block right before where your element is inserted into the page, but Chris Pebble points out the problems with that. (If you decide on this, make sure you pick unique IDs for your Elements so your selectors don't accidentally select or style anything else).
On the other hand, you could do something like this:
...
But, that's nasty in its own right as it ties together markup, presentation, behavior, and a whole bunch of other things.
You could also inject a stylesheet into the page by writing out a link tag or manipulating document.stylesheets, but that's going to trigger a download.
I've usually seen the first method (adding a style block) done on large. "Modular" portal sites do this sort of thing, so maybe it's the de-facto standard (it is at least more readable and maybe easier to maintain than cramming JavaScript in there?). The JavaScript method seems to have the least impact on the DOM and the overall page as you're keeping your presentation to yourself.
This is one of those front-end dev morasses where every answer you choose is wrong to some extent, so weigh the options and pick what's easiest for you to build and maintain.
I would dynamically create a CSS file as I parse all the controls, and I would add a server side attribute to the controls that contained the hover or other pseudoclass styles.
<a style="color:blue" styleHover="color:blue" id="a1">Click!</a>
Your code can look for these attributes and generate a css file on the fly
#a1:hover {
color:blue
}
I don't know if .NET allows for you to do this type of parsing of the attributes, but I do something similar in a framework I created for php.
Hacss effectively brings pseudo-selectors to inline styles.
You could send a static stylesheet with the built page that uses css variables to control specific states and generate those in your script. Sadly you have to do this for every state and property you want to use.
* {
background-color: var(--n-background-color);
}
:hover {
background-color: var(--hover-background-color);
}
Coding Horror
To avoid using !important we cannot define the normal state inline directly.
Or you can use jQuery's hover function and set the background color.
I am using Twitter Bootstrap via cdn and I need to change a little bit the column height of a table but I am not sure how to do it. I am using cdn so I don't have the downloaded bootstrap.css file. I tried to overwrite the class table-striped and change it's default styling but no luck.
Is it possible to do it with cdn?
Thanks.
You, obviously, can't change the existing CSS file.
You need to load another CSS file and write a new rule-set to replace the rules in the existing one.
The trickiest part of this will be making sure that the selector you use is specific enough so that it overwrites the earlier rules.
You can file the exact selector used to apply the rules you want to change using the Inspector built into the developer tools in your browser. Inspect the element and look at the styles.
You can copy/paste the selector directly. That way your selector will be equally specific and, because your stylesheet is loaded after the Bootstrap one, will replace any rules that set the same property.
I am using cakephp3 and I'm adapting a view that already had but I'm having confict with the stylesheet, cake.css and base.css automatically load and I move elements, not can erase it because I use it in the login and other views and I wonder if you can avoid carrying those stylesheets.
Thanks.
Sounds like you should add your own style sheet that uses classes and/or ids present in this specific view to override the styles that you don't want from the default. For example, views that you bake have a div with the controller and action names as classes, so if this is the view for the user edit page for example, you could use div.user.edit p { ... } to target paragraph tags found only on that page.
If you put these rules in webroot/css/custom.css, you could load that file with $this->Html->css('custom');, either in your view or in src/Template/Layout/default.ctp. The latter option is my preference, since things like this tend to grow over time and you'll find yourself including this code in many views; using specific CSS selectors to target just this one page means that you can include it on every page this way without affecting the look of any others. And the CSS will be cached by browsers, meaning that you're not increasing network traffic noticeably by doing so.
You could presumably also exclude loading the default CSS by making changes to src/Template/Layout/default.ctp, but such changes tend to be hackish and fragile.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm creating a website, and the styles change frequently between pages. So what I have is images of pages that have the same header, same footer, and out-of-whack body styles. I started with the header and footer, and used a single css file that is linked in the header.
The problem is, as I do the pages, I have been adding css I need to the css page. I now have 1600 lines of css and I'm not done. I commented everything really well, but I have to use ctrl-f to find the element I need to change.
Now, I could separate them into different files and have a header with 10ish linked style sheets, but I didn't know if this was the "right" thing to do. Am I better off just having one large file? Is there a performance issue with multiple linked css files? Or is inline styling the better answer?
I've always opted for having a single file, but depending on the organization of your CSS, it might be easier to break it into multiple. At the end of the day there is no one right answer. It depends on the circumstances and developer's preference. I would say that whatever you do, make it consistent.
separating the stylesheets is entirely acceptable, and up to you. Anyhow, you can do one stylesheet for the base styles, and one stylesheeet for any custom sections if you want.
You wouldn't want to do one custom stylesheet for header, and one for footer, etc.., i dont think that's a good idea, separate them by content, not by html tags.
if you get a chance, post a site link so we can take a look at the styles.
how you would do this is just include each stylesheet from your main index file, or wherever your loading the files, like this..
<head>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
EDIT:
i should mention, please note, the order you load them in is important if you accidentally, or purposely override any styles.
say for instance you have a body style on the first sheet loaded, theme.css in this case, then if you have a different body style in gallery.css it will override it. so be careful not to do any overrides unless you intend.
Overrides are a great way to have more control also, take for example if you include bootstrap.css first, you include your theme.css after, overriding any bootstrap styles that you want to customize for example. you would leave the styles alone on bootstrap.css never touching them, then put a duplicate style name on your theme.css and change one or more of its properties to override it. This is why its important to load them in order. So pay attention to the order you load them in if you split your stuff up.
Its best to put your primary and most important style sheet first, then your override anything you need on a custom basis after.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
This seems like kind of a basic question. What are the reasons one would choose to use a css document instead of altering the style with the style tags in the html document? Is it not possible, for instance, to alter IDs and classes from within the html style tags? Thanks- this is my first stackoverflow question!
There's nothing technically wrong with using the style tag, but most pages have a seperate style sheet file.
Here are some reasons to use a seperate style sheet file:
The page may load faster due to asynchronous loading by the browser.
Seperates your HTML markup from your CSS styles.
Caching.
Easier to maintain because all the CSS is in one place.
You may also want to look into LESS or SASS.
There are several benefits
Reusability. An external site sheet can be used by multiple documents, so you don't have to write a new style sheet for each.
Coherence. With external style sheets you can be sure that the documents have at least the same basic styles and are visually consistent. Embedded style sheets tend to drift away from the standard.
Performance. An external style sheet can be cached by the browser, which means it doesn't have to be transferred every time the client requests a document. An embedded style sheet has to be transferred every time the browser requests a document.
Maintainability. If you have a set of documents that have the same visual appearance, and a change has to be made (changes to the corporate identity for example), if the style sheet is external you have to change it in only one place. Using embedded styles you would have to make the same change in each document.
Check out this LINK
In my own words, using CSS makes thing a lot simpler as adding styles for each tag in HTML is basically just not practical. Hence defining how a particular element will look on the page just once and then reusing the same style multiple times saves a lot of time
CSS files is cacheable by the browser, the style tag in an HTML document just adds an extra file size overhead that needs to be downloaded everytime.