I've got a lot of custom stuff to style inside my current project ( first one made with Gutenberg) and editing two files (that include a lot of media queries) makes the task deeply infuriating.
Is it possible (and viable) to merge the 'frontend' styles and the editor styles within one CSS file in WordPress? So I can have the 'frontend' and 'editor' versions opposite one another in the CSS file and nothing flips out?
This will cause unnecessary code in the admin panel.
Write CSS Separately for Gutenberg(editor styles). Gutenberg CSS file must include these: heading(h1,h2 etc...), , quote etc... Add this style even if the style element is for your front end. These attributes must be placed in editor styles.
Then enqueue the editor styles CSS file both.
Ali is mostly right but the reasoning is kind of reversed.
You want the public views to be as small as possible, so while adding weight to Gutenberg would suck, adding weight to public views is much worse and will negatively impact page scores?
Related
I've created my website that compiles my scss (boostrap, node_modules, my own custom css) to a single file. Now I'm wondering what would be the best way of styling gutenberg blocks in the editor?
I want to keep the responsive nature of my blocks from bootstrap and my styling what would be the best approach to do this?
If I'm understanding correctly, you want the CSS file for the front-end of your site to also apply to the block editor?
If so, that's as simple as adding add_theme_support('editor-styles'); in your theme files (such as in functions.php).
I find it helpful to create a second block-editor stylesheet to use only in the editor. Sometimes I find the media query breakpoints are too different or just need to tweak the front-end styles a little for the editor. For that file, you can use wp_enqueue_script() on the enqueue_block_editor_assets action hook so it applies only to the editor.
I often use small, page specific CSS files for a page in Typo3 using css_select. These styles usually apply only to some special element on these pages. Putting these styles in a global file doesn't feel right.
Using css_select I can select a bunch of files that may be included into the page's header, so that it loads it's special styles.
Now I'm looking for a way to do something similar in Django CMS 3. The only built in solution I'd know is to create a new template which seems a bit excessive for a single page where an image needs to be handled a bit differently from all the others, to name just one example.
Is there a way to do this using nothing but django CMS?
If not, is there an app that would do that?
If not, how could an app extend the page admin form in such a way that this function could be added.
You could extend the page.
See http://django-cms.readthedocs.org/en/latest/extending_cms/extending_page_title.html
A good example is https://github.com/nephila/djangocms-page-meta
This the above package allows you to add additional meta tags to page header.
I'am currently working on a website that is using the wordPress content managment system and i was trying to get rid of some inline style definitions for some inputs that i wanted to put into the css file.
I copied the exact inline style definition into the stylesheet in a class that targets input (i.e input.className, ClassName having the same elements as the inline style definition) and then added said class to the input.
What happened is the button was rendered with the browser's default appearance settings instead of the ones i defined in a class.
I did some testing and ctrl+f in the css file to see if there we're any more specific css definitions for inputs but there we're none.
Then i copied the whole css into a file and i created a quick html pointing to that local stylesheet, putting just an input with my newly create class on the page to see if it had anything to do with wordpress.
On my local machine the class is applied to the button, but on wordpress it does nothing.
Does anybody know where does the problem comes from or can anybody suggest some possible hints into where i should look.
Thank you in advance.
If the code works outside of Wordpress but doesn't work inside of Wordpress, what led you to the conclusion that the problem lies with the browser overriding something? Isn't it infinitely more likely that something Wordpress is doing is causing the issue?
Inline styles have high specificity. By moving the CSS rules to an external stylesheet, you lowered its specificity. It's likely that Wordpress' CSS includes rules that conflict with yours, and have a lower specificity than your inline styles, but a higher specificity than the same rules moved to an external stylesheet.
To fix this you need to raise your rules' specificities. The quick hack fix for this is to use !important, but you should really figure out what you are conflicting with and address it by tailoring your CSS to match.
To answer your question title, yes browsers can override CSS but only if you wittingly installed a plugin/extension to do so (eg facebook themes), but by default the browser does not do so.
You could check if your Wordpress install or browsers has cached the page (you can delete/remove the cache to do so), I know this is an issue while editing PHPBB themes while live, but I suggest go all out, create a separate CSS file and new unique class name in it (avoid any confliction) and double check to be absolutely sure
i want to create some css styles for my Django templates. Each view will have a css associated, but there will be zones that are not associated to any views in my template.
How can i load the css files? is there enough having them declared in the Media of my view, and loading them in the header of the html?
Also, is it a correct approach to have styles associated to the divs that are not associated to a certain view?
Thanks!
If you use a word view for a typical django view (a method) it is not good idea to create separate css file for each view (unless you have very specific application).
In general you need to create you css files in such way that:
general styles that can be applied in many templates are not repeated in multiple css files
it is easy for you to manage styles in couple of css files
There is no strict guideline to create css file per view or css file per template in Django as far as I know.
Basically pointing to some css file in head, which contains styles appropriate to a template is enough here. Of course you need to make sure that you provide correct path to this file.
You can make one general css with styles that are used by most of your templates and a series of specific css files that are valid only in some specialized templates.
I also advice to take a look at django-compress if you want to go with your site to broader audience - this app makes your static files (like css) smaller and also it helps to concatenate group of css and js files. This has some positive impact on performance without decreasing readability of your code.
I'd been reading up on themes in my ASP.NET book and thought that it could be a very handy solution, then I met some problems.
The theme picks up every single CSS file in the folder
If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
How do you specify print stylesheets without having all styles in a single stylesheet?
I'm wondering as to whether they're actually worth using at all. Is there any benefit? Are there any major sites using them?
EDIT
Just to clarify slolife's last point. If I had two stylesheets, one called print.css and one called main.css and I used ASP.NET themes, how would it know that print.css was a print stylesheet? In regular HTML you use the media type in the tag itself (i.e. <link rel= ...>) but the themes wouldn't know this, so it would just get included as a regular stylesheet.
I like using themes, but as Raj pointed out in his answer, URL rewriting can cause problems. My search for some solutions to that is what led me to your question. But I'll add my opinions in anyway.
I'll address some of your bullets from above as to why I think themes are good:
- The theme picks up every single CSS file in the folder
I guess you are looking to apply only certain stylesheet files to certain pages. Yes, themes takes the shotgun approach here, so that's a problem. But you don't have to put all stylesheets in the the theme folder. Put your specialized ones outside of it and they won't be included automatically. But I think it is nice feature to have the common/site wide ones included automagically.
- If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
I think you can guarantee the order by the way you name the files, so they are numerically and alphabetically ordered. Maybe not an elegant solution, but not horrible.
Personally, I have a build step that combines and compresses all of the *.css files in my theme folder into one single style.css file, and since I control that build step and the order that the files are combined, that doesn't affect me.
- Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
You can change the theme via code and in the <%#Page directive
- Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
I agree that applying style attributes to controls via the theme doesn't seem to be a best practice. But I love the fact that I can define image skins in the theme's skin files and don't have to cut and paste Width,Height,AlternativeText,Align attributes for common images that I use lots of places throughout the site. And if I ever change one of those images, I can fix the attributes in one place, rather than all over. I also can created skinned controls with a certain list of css classes applied, which seems handy to me.
- How do you specify print stylesheets without having all styles in a single stylesheet?
I have a Print.css file that starts with #media print and that defines print styles for my site. Why do you need to put them in one stylesheet?
IMHO, asp.net themes are absolutely USELESS
try implementing url rewriting with an app which uses themes and see them break straight away
basically, you can achieve the same thing writing few lines of code in asp.net and multiple css folders. i am yet to come across any developer / company who has been using themes
when asp.net 2.0 was launched, there was a big hype around themes but my personal opinion is its simply not worth it :-)
Use themes to change control attributes ONLY.
They were bad designed for working with css.