I am using Gulp CSSO to tidy up my CSS in WordPress but it deletes my comments, more specifically it deletes the theme meta data. Is there any way to get around this? Perhaps insert the theme meta data after I have run CSSO?
The csso documentation page says that it will remove the comments,because they do not affect rendering, but:
If you want to save the comment, CSSO can do it with only one first comment in case it starts with !.
So I don't think you can preserve a comment with the wordpress metadata format.
Why don't you apply gulp-csso first and then add the metadata as a prefix using gulp-header?
Actually, if you use the ! at the beginning of a single comment declaration such as:
/*!
...Your Theme declaration here...
*/
WordPress will properly detect the declaration, and CSSO will preserve the comment.
Related
It's quite simple. I'm working on my first WordPress plugin. Testing on multiple WordPress websites, it seems that it's quite hard to make sure my plugin looks the same on all websites.
I obviously don't want to list every single possible css setting and write none !important.
So what's the right approach here?
While creating any plugin, you can make a common prefix according to your plugin name and add it everywhere. Like if i am creating a plugin i.e. "custom post type" then i will use "cpt" as a class or id on everywhere.
Just use unique prefix according to your plugin name so it will not conflict with theme styling.
Hope this will help!
Use could use custom HTML tags. So instead of this:
<div class="hello">Content</div>
Do this:
<my_element class="hello">Content</my_element>
That's the only way to be 100% sure, without using lots of over-qualifying things like !important etc.
Both are 'incorrect' ways that invalidate 'guidelines'.
But it will work, and it'll be fine forever as long as your tags are uniquely named and never become part of a spec and get treated in a predefined way by browsers.
For input fields etc, unfortunately you'll have to go with standard CSS selectors and qualify them more than any other CSS which may be present.
asdf{
display:block;width:100px;height:100px;background:black;color:white;
}
<asdf>Hello!</asdf>
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.
So I'm creating a WP theme and I have started building customisation for it, currently I have the styles go to the header and they are inline. Is there any way I can put them into a stylesheet after the options(get theme mod) have retrieved the information? Hope that makes sense. Or is it okay to have all the styles being inline in the header? It just seems really messy...
Thank you
Basic answer is : No, can not.
Because, the stylesheet is a css file, your get_theme_mod() or get_option() functions are wp core functions working in php script. Data is fetched through those functions and printed in header through wp_head(), the whole process is on the php files only.
So, no wp core function can print it inside stylesheet.
Also, I have never seen any theme or plugin doing so. But if you are very interested a custom built function can be written using 3 php functions: fopen() fwrite() fclose()
That function will write desired string inside the stylesheet, but have to be parsed in functions.php or atleast before <head></head>
I think it is an fairly unique idea (some do this in custom template editors), subjected to views of other people.
Is there a convenient way to have SASS automatically prepend a comment to the beginning of each CSS output file? Specifically, when using Compasss I'd like to stick a brief warning telling designers not to edit the CSS directly and to point them to instructions on getting started with Compass. I use an output style of :compressed, which strips out comments that are in the input SCSS/SASS file.
If there isn't a convenient way to do this then I'll submit an issue/patch. I was thinking of adding an option named :output_prefix that takes a String that will be prepended to all output CSS files.
From the SASS reference on comments:
When the first letter of a comment is !, the comment will be interpolated and always rendered into css output even in compressed output modes. This is useful for adding Copyright notices to your generated CSS.
So you could start your SASS file with something like this:
/*!
* WARNING: Don't edit this file by hand! Instead, you should be using Compass.
* (More information at http://compass-style.org/)
*/
compressed strips out all comments. I suggest you put this in a property:
warning { do-not: "edit this file"; }
Regarding the proposed patch, I do not think this use case is compelling enough to warrant such a feature.
Known bug in Sass. Fixed in master but not yet released:
https://github.com/nex3/sass/issues/784
Does anyone know how to remove markup from the theme search box? It produces a lot of extra DIVs and CSS id's.
Thanks, Mark.
It is very easy thing to do.
First, search your theme (/sites/all/themes/yourtheme). Do you have search-block-form.tpl.php? If so, you can edit it according to your own fashion.
If you don't have search-block-form.tpl.php, you can create it. Follow the very simple instruction in: http://www.bananatools.com/drupal/customizing-search-block-form.html to create it and afterwards change it as you like.
Assuming you installed a custom theme, go to /sites/all/themes/yourtheme and edit the .tpl.php and .css files. If you didn't install a custom theme, you can't re-theme it without making a huge mess.