How to make changes in wordpress template. Css direct edit not working - css

I want to make small changes in wordpress template css, but despite I change desired values (for instance font-height), changes are not applied on actual page(I've tried multiple browsers, cleaned browser and wordpress cache...).
I've noticed that this theme is using Redux framework, so it seems that this "cause" this problem with all these changes.
I would not mind to delete this (or any other) framework and make all my custom changes directly with css, but I'm not sure how to do it properly.
I have knowledge of html & css, but not wordpress system.

try using this plugin :
Simple Custom Css

Related

Is there a way I can create (and update) a stylesheet using 2sxc and razor template?

DNN 9.3.2 / 2sxc 10.25.2
I have a DNN theme that I use for a certain type of subportal - I will have 8 subportals ultimately. Each subportal has the same layout, but they will have different colours in their respective theme. So I will have to create a stylesheet with the CSS rules and the colours for each theme. I know there is a couple of relatively simple ways I can do this:
Modifying the portal.css of each portal to override the theme or (simple but might be hard to maintain updates)
Building a custom theme for each portal (overkill)
Using SCSS to create a template with 8 different variable files (works fine but doesn't allow modifications by the Content Editors)
So, I'm curious if there's a more clever way through 2sxc that makes it easy for not only me to maintain, but also my portal's Content Editors.
I want to create 2sxc Content module with a few different fields for colour pickers that will allow me (and my content editors) to simply open up the 2sxc edit modal (on the homepage), fill out all the colour fields, and then a razor template will output the CSS template with the colours to override the theme styles on the DNN skin. I know I can do this with inline CSS but that would mean the module would have to appear on every page, and I'd also prefer to avoid inline CSS.
So my idea is that it would work like this:
Have a 2sxc Content module on a single page on each portal
Edit modal > the fields would be something like: primary colour (rgba), secondary colour (rgba), grey colour (rgba), etc
Once save is clicked, the template modifies a portal-level theme.css file which is loaded by the skin
Any changes to the module would result in a rewrite of the CSS file.
I could update the c# razor template to add, remove, or modify rules or transform the values of the input.
Is this possible or is it too complicated? Is there a better way of going about this?
So I've been away for a long time, I hope my answer will still help...
We have a very simple solution :). If you check out bootstrap instant template you'll see that we add various classes to the <body> tag.
https://github.com/2sic/dnn-theme-bootstrap4-instant/blob/master/controls/body-css-classes.ascx#L86-L91
That way we can just use normal CSS of the theme with rules based on portal-27 etc. to vary by portal.

Wordpress doesn't apply CSS changes

I was creating a custom template for a wordpress webbsite and for the first time after I add new classes in the style.css and I apply the changes, the website doesn't save them. I tried many times to delete the cache and change browser but nothing. When I open the style sheet from wordpress ACP I can see the changes but from google chrome with the webmaster tool I see nothing, like it shows the old css version. I am using WP Super Cache also.
Anyone knows the solution?
Adding a query killer at the end of the css file might also override any possible caching mechanisms.
Ie: example.com/style.css should be accessed via example.com/style.css?test

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/

Prestashop smart cache for css mess up site

When I enable smart cache for css, prestashop frontend will be messed up totally, like only using some of the css.
However, I can see there is all my custom css rules, also blocks and modules in that same file, but I can't understand why it messes it up so bad. Basically its just html dumped together with float effects when I enable it.
It it better to look for other css compiler/minifier and not to use prestashop one? is this general issue ?
Site works perfectly fine after I disable it again...
Using prestashop 1.6.1.6
Any idea how to debug ?
This is not a general issue, this must be happening because of the custom theme that you are using on your store.
You can try removing the theme specific cache from the following directory:
/themes/YOUR_THEME/cache/
You may refer to the following link as well if you have upgraded from 1.6.1.4 to 1.6.1.5 recently.
https://www.prestashop.com/forums/topic/520452-update-from-1614-to-1615/page-2

Django CMS, per page CSS Styles

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.

Resources