How do I open the checkbox below the button instead of above the button? I tried everything but nothing works. I edit in wordpress wooocommerce at custom css. if someone could help me that would be great.
.yith-wapo-block {
display: none; /* make the block invisible by default */
}
#media only screen and (min-width: 992px) {
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
margin-left: 107px;
margin-top: -40px;
margin-right: 1px;
width: 208.5px;
}
}
#media only screen and (max-width: 991px) {
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
margin-left: 99px;
margin-top: -40px;
margin-right: 1px;
width: 208.5px;
}
}
#custom_button:active + .yith-wapo-block, #custom_button:focus + .yith-wapo-block {
display: block;
}
I tried that but it did not work
#custom_button {
background-color: #d26e4b;
color: white;
font-weight: bold;
width: 208.5px;
position: fixed;
top: 0;
}
I tried that but it did not work
.yith-wapo-block {
display: none; /* make the block invisible by default */
}
#custom_button:active + .yith-wapo-block, #custom_button:focus + .yith-wapo-block {
display: block;
margin-top: 20px;
}
How do I open the checkbox below the button instead of above the button? I tried everything but nothing works. I edit in wordpress wooocommerce at custom css. if someone could help me that would be great.
I'm trying to create two themes for my project. I have following setup:
styles
globals
mixins
helper
themes
Now every theme has an index.scss:
#import "../../mixins/index";
#import "./colors";
#import "./breakpoints";
#import "./typography";
#import "core";
And every theme has a _core.scss:
#if import-once('core.scss') {
:global {
html, body {
background-color: $grey-page-background;
height: 100%;
}
body {
color: $grey-text-primary;
font-family: $font-family-standard;
}
body.page-body.modal-overflow-hidden {
overflow: hidden;
}
.container {
padding: 0;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
width: 100%;
#include breakpoint(large down) {
padding: 0 10px;
}
}
.no-margin {
margin: 0 !important;
}
.text-center {
text-align: center;
}
.green {
color: $green-smava-primary;
}
a:focus, a:hover, a:active {
color: inherit;
}
/* vb = vertical align block, for supporting browser dont support flex-box well */
.vb {
text-align: left;
}
.vb:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
/* vc = vertical align center child, for supporting browser dont support flex-box well */
.vc {
display: inline-block;
vertical-align: middle;
}
.ui.list {
list-style-type: none;
margin: 1em 0;
padding: 0;
.item {
table-layout: fixed;
list-style-type: none;
list-style-position: outside;
padding: .21428571em 0;
line-height: 1.14285714em;
}
}
.ui.list.large {
font-size: 1.14285714em;
}
}
}
As you can see -> index imports core -> and now the theme is imported to the according component (we have a versioning system for components - so this approach is good here).
So a component scss can look like this then:
#import '~styles/theme/smava/index';
.dialog {
&-input {
margin: 0 0 10px 0;
}
&-action {
border-top: 1px solid $grey-shadow-block;
float: right;
}
&-button {
&-pass {
margin-right: 30px;
}
&-login {
margin: 0;
}
}
}
Since I have multiple components core.scss gets imported multiple times.
The problem is, that I need to set a color for the body - this is the reason I have this core.scss.
So how can i deduplicate this? The approach with importing the theme has to stay the same unfortunately.
My stack:
React/Webpack/Redux/Node-sass
My compiled CSS file is hosted locally via Centos5 / Docker on my Mac. And my Less and Css files are on assets/css/ folder.
Once I create less file and first compiled file shown perfectly.
But after I edit less file and compile or edit CSS file, my Chrome does not show my CSS file perfectly.
I trashed Chrome's cache file and opened by another browser (Chromium, Canary, Safari), there was no change.
I tried to serve this on PHP builtin Server on MACOS, it works normally. Think that Docker or CentOS's HTTP server is problem.
You can see actual codes and browser output codes...
Less Codes
#blue: #01569C;
#yellow: #FFE215;
#darkblue: #1A2450;
#socialicon: #54b2df;
#import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
body,div,nav,a,p,input {
font-family: 'Noto Sans KR', sans-serif;
color: #blue;
}
body {
background-color: white;
}
// Override Container
.container {
width: 100%;
margin: 0;
padding: 0;
#media (min-width: 1200px){
width: 1200px;
margin: 0 auto;
}
#media (max-width: 1199px){
width: 100%;
}
}
.navbar {
// width: 1200px;
margin: 0 auto;
background-color: white;
color: #blue;
}
.intro-video-container {
max-width: 854px;
margin: 0 auto;
#media(max-width:853px) {
width: 80%;
}
}
.intro {
// width: 1400px;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
* { margin: 0 auto; }
img {
display: block;
margin: 0 auto;
#media (max-width: 1000px) {
width: 100%;
}
}
}
.umr-intro-video {
margin: 10% auto;
}
.btn-social {
color: #socialicon;
}
.bgcircle {
background: #blue url('/assets/images/umr_teaser_2_bg.png') repeat-x top center;
}
.bggraph {
// padding-bottom: 124px;
background: #darkblue url('/assets/images/umr_teaser_5_bg.png') repeat-x bottom center;
}
.bgblue {
background-color: #blue;
}
.bgdarkblue {
background-color: #darkblue;
}
.bgyellow {
background-color: #yellow;
}
.bgwhite {
background-color: white;
}
Compiled CSS Codes
#import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);body,div,nav,a,p,input{font-family:'Noto Sans KR',sans-serif;color:#01569C}body{background-color:white}.container{width:100%;margin:0;padding:0}#media (min-width:1200px){.container{width:1200px;margin:0 auto}}#media (max-width:1199px){.container{width:100%}}.navbar{margin:0 auto;background-color:white;color:#01569C}.intro-video-container{max-width:854px;margin:0 auto}#media (max-width:853px){.intro-video-container{width:80%}}.intro{width:100%;margin:0;padding:0;overflow:hidden}.intro *{margin:0 auto}.intro img{display:block;margin:0 auto}#media (max-width:1000px){.intro img{width:100%}}.umr-intro-video{margin:10% auto}.btn-social{color:#54b2df}.bgcircle{background:#01569C url('/assets/images/umr_teaser_2_bg.png') repeat-x top center}.bggraph{background:#1A2450 url('/assets/images/umr_teaser_5_bg.png') repeat-x bottom center}.bgblue{background-color:#01569C}.bgdarkblue{background-color:#1A2450}.bgyellow{background-color:#FFE215}.bgwhite{background-color:white}
Browser Output
#import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
body,
div,
nav,
a,
p,
input {
font-family: 'Noto Sans KR', sans-serif;
}
body a,
div a,
nav a,
a a,
p a,
input a,
body a:visited,
div a:visited,
nav a:visited,
a a:visited,
p a:visited,
input a:visited,
body a:active,
div a:active,
nav a:active,
a a:active,
p a:active,
input a:active,
body a:hover,
div a:hover,
nav a:hover,
a a:hover,
p a:hover,
input a:hover {
color: #01569C;
}
body {
background-color: #01569C;
}
.container {
width: 100%;
margin: 0;
padding: 0;
}
#media (min-width: 1200px) {
.container {
width: 1200px;
margin: 0 auto;
}
}
#media (min-width: 768px) {
.container {
width: 100%;
}
}
.navbar {
margin: 0 auto;
background-color: white;
color: #01569C;
}
.intro-video-container {
max-width: 854px;
margin: 0 auto;
}
#media (max-width: 853px) {
.intro-video-container {
width: 80%;
}
}
.intro {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.intro * {
margin: 0 auto;
}
.intro img {
As you see, browser output is broken and shows previous saved version.
Where should I find the reason?
Without more detail it is isn't possible to definately answer your question.
There are a number of possible scenarios, that the server you're working on has caching enabled, in which case you have to work out a strategy for cache busting.
Here's a good article on the subject:
CSS Tricks: Strategies For Cache Busting
Or it could be that your code is not deploying to server when uploading.
If your project is currently in active development, I would recommend that you look into setting up a local development environment, either by configuring a LAMP stack on your development machine, OR using one of the free Software packages like XAMPP or MAMP, once your project is ready for development then deploy it to your server.
(Posted on behalf of the OP).
I stopped using CentOS on Docker and installed Ubuntu 14 on Docker. And configured same setting and it worked.
i'm working on this website http://josedelavega.nowcommu.myhostpoint.ch/
The homepages is pretty fine, but when i add content into others subpages this does not works. Looks like hidden. Ther's something wrong into the code? I just modified the template (http://themeforest.net/item/orquidea-responsive-wordpress-theme/5120180) adding this CSS rules:
.logo { float: right; margin-top: -8px !important; margin-right: 70px; }
nav#topmenu ul li { font-size: 15px; }
nav#mobilenav .logo { float: left; margin-right: 0px !important; }
.sectionboxtitle { display: none !important; }
.bodyfont { display: none !important; }
.descrtext { padding-top: 10px; }
.skinselector { display: none; }
This hides subpage content:
.sectionboxtitle {
display: none !important;
}
If you just want it to be hidden on the start page I'd recommend something like this:
.home .sectionboxtitle{ display: none;}
I have a class for a button:
.client-header button {
/*Properties*/
}
and a class to detect when the menu is open:
.client-menu-open {
/*Properties*/
}
I would like to change the button background based on whether or not the menu is open. I want something like this:
.client-header button .client-menu-open {
/*Properties*/
}
But the classes are in two different files, so it doesn't work. Is there any way to do this across different files?
Here is the code for the header index.css:
#import url('../menu/index.css');
.client-header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--header-height);
overflow: hidden;
border-bottom: 1px solid #7E7E7E;
background: #cccccc;
}
.client-header button {
float: left;
height: 100%;
border: none;
border-right: 1px solid var(--border-color);
border-radius: 0;
box-shadow: none;
line-height: 39px;
background-color: #444444;
color: #FFF;
}
.client-header button:hover {
background-color: #555555;
}
.client-header button:active {
background-color: #4E4E4E;
}
.client-header-caption {
float: left;
}
.client-header-title,
.client-header-subtitle {
margin-left: 10px;
}
.client-header-title {
line-height: 25px;
}
.client-header-subtitle {
font-size: 0.5rem;
line-height: 15px;
}
#media (min-width: 640px) {
.client-header-title,
.client-header-subtitle {
display: inline-block;
line-height: var(--header-height);
}
.client-header-title {
font-size: 1.5rem;
}
.client-header-subtitle {
font-size: 1rem;
}
}
.client-header .client-menu-open button {
background: #CCCCCC;
}
And here is the code for the menu index.css:
.client-menu {
position: absolute;
top: var(--header-height);
bottom: 0;
left: -var(--menu-width);
width: var(--menu-width);
border-right: 1px solid var(--border-color);
padding-bottom: var(--menu-footer-height);
overflow: hidden;
transition: left 0.2s;
}
.client-menu-open {
left: 0;
box-shadow: 0 0 30px var(--shadow-color);
background: #444444;
}
.client-menu-pinned {
box-shadow: none;
}
.client-menu-header {
height: var(--menu-header-height);
text-align: right;
background-color: #444444;
}
.client-menu-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: var(--menu-footer-height);
text-align: right;
}
And the HTML structure is:
<header class="client-header">
<button class="client-header-menu-toggle"/>
</header>
<div class="client-menu"/>
You can use #import like so (in your primary CSS stylesheet):
#import url('external.css');
/* external.css above will be loaded */
Refer to this documentation: http://www.cssnewbie.com/css-import-rule/
Link to the other file and style .client-menu-open
if this is your html
<div class="client-menu-open"> <!-- this class is here only if the menu gets opened, else, this div has no class -->
stuff
stuff
<div class="client-header-button">
<button></button>
</div>
</div>
the correct syntax is the following
button {
background:red;
}
.client-menu-open button {
background:blue
}
The #import rule allows you to include external style sheets in your document. It is a way of creating a style sheet within your document, and then importing additional rules into the document.
To use the #import rule, type:
<style type="text/css">
#import url("import1.css");
#import url "import2.css";
</style>
For more info refer here https://developer.mozilla.org/en-US/docs/Web/CSS/#import
your CSS selector is incorrect, that's why it doesn't work. It has nothing to do with where CSS styles are defined.
.client-header button .client-menu-open will only select the following elements:
elements with class="client-menu-open"
which are children of button elements
which themselves are children of elements with class="client-header"
.
what you want, I think, is
button elements
which are children of elements having "class=client-header" AND "class=client-menu-open".
the proper selector for those elements would be .client-header.client-menu-open button.