can't save style.css in chrome developer tools - css

I've made all these little CSS modifications to my blog with Google Chrome's built in Developers tools to improve a +WordPress blog.
I'm using the context-sensitive Save As command on the revised style.css document. However, none of my changes are reflected in the replaced styles.css document on the server.
A few added details:
I am using FileZilla to connect and manually delete the old file, then upload the revision (I've found that replacing doesn't always work, for whatever reason.
I'm doing this within the main theme folder for the blog. I am unaware of any other possible location where this could reside.
Thoughts? My original G+ query (with accompanying screenshot) can be found here.
Many thanks, in advance, for your help.

Instead of overwriting the styles you should append them at the end of the style sheet. I usually create a comment the end something like /* New Styles Here */ Better yet you should create a child theme and all the styles to the child themes style.css
http://codex.wordpress.org/Child_Themes

Related

I edit the style sheet of my css in wordpress but the changes do not apply on the blog

I'm breaking my head, to change the size of my wordpress blog logo, because they say it is for the css style sheet, but any changes I make to the style sheet do not apply to my blog, even if I delete all style sheet my blog does not change, can anyone help me?
There are several things to consider:
If the changes you want to make are minor, just use theme editors css and js injection mechanics.
Second most common thing is syntax, to counter that just edit your current active themes style file and enter something like body background-color:{ red !important} to check if the changes are being made. Then check with your browsers developer tools to check if the changes are being made in the style file.
If you are using some caching plugin, turn it off until you are done working on the site changes.
Check if you are editing the right theme. You should check what theme is active in your themes section of the wordpress.
In the case where you are using a child theme and you are editing child themes style.css file, you should first enqueue the file. More info on that here
If you are hosting your website not on the shared hosting, but on private server, you should check your file permissions.
Hope this helps.

Custom CSS WordPress Theme via cPanel (not updating)

I am wondering why I am not unable to make changes; I already tried several things yet, I don't seem to be able to update the CSS, the following I did already:
There is no Editor, so I am unable to make changes via there.
I am an Administrator and have access to cPanel.
I made changes via ../wp-content/theme/my-theme/style.css and no changes were made.
I empty my cache via plugin and hard reload my Chrome, Firefox and Safari. And no changes were made.
Is there any other solutions? I already found the file which contains all the styles. I would try to add my own class, and see if I am to see if there is any effect.
First thing first, From cPanel you can navigate to your website from the fileManager, use it to make code changes and then save them. You need to clear the cache everytime you make changes (i usually do it from the browser (in chrome, open the dev console, then long press on the refresh button and select the bottom one)
If the changes are still not showing on your site, I think that maybe you are editing the wrong CSS? Is this your theme and are you 100% sure you are editing the right file and, for example, it's not overwritten by a child theme or something else?
If you are using any framework, maybe your property is overwritten by your framework (for example, by bootstrap). To check this, open the console or try to add !important in your CSS file.
Just as an example, when I develop a theme I leave the root style.css with only the theme definitions, and then I create different stylesheets in a different folder. This leads me to the next question: are you enqueue your file correctly? is it even loaded by WordPress?
to check this I usually inspect the code in and search for the id of the file I enqueued from my functions.php.
Unfortunately, without more details, this is the only things I could think of when developing and WordPress theme and make changes from cPanel. Hope some of this can actually help.
Please check following options
Permission of file at ../wp-content/theme/my-theme/style.css.
Grab the css and open in Dream-viewer or sublime is there any css syntax issue.
Also the path of style.css in header is show same by view source.
Or
Even you can use the plugins which allow to add custom css without toching the server check this plugin https://wordpress.org/plugins/simple-custom-css/

Add WordPress Core CSS into editor-style.css

Here is my current issue : I am using a custom child theme (from Parabola, Cryout Creations, last version), but it seems that the editor-style.css file is not up-to-date. Rather than rewriting everything, I would like it to contain every css used on the front-end, so TinyMCE looks as close as the published page/article (this is important).
In order to do that, I have created a new editor-style.css file in my child theme, so it overrides the not-up-to-date file. So far, it includes the style.css file from my theme, but it lacks a lot of CSS from WordPress Core : the ones written on line 60 on the index file : http://nouveau.domaineloupia.com.
So, how to add this “core CSS” to my editor-style.css file ? And would it be the best way to do this ? I have seen many stuff talking about the add_editor_style function, but I do not know if I could use it to do what I want nor how.
Thanks for reading so far, and thank again in advance for any help you could provide !
You could just use #import url("YOURCORECSS.css"); in the top of your `editor-style.css' file?
But that tends to slow down your pages.

Wordpress theme is taking no affect?

i want to make some changes into my wordpress css file. i downloaded the style.css and other css file via ftp and made all the changes into the codes i wanted to. I uploaded the files and replace it with the other files. I waited for some time to take it affect but nothing happened, i left it and open my site the other day but the things were still same, no changes. I was using the WP Minify cache plugin. I even deleted it and re upload the css files again but still no changes. I tried out so many things but no success.
I than changed the name of the theme main directory via ftp, it help me a bit and made me happy for awhile, all the changes appeared. I again needed some changes in css files but unfortunately again suffering the same process. Please help :(
P.S. No theme is taking the effects of modifications in the css files codes. i tried different themes, but same results. Even if i delete the style.css nothing happened, but when i delete the entire directory of that theme then blank white page appear on my website.
It doesn't sound like you activated the new theme from your administration panel.
http://codex.wordpress.org/Themes#Selecting_the_Active_Theme
When using any cache plugins you should delete its cache when you do any changes to the website. Have you already done that?
Are there any other css files being loaded after style.css that may alter what you are trying to change?
It's generally not a good idea to edit the themes style.css directly b/c when you upgrade that theme you will lose all of your customizations.
Doesn't your theme have some place for custom CSS? Some themes have it in Appearance >> Theme Options, or something of that nature. What theme is it? Do you have a framework, or child themes? More info needed ... but every theme has a spot for custom css; as was mentioned, it's not best practice to make your modifications in the actual main theme stylesheet, due to updates, etc. ... and anything in the custom css section overrides the default theme stylesheet.

How to exclude a specific CSS file from an ASP.NET Theme?

I'm making a website that will have to render correctly on FF/IE6/IE7/Opera/Safari. IE6 came as a late requirement (when I had done all the other browsers) and it just has to be useable, not necessarily the same as on the other browsers. Now I'm tweaking it so that it's useable on IE6 as well.
To this end I've created another stylesheet in my theme called IE6_override.css. As you might have guessed, I want it to be applied only when the browser is IE6. Conditional comments would perfect for this.
The only problem is - ASP.NET renders a <link> tag for every CSS file that is in the theme's folder, thus including this file unconditionally on all browsers.
I would like to stick to themes because it's completely feasible that we might create more skins for our application later (if the customers desire that).
Is there any way how I can make ASP.NET exclude this specific .CSS file from its auto-including?
Added: Thank you for your answers! In the end I found a workaround. Due to some other styling problems I've asked about earlier, I'm forced to have a IE6-workaround Javascript as well. Thus I prefixed all my IE6-specific rules with a .ie6_dummy class selector and then removed it in JS upon page loading. :)
Yes you can... You can just remove the specific page header control in code behind. The css files are added automatically through theming, but u can remove them again after. Like for example u can put in the page load of your master file:
Page.Header.Controls.Remove(YourCssFile);
Or if you wanna have all the css files removed at the same time:
var themePath = string.Format("~/App_Themes/{0}", Page.Theme);
var removeCandidate = Page.Header.Controls.OfType<HtmlLink>().Where(link => link.Href.StartsWith(themePath)).ToList();
removeCandidate.ForEach(Page.Header.Controls.Remove);
I don't think you can. We stopped using the App_Themes folder for exactly that reason. This also saved us having to prefix every css file with a number so they load in the right order.
Indeed it's not possible to exclude a specific CSS file. However, there seem to be several workarounds located here. I'd suggest reading through those and choosing an appropriate solution (if any).
There are a couple of posts out on the web which seem to address your problem - looking for "Conditional comments in asp.net themes" I came across these which look like they may help:
How to take control of style sheets in ASP.NET Themes with the StylePlaceholder and Style control
Conditional stylesheets in Themes
The first one will also address the media issue with theme stylesheets as well.

Resources