Really simple answer possible but I've not had the chance to work with SASS yet and especially not in Wordpress so bear with me.
I'm working on a site that has been developed in Wordpress and need to make some edits to the CSS (just increase an element's min-height from 54px to 64px at the moment). It has been done using SASS and folders have been set up for the partials and imported via a main.scss.
Where I've got stuck is that I don't understand what I need to change or action to make the _general.scss file (imported via main.scss and in a folder) compile to update the style for this element. I've changed the value from 54px to 64px as it has saved in the _general.scss but this isn't reflected via the browser (if you view the actual scss page) hence it doesn't update the style.
I know I need to recompile it some how ...but how?
Sorry in advance for what is a newbie question from an experienced coder! (embarrassing!)
You do not necessarily need to edit the CSS of the template. You always have other options at your disposal.
you can either create a child theme and make changes in it
you can also create a custom style sheet and import the main stylesheet in your style sheet and put your code into your stylesheet
or you can simply download a plugin which will allow you to put your custom css in the backend of wordpress and the plugin will import the custom css in the end of the main css file.
Following is a link to a plugin that will give you a window to add your custom css into:
https://wordpress.org/plugins/simple-custom-css/
Please use this and do not get messed up with SASS.
Related
I've got a local server set up and i've been editing the CSS of my child theme in Dreamweaver. I've now seen, through the WordPress dashboard, the additional CSS area and the Appearance > Editor.
What's the difference between them and do I need to choose one and stick to it? I was testing some code in the additional CSS box and then erased it but now the stuff i'm writing in Dreamweaver isn't updating when i view my site through the WordPress dashboard.
Thanks
Custom CSS allows you to add your own styles or override the default CSS of a plugin or theme.
And CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.
If your newly added style rules doesn't seem to work you need to need to perform some troubleshooting steps
Scan your style file for missing ";" which can prevent following style
rules from being recognised.
Use inspect feature of your browser check for conflicts , style rules that override the css that doesn't work.
Test from a different browser and make sure that the css file loaded in your browser is the correct version not a previously cached one.
Here is a useful reference https://codex.wordpress.org/CSS_Troubleshooting
Also read about css priority and specificity rules.
you can use "!important" as a quick fix but it is not considered as a good practice.
Customizer settings are stored in the database and loaded after the main styles, lastly loaded rules override same previous rules if it has higher spesifisity.
I am working on theme changer with angularjs and I can't seem to find a way how to replace one sass file with another (both of them contains variables) when user changes his theme. I know that when sass is compiled to css the variables are gone. Is there a way to switch up those files and recompile whole css? I have managed to find that it should be somehow possible to do by calling server to recompile css, but I couldn't find more information. Thank you.
One way we are doing these things is having multiple files for different themes. Example content =
variables ...
primary: '#smtng'
.themeName{
.header{
background-color: primary
}
}
And in your app.html you can add class to your html tag which will represent themeName. You can hold theme name in some storage and load it from there.
Basically you are loading all themes, but only rendering css for active theme
Can't style my menu css,i tried to change in master-ccda(my site www.blobus.on.kg)It helps for 5 minutes than changed back.Please help me to find place where i can change it.
You use a rocketheme/gantry template. Your website has compression/caching enabled for the css. This is enabled either by the template settings or another compression/caching system plugin. Therefore what you get as a final css file, is a dynamically generated compressed css file. Any edits you are doing on this file are getting lost, as soon as the system will generate a new final master.css file.
You need to disable these functions while you are building your website. Doing so will stop the compression of all the css files into one and you will see what rules and from which files your menu and other elements/sections of your website inherit their styles.
In addition keep in mind that it is best to avoid making changes on the core files of your template/extensions.
Gantry templates allow you to create a custom css file where you can put your own css overrides.
The custom css file need to be place inside the css folder of your template and usually needs to have a name of this convention: rt_templatename-custom.css.
I was able to create a Wordpress theme that I am working on, using my local machine. The issue I am having is incorporating Sass into the Underscores Starter theme, with Twitter Bootstrap's Sass and Wordpress.
I was creating the fixed-top bootstrap navigational bar. I managed to add the proper code to include WP_Walker_Nav in my functions.php file, but this is what my navigation looked like My Bootstrap Nav.
The content is too close to the fixed-top navigation and I wasn't able to control the body tag styles to provide padding of at least 60px from the top.
I was wondering if someone can guide me in the direction on how to incorporate Twitter Bootstrap's Sass and Font-Awesome's Sass into Underscore's Wordpress theme.
I'm struggling with the proper workflow. For my Wordpress default style.css, all I would do is put
#import url("css/style.css");
underneath Wordpress Stylesheet default comments.
I have a folder labeled sass (for all my scss files) and a folder css (for all my compiled css). In my style.scss, I import bootstrap and font-awesome's sass files, and I create a separate scss file (main.scss) to use for my custom styling, but nothing works when I create a variable in my main.scss file.
I would set my style.scss file like this:
#import 'main';
#import 'bootstrap-sass';
#import 'font-awesome';
For example:
$padding10: 10px;
body {
padding-top: ($padding10 * 6)
}
nothing happens when I set up my body tag. Please tell me what I am doing wrong, any help is appreciated. Thank you!
For those wondering about how to do this: the _S Underscores theme added direct support for generating a starter theme with a sass-based architecture last year, which I only recently found out about. If you click the “Advanced Options” link on the Underscores main page, you can then select the _sassify! option and you’re on your way. From there, it should be clear to you how to wire in Bootstrap. The generated sass/styles.scss file in your new theme is a very well organized and documented list of imports, to which you can add Bootstrap however you wish (via Bower, direct download, whatever).
As a side note, you can automate this and make it even easier via wp-cli, which very recently added support for the sassify option to their wp scaffold _s subcommand, which looks something like:
wp-cli scaffold _s my-sassy-theme --theme_name="My Sassy Theme" --sassify
(Note that as of this writing, there hasn’t been a release of wp-cli with that feature; you can use it immediately, however, by installing the wp-cli nightly.)
I'm running into a bit of a problem with my search plugin CSS. It doesn't apply some of the CSS rules I placed on /plugin/searchable/webroot/css/searchable_style. I think it is being overridden by the cakephp default CSS which I used with my application. Should I edit the generic css for my application or there's a way to bypass the generic CSS then apply what's on /plugin/searchable/webroot/css/searchable_style? I also tried
css('/searchable/css/searchable_style'); ?>
and put it on every view and it worked but not all.
Thank you,
Lyman
Place your css file *searchable_style* to webroot/css folder: then use it in app/views/layouts/default.ctp (if you have) OR include this line to your home or landing layout
echo $this->Html->css('/searchable/css/searchable_style');
This will definitely work. but if you rename the plugins folder to plugin as your question, then it will cause problem. Please check all folder naming and retry.