I am trying to customize a theme of BigCommerce. The problem is this theme is using SASS (.scss) files instead of css. I have basic knowledge of SASS.
But I need to customize theme according to html template. In other word you can say I am trying to convert html template into a theme (free theme that is downloaded from market).
Issue there is that, html template is using CSS and theme uses .SCSS. So right now I am trying to find way to add css of template into theme.
Right now I am finding way to embed my css into theme and here are few things that I have tried
I tried to directly add CSS into .SCSS file like this
.header-logo-text{color:#ffffff!important;}
The above css code which I am typing in theme.scss file (just for testing purpose) to check whether writing css in .scss file will take any effect or not, But this way it didn't change font color!
In a second way I tried to add css in html tags using style like this
<div class="anyclass" style="background:red;">
This way its picking up css.
I have created online store on bigcommerce site and trying to customize from customize option oprovided by bigcommerce. Since I couldn't see any upload file option through which I can directly upload my css files into it, thats why trying to somehow add css in current files of theme either in html or in .scss.
And not a single css file is present in theme, how I can add my css into that theme?
SASS with the .scss syntax is a superset of CSS. That means valid CSS is automatically valid SASS (not in the other syntax .sass though). Of course you need to make sure you're SASS file gets compiled and included.
TL;DR: you can use CSS inside .scss files.
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.
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.
I am using a wordpress theme and it has both style.css and style.scss. I want to make changes in the styling and I was wondering which file I need to edit? Both, style.css or style.scss?
Thanks in advance.
Information Sass
CSS on its own can be fun, but stylesheets are getting larger, more
complex, and harder to maintain. This is where a preprocessor can
help. Sass lets you use features that don't exist in CSS yet like
variables, nesting, mixins, inheritance and other nifty goodies that
make writing CSS fun again.
Once you start tinkering with Sass, it will take your preprocessed
Sass file and save it out as a normal CSS file that you can use in
your web site.
Answer
You need to edit the style.scss and then generate the style.css.
Once you started using sass oder less you'll never go back to css or regret it!
Learn how to Sass here.
An here is Software to generate the scss/less File.
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.)
The problem is like this:
We're trying to implement a versioning scheme for our CSS and wherever we have accessed CSS through href (like \themes\ssss\abc.css) we append this link with a build number programatically (such as \themes\ssss\abc.css?1011) so that with new build the client gets the latest css files.
The problem is coming in themes. For e.g. under App_Themes we created a theme folder with the name MyTheme; now wherever this theme is used we need the CSS for this theme to be replaced by latest build files. How to do that?
why don't you create a new theme folder on each build/deploy?
Something similar to \themes\ssss-1011\abc.css.
Add some extra hash to your css url ("#somethingnew"). You can also you tools like SquishIt. It also can minify you css/js files.