I am trying to create a theme for OpenCart v3 and like its default theme I am also using bootstrap framework. There are no files with SCSS/SASS extension but every time I refresh the page it looks into bootstrap.min.css file and somehow breaks it down into scss files and compiles it again. Due to this the default bootstrap over rides all my styles.
I remember I once accidentally clicked the scss clean cache button but this does not mean I allowed it to keep on breaking and recompiling bootstrap again and again even the scss make cache option is on.
It comes up with these kind of links.
Here is a sample to explain the problem copied from inspect element about having no border radius anywhere on the theme:
// ...opencart/catalog/view/javascript/bootstrap4/css/bootstrap.min.css
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: #212529;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.15);
border-radius: .25rem;
}
// .. opencart/catalog/view/theme/alpha/stylesheet/theme.css
.dropdown-menu, * {
border-radius: 0;
}
How can I stop scss compiler permanently? or on the other hand if I prefer to write my own Scss file instead of CSS then will OpenCart compile that too for the development phase of do I need to use terminal for that as I always do?
Found the following code in OpenCart but I don't understand this:
class ControllerStartupSass extends Controller {
public function index() {
$file = DIR_APPLICATION . 'view/theme/' . $this->config->get('theme_directory') . '/stylesheet/bootstrap.css';
if (!is_file($file) || (is_file(DIR_APPLICATION . 'view/theme/' . $this->config->get('theme_directory') . '/stylesheet/sass/_bootstrap.scss') && !$this->config->get('developer_sass'))) {
include_once(DIR_STORAGE . 'vendor/scss.inc.php');
$scss = new Scssc();
$scss->setImportPaths(DIR_APPLICATION . 'view/theme/' . $this->config->get('theme_directory') . '/stylesheet/sass/');
$output = $scss->compile('#import "_bootstrap.scss"');
$handle = fopen($file, 'w');
flock($handle, LOCK_EX);
fwrite($handle, $output);
fflush($handle);
flock($handle, LOCK_UN);
fclose($handle);
}
}
}
Just turn off SASS and theme cache:
Go to admin panel
Click the blue button with gearwheel
Click "off" buttons
And clear cache
Related
By default, CK-Editor adds the resetting CSS classes like ".ck-reset":
.ck.ck-reset, .ck.ck-reset_all, .ck.ck-reset_all * {
margin: 0;
padding: 0;
border: 0;
background: transparent;
text-decoration: none;
vertical-align: middle;
transition: none;
word-wrap: break-word;
}
What if I don't wish these classes? Which option is corresponding to disabling of CSS resetting classes?
There are a few ways you can try to solve this (copied from the GH issue below):
A custom PostCSS plugin that replaces all .ck-reset statements with :not(.some-component) .ck-reset to disable CKEditor 5 reset in your component.
Package.json level script that replaces the _reset.css files with your own css file with the not(.some-component)
Wait for the issue to be resolved, per - https://github.com/ckeditor/ckeditor5/issues/3424
I am using the built in Laravel 5.2 pagination with the ->render() function to output the pagination links. I need to add a class to the next and previous links in order to style them. Is there a simple way to do it?
If you want to change pagination links style just a little bit (for example, just change some colors), easiest way to do that is overriding some of the pagination related CSS classes. For example, you can add this code to your CSS file and see how links style will be changed:
.pagination>li>a, .pagination>li>span {
color: #6db91c;
border: 1px solid #000;
}
.pagination>li>a:hover, .pagination>li>span:hover, .pagination>li>a:focus, .pagination>li>span:focus {
color: #fff;
background-color: #6db91c;
border-color: #6db91c
}
.pagination>.active>a, .pagination>.active>span, .pagination>.active>a:hover, .pagination>.active>span:hover, .pagination>.active>a:focus, .pagination>.active>span:focus {
z-index: 2;
color: #fff;
background-color: #6db91c;
border-color: #6db91c
}
.pagination>.disabled>span, .pagination>.disabled>span:hover, .pagination>.disabled>span:focus, .pagination>.disabled>a, .pagination>.disabled>a:hover, .pagination>.disabled>a:focus {
color: #000; background-color: #fff; border-color: #000; cursor: not-allowed
}
If you don't want to do that for some reason, you can create custom pagination.
for front end css framework like i use bulma i simply create jQuery Dom select pagination child li and add class pagination-link example
$(document).ready(function(){
// Setting Pagination Bulma Class
$('.pagination>li').addClass("pagination-link");
});
I have created a personal WEB API using Swashbuckle and Swagger API.
While I am able to integrate this successfully, I would like to modify the default UI for Swagger. Changing the color of the header and replacing the swagger image.
Is this possible by modifying existing files?
These are the steps I took:
Create a new file SwaggerHeader.css
Right click on SwaggerHeader.css, select Properties. Set Build action to Embedded Resource.
In SwaggerConfig.cs, add the below line of code:
EnableSwaggerUi("Document/{*assetPath}", c =>
{
c.InjectStylesheet(typeof(SwaggerConfig).Assembly,
"ProjectName.FolderName.SwaggerHeader.css");
}
SwaggerHeader.css looks like the below:
/* swagger ui customization */
body.swagger-section #header {
background-color: white;
background: url(your-new-logo.png) no-repeat;
background-position-x: 250px;
height: 50px;
}
body.swagger-section #header .swagger-ui-wrap #logo {
display: none;
}
First step is to add a new css file in your project, with your custom rules.
For example :
.swagger-section #header { background-color: #fadc00; }
Right click on the new file and go Properties. In "Build Actions" select "Embedded Ressources".
Inside the SwaggerConfig file, inject the stylesheet. The resource name should be the "Logical Name" for the resource. That is where I got stuck, but thanks to this Swashbuckle doc I could infer the logical name following the rule :
Default Namespace for your project "dot" folder containing the resource "dot" file name with extension.
It's based on the Project's default namespace, file location and file
extension. For example, given a default namespace of
"YourWebApiProject" and a file located at
"/SwaggerExtensions/index.html", then the resource will be assigned
the name - "YourWebApiProject.SwaggerExtensions.index.html"
For example :
.EnableSwaggerUi(c =>
{
c.InjectStylesheet(thisAssembly, "Some.Default.Namespace.App_Start.swagger.css");
});
Startup
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
app.UseStaticFiles();
.....................
.....................
app.UseSwagger();
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "API V1");
c.InjectStylesheet("/css/swagger-custom.css");
});
}
Swagger custom css
img[alt="Swagger UI"] {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
content: url('../images/logo.png');
max-width: 100%;
max-height: 100%;
}
.swagger-section #header {
background-color: #fff !important;
}
.swagger-ui .topbar {
padding: 10px 0;
background-color: #fff !important;
border-bottom: 1px solid #dee2e6 !important;
}
.swagger-ui .topbar .download-url-wrapper .select-label {
display: flex;
align-items: center;
width: 100%;
max-width: 600px;
margin: 0;
color: #121416 !important;
}
To change the color, you can inject a new stylesheet
Qoute from the SwaggerConfig.cs file
Use the "InjectStylesheet" option to enrich the UI with one or more a dditional CSS stylesheets.
The file must be included in your project as an "Embedded Resource", and then the resource's
"Logical Name" is passed to the method as shown below.
c.InjectStylesheet(containingAssembly,"Swashbuckle.Dummy.SwaggerExtensions.testStyles1.css");
Remember to set Build Action of the stylesheet to "Embedded Resource".
Alternativelly, I have created a custom.css in my wwwroot folder and just added
options.InjectStylesheet("/custom.css");
and it worked as well.
I make a site in magento 4wayshop.in , Now I add image in menu Like Watches , shoes bcz many of blank space in menu. How i do it please help me. Please open the 4wayshop.in and see it.
If you want to reduce Menu width according to items/links in submenu then you can update CSS thing from:
http://4wayshop.in/skin/frontend/default/ma_pharmacy/css/wide_menu.css
Line 24: .wine_menu .container {
width: auto; /* in stead of width:100% */
padding: 1px;
padding: 3px 0 0;
position: absolute;
left: 0;
top: 41px;
display: none;
OR
You need to override topmenu block, follow below step to add category images in menu.
Copy: app\code\core\Mage\Page\Block\Html\Topmenu.php
Paste to: app\code\local\Mage\Page\Block\Html\Topmenu.php
Then open app\code\local\Mage\Page\Block\Html\Topmenu.php file and edit protected function _getHtml function to add category image into menu.
Hope will help!
In Sass, I can't quite discern the difference between using #include with a mixin and using #extend with a placeholder class. Don't they amount to the same thing?
Extends do not allow customization, but they produce very efficient CSS.
%button
background-color: lightgrey
&:hover, &:active
background-color: white
a
#extend %button
button
#extend %button
Result:
a, button {
background-color: lightgrey;
}
a:hover, button:hover, a:active, button:active {
background-color: white;
}
With mixins, you get duplicated CSS, but you can use arguments to modify the result for each usage.
=button($main-color: lightgrey, $active-color: white)
background-color: $main-color
border: 1px solid black
border-radius: 0.2em
&:hover, &:active
background-color: $active-color
a
+button
button
+button(pink, red)
Results in:
a {
background-color: lightgrey;
border: 1px solid black;
border-radius: 0.2em;
}
a:hover, a:active {
background-color: white;
}
button {
background-color: pink;
border: 1px solid black;
border-radius: 0.2em;
}
button:hover, button:active {
background-color: red;
}
Please follow this consecutive set of code examples to see how you can make your code cleaner and more maintainable by using extends and mixins effectively: http://thecodingdesigner.com/posts/balancing
Note that SASS unfortunately does not allow using extends inside media queries (and corresponding example from the above link is wrong). In the situation where you need to extend based on media queries, use a mixin:
=active
display: block
background-color: pink
%active
+active
#main-menu
#extend %active // Active by default
#secondary-menu
#media (min-width: 20em)
+active // Active only on wide screens
Result:
#main-menu {
display: block;
background-color: pink;
}
#media (min-width: 20em) {
#secondary-menu {
display: block;
background-color: pink;
}
}
Duplication is inevitable in this case, but you shouldn't care too much about it because web server's gzip compression will take care of it.
PS Note that you can declare placeholder classes within media queries.
Update 2014-12-28: Extends produce more compact CSS than mixins do, but this benefit is diminished when CSS is gzipped. If your server serves gzipped CSS (it really should!), then extends give you almost no benefit. So you can always use mixins! More on this here: http://www.sitepoint.com/sass-extend-nobody-told-you/
A good approach is to use both - create a mixin that will allow you lots of customisation and then make extends for common configurations of that mixin. For example (SCSS Syntax):
#mixin my-button($size: 15, $color: red) {
#include inline-block;
#include border-radius(5px);
font-size: $size + px;
background-color: $color;
}
%button {
#include my-button;
}
%alt-button {
#include my-button(15, green);
}
%big-button {
#include my-button(25);
}
This saves you from calling the my-button mixin over and over. It also means you don't have to remember the settings for common buttons but you still have the ability to make a super unique, one-off button should you choose.
I take this example from a blog post I wrote not long ago. Hope this helps.
In my opinion extends are pure evil and should be avoided. Here is why:
given the scss:
%mystyle {color: blue;}
.mystyle-class {#extend %mystyle}
//basically anything not understood by target browser (such as :last-child in IE8):
::-webkit-input-placeholder {#extend %mystyle}
The following css will be generated:
.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers
color: blue;
}
When a browser doesn’t understand a selector, it invalidates the entire line of selectors. This means that your precious mystyle-class is no longer blue (for many browsers).
What does this really mean? If at any time you use an extend where a browser may not understand the selector every other use of the extend will be invalidated.
This behavior also allows for evil nesting:
%mystyle {color: blue;}
#mixin mystyle-mixin {#extend %mystyle; height: 0;}
::-webkit-input-placeholder {#include mystyle-mixin}
//you thought nesting in a mixin would make it safe?
.mystyle-class {#extend %mystyle;}
Result:
::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers
color: blue;
}
::-webkit-input-placeholder {
height: 0;
}
Tl;dr: #extend is perfectly ok for as long as you never use it with any browser spesific selectors. If you do, it will suddenly tear down the styles wherever you have used it. Try to rely on mixins instead!
Use mixins if it accepts a parameter, where the compiled output will change depending on what you pass into it.
#include opacity(0.1);
Use extend (with placeholder) for any static repeatable blocks of styles.
color: blue;
font-weight: bold;
font-size: 2em;
I totally agree with the previous answer by d4nyll. There is a text about extend option and while I was researching this theme I found a lot of complaints about extend, so just have in mind that and if there is a possibility to use mixin instead of extend, just skip extend.