Related
I'm running an email ticket system. This does list various html-emails, each one inside its DIV. Thus, the DIV does contain html code with its own css styles. My problem is that these css styles do overwrite the appearance of the overall website. Is there a solution that the css styles in these emails / inside the DIV can be isolated in order to not affect the rest of the website?
<html>
<head>
<link rel="stylesheet" href="https://www.myserver.com/assets/css/custom.css">
.......
</head>
<body>
<div>
some content
</div>
<div class="container clientmail>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<style type="text/css">
p{margin:10px 0;padding:0;}
… lots more of styles …
</style>
</head>
<body>
… the message …
</body>
</html>
</div>
</body>
</html>
.clear,
.clear_both {
clear: both
}
#ul_attachment_list,
.ul-attachments,
ul.editticket-ul {
list-style: none!important
}
body {
font-size: 12px!important
}
.h2,
h2 {
font-size: 20px!important
}
.h3,
h3 {
font-size: 12px!important
}
.nav>li>a {
font-size: 14px!important;
font-weight: 500!important
}
p {
margin: 0 0 2px!important
}
.container {
width: auto!important;
max-width: 98%!important;
margin-bottom: 20px;
margin-left: 20px!important;
margin-right: 20px!important
}
.header {
padding: 5px 15px!important
}
.clientmail {
/* max-width: 95%!important;*/
margin-right: 40px!important;
}
.clientmail .content {
/*all: initial; /* blocking inheritance for all properties */
/*all: unset; /* allowing inheritance within #mydiv */
}
.clientmail .content * {
/*all: initial; /* blocking inheritance for all properties */
}
/* To the Developer:
// ---------------------------------------------------------------------------------
// <div class="container clientmail "> .... <div class="content"> is used to display html emails which have their own stylesheet. This stylesheets do affect the aperance of the rest of the page.
// Is there a way to isolate this stylesheet in order that they do not afect anything outside the div?
// ---------------------------------------------------------------------------------
*/
.adminmail {
/* max-width: 95%!important;*/
margin-left: 40px!important
}
.adminmail .panel-heading {
background: #ddd!important
}
.sec1 {
background: #F8F8F8;
min-height: 50px
}
.sec1 .navbar.navbar-inverse {
background: #F8F8F8!important;
border: 0!important
}
.sec2 .navbar.navbar-inverse {
background: 0 0!important;
border: 0!important
}
.sec2 .container {
border: 1px solid #ddd;
padding-left: 10px;
padding-right: 10px;
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
border-radius: 4px
}
.lstsec .panel-heading,
.sec3 .panel-heading {
color: #333;
background-color: #f5f5f5;
border-color: #ddd
}
.sec3 .container {
padding: 0!important
}
.sec4 {
margin: 5px 0
}
.panel-body,
.panel-heading {
padding: 2px 15px 1px!important
}
.clientmail .panel-body,
.adminmail .panel-body {
height:auto;
/* max-height:150px; */
overflow:scroll;
resize:vertical;
}
.header>.pull-right,
.panel-heading>h2>.pull-right {
margin-top: -3px!important
}
.well {
margin-bottom: 10px!important
}
.attachmentslist>ul {
margin-left: -15px
}
.lstsec .table {
margin-top: 20px
}
.formsec {
background-color: #F5F5F5;
padding: 9px;
border-radius: 3px;
border: 1px solid #e3e3e3;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
margin-top: 0!important;
margin-bottom: 2px!important
}
.form-group {
margin-bottom: 8px!important
}
.adminmail>form>.form-group {
margin-top: 10px!important
}
.form-control {
padding: 2px 2px 2px 5px!important
}
input.form-control,
select.form-control {
height: auto!important
}
input[type="file"] {
display: inline!important;
overflow:hidden;
margin-left: 20px;
}
textarea.form-control {
min-height: 100px!important
}
textarea.single_line {
display: block;
width: 100%;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
font-size: 14px;
padding: 2px 2px 2px 5px
}
.form_field_label {
display: inline-block;
min-width: 120px;
font-weight: 600
}
.display_none,
i.icon-mergetickets,
i.syncemail-icon {
display: none
}
.navbar {
margin-top: 12px!important;
margin-bottom: 10px!important
}
.btn {
padding: 3px 10px!important
}
.btn-primary {
min-width: 140px;
}
table.dataTable thead td,
table.dataTable thead th {
padding: 2px 4px!important
}
table.dataTable tbody td,
table.dataTable tbody th {
padding: 4px 2px 2px 16px!important
}
table.dataTable td:first-child{
padding: 2px 2px 2px 2px!important;
}
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_desc_disabled {
padding-left: 16px!important;
background-position: center left!important
}
.dataTables_filter {
padding-top: 6px!important;
padding-bottom: 6px!important
}
.dataTables_length {
padding-top: 10px!important;
padding-bottom: 10px!important
}
#dataTable tr {
cursor: pointer
}
.fixed_date_time_width{
width:98px !important;
}
.list-group-item {
padding: 6px 12px !important;
}
.modal-body .list-group-item {
max-height:46px;
overflow:hidden;
}
.hading>h2 {
margin-top: 10px!important;
margin-bottom: 2px!important
}
.h1,
.h2,
.h3,
h2,
h3 {
margin-top: 5px!important;
margin-bottom: 5px!important
}
label {
margin-bottom: 1px!important
}
.deleted {
text-decoration: line-through
}
.deleteitsmall {
margin-left: 20px;
padding: 0 6px!important;
font-size: 12px!important;
background-color: #F66!important
}
table.archived-list tbody tr:hover,
table.templates-table tbody tr:hover,
table.ticket-list tbody tr:hover,
ul.single-list-group>li:hover {
background-color: #eee!important
}
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9 {
padding-right: 0!important;
padding-left: 0!important
}
.col-50p {
width: 50%;
float: left;
position: relative
}
h5.archived-list-h5,
h5.ticket-list-h5 {
position: absolute;
right: 360px;
z-index: 9999;
float: right;
margin-top: -25px;
}
#mergeTicket{
margin-right: 40px!important;
}
.col-50p:first-child {
padding-left: 0;
padding-right: 15px
}
.col-50p:last-child {
padding-left: 15px;
padding-right: 0
}
.description_text {
width: 100%!important
}
.price {
max-width: 80px;
text-align: right;
margin-left: 8px
}
.percent {
display: inline !important;
max-width: 40px;
text-align: right;
margin-left: 8px
}
table.archived-list tr td.archived-list-td1,
table.ticket-list tr td.ticketlist-td1 {
text-align: left;
padding-left: 4px!important
}
.grandtotal {
font-size: 14px;
font-weight: 700;
padding-right: 5px
}
.subtotal {
font-size: 14px;
color: #555;
padding-right: 5px
}
button.deleteitsmallbtn {
color: #fff
}
h2.archived-list-h2 {
float: left
}
.clear {
padding: 0!important;
margin: 0!important;
line-height: 0
}
.single-modal-content1,
.single-modal-content2 {
height: 100%;
background-color: #eee!important
}
.single-p-section {
margin-top: 15px;
margin-bottom: 15px
}
.single-modal-dialog {
height: 95%
}
iframe#upload_target {
width: 100%;
height: 100%
}
#attach_file {
height: 80%
}
#media (min-width:668px) {
.col-md-1,
.col-md-10,
.col-md-11,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9 {
padding-left: 15px!important;
padding-right: 15px!important
}
.col-md-10:first-child,
.col-md-11:first-child,
.col-md-1:first-child,
.col-md-2:first-child,
.col-md-3:first-child,
.col-md-4:first-child,
.col-md-5:first-child,
.col-md-6:first-child,
.col-md-7:first-child,
.col-md-8:first-child,
.col-md-9:first-child {
padding-left: 0!important;
padding-right: 15px!important
}
.col-md-10:last-child,
.col-md-11:last-child,
.col-md-1:last-child,
.col-md-2:last-child,
.col-md-3:last-child,
.col-md-4:last-child,
.col-md-5:last-child,
.col-md-6:last-child,
.col-md-7:last-child,
.col-md-8:last-child,
.col-md-9:last-child {
padding-left: 15px!important;
padding-right: 0!important
}
.col-md-6 {
width: 50%!important;
float: left!important
}
}
#media (max-width:667px) {
h5.archived-list-h5,
h5.ticket-list-h5 {
right: 50px;
}
}
#media only screen and (min--moz-device-pixel-ratio:2),
only screen and (-o-min-device-pixel-ratio:2/1),
only screen and (-webkit-min-device-pixel-ratio:2),
only screen and (min-device-pixel-ratio:2) {
body {
font-size: 200%
}
}
.alert-error {
color: #a84c3d;
background-color: rgba(255, 212, 212, .69);
border-color: #e9cdc6
}
label.editAgent {
font-weight: 400!important
}
.editAgent span {
float: right;
margin-top: 3px;
margin-left: 5px
}
.desc_css {
width: initial;
float: left
}
.display_unset {
display: unset
}
.note-editable {
height: 50px!important
}
.list-group>li:hover,
.modal-content:hover {
background-color: #eee!important
}
#myModal2 .modal_dialog {
width: 850px;
height: 100%
}
#myModal2 .modal_content {
width: 900px;
height: 100%
}
#myModal2 .upload_target_file {
width: 100%;
height: 100%
}
#myModal2 .modal_body {
height: 80%
}
.loading {
display:none;
position: fixed;
top: 0; right: 0;
bottom: 0; left: 0;
background: rgba(38, 17, 17, 0.16);
}
.loader {
display:none;
left: 50%;
margin-left: -4em;
font-size: 10px;
border: .8em solid rgb(102, 116, 170);
border-left: .8em solid rgba(58, 166, 165, 1);
animation: spin 1.1s infinite linear;
}
.loader, .loader:after {
border-radius: 50%;
width: 8em;
height: 8em;
display: block;
position: absolute;
top: 50%;
margin-top: -4.05em;
}
.body_blocked
{
z-index: 2;
opacity: 0.6;
pointer-events: none;
}
#keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
.description_css
{
white-space: pre-line;
}
.attachment_file_input
{
color:white;
width:90px;
}
.temp_attach
{
display:inline-flex;
}
.comments
{
padding: 10px;
}
You are using the HTML style tag. What you want is either to assign a class to your div and put the css for that class in a .css file, or use the HTML style attribute on the div.
https://www.w3schools.com/TAGs/tag_style.asp
https://www.w3schools.com/TAGS/att_style.asp
<div style="margin:10px 0;padding:0;">
Am editing a client's website and one thing has got my head spinning.
I would like to change the color of the sticky menu once it is scrolled. Can someone help me with a custom css to make those changes?
Here is my css
/*
Theme Name: Malory
Theme URI: http://www.tommusrhodus.com
Version: 1.0.3
Description: Malory - A Multipurpose, Responsive WordPress Theme.
Author: Tom Rhodes
Author URI: http://www.tommusrhodus.com
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: white, custom-background, threaded-comments, translation-ready, custom-menu
*/
/*
WARNING! DO NOT EDIT THIS FILE!
To make it easy to update your theme, you should not edit the styles in this file. Instead use
the custom.css file to add your styles. You can copy a style from this file and paste it in
custom.css and it will override the style in this file. You have been warned! :)
*/
/*-----------------------------------------------------------------------------------*/
/* Visual Composer Styles
/*-----------------------------------------------------------------------------------*/
.vc_column_container > .vc_column-inner {
padding-left: 0;
padding-right: 0;
}
.wpb_row {
margin-bottom: 0;
}
.box {
width: 100%;
}
div[data-vc-parallax] .box,
div[data-vc-parallax-image] .box {
background: none;
}
/*-----------------------------------------------------------------------------------*/
/* Theme Styles
/*-----------------------------------------------------------------------------------*/
.admin-bar .navbar.fixed,
.admin-bar .slide-nav-container header,
.admin-bar .lg-toolbar {
top: 32px;
}
p:empty {
display: none;
}
.feature {
padding-bottom: 25px;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
background: none;
}
.social.bordered .goodshare:before {
display: none;
}
.social.bordered .goodshare {
padding: 0;
}
.single-portfolio.admin-bar .fotorama {
position: relative;
top: -32px;
}
.admin-bar .slide-nav-wrapper {
padding-top: 32px;
}
img {
max-width: 100%;
height: auto;
}
.tiles img {
max-width: none;
}
.select-wrap {
position: relative;
}
.select-wrap > span {
position: absolute;
right: 23px;
top: 7px;
pointer-events: none;
}
footer select {
border-color: #ccc;
}
footer address {
margin-bottom: 0;
}
/*-----------------------------------------------------------------------------------*/
/* WORDPRESS DEFAULT STYLES
/*-----------------------------------------------------------------------------------*/
.post-content ul, .post-content ol,
.wpb_text_column ul,
.wpb_text_column ol {
margin: 0 0 20px 0;
padding: 0;
list-style-position: inside;
}
.post-content ul ul, .post-content ol ol,
.wpb_text_column ul ul, .wpb_text_column ol ol {
margin: 0 0 0 40px;
}
.sticky {
}
.bypostauthor img.avatar {
}
.screen-reader-text {
}
select {
max-width: 100%;
}
.alignleft,
.aligncenter,
.alignright,
.alignnone {
margin-bottom: 25px;
}
.alignnone {
display: block;
}
.alignleft {
float: left;
margin: 0 30px 30px 0 !important;
}
.alignright {
float: right;
margin: 0 0 30px 30px !important;
}
.aligncenter {
display: block;
margin-right: auto;
margin-left: auto;
text-align: center;
}
figure.aligncenter a {
display: inline-block;
overflow: hidden;
position: relative;
}
.wp-caption {
max-width: 100%;
text-align: center;
}
.wp-caption img {
margin-bottom: 10px;
}
.gallery-caption {
margin: 20px 0;
max-width: 100%;
text-align: center;
z-index: 999;
}
.wp-caption-text,
.gallery-caption-text {
margin: 6px 0;
font-style: italic;
font-size: 95%;
line-height: 120%;
}
.aligncenter {
text-align: center;
}
table#wp-calendar {
border: 1px solid #cccccc
}
table#wp-calendar>tbody>tr>td>a {
text-decoration: underline
}
table#wp-calendar thead>tr>th {
width: 35px;
height: 20px;
text-align: center;
border: 1px solid #cccccc;
}
table#wp-calendar tbody>tr>td {
width: 35px;
height: 20px;
text-align: center;
border: 1px solid #cccccc;
}
table#wp-calendar tfoot>tr>td>a,
tfoot>tr>td>a:link,
tfoot>tr>td>a:visited,
tfoot>tr>td>a:hover,
tfoot>tr>td>a:active {
text-decoration: underline;
height: 23px;
margin-left: 10px;
padding-bottom: 3px;
}
table#wp-calendar tfoot>tr>td#prev {
width: 58px;
height: 20px;
text-align: left;
}
table#wp-calendar tfoot>tr>td#next {
width: 58px;
height: 20px;
text-align: right;
}
.post-content table,
.wpb_text_column table {
margin-bottom: 25px;
}
.post-content table tr,
.post-content table td,
#wp-calendar table tr,
#wp-calendar table td,
.wpb_text_column tr,
.wpb_text_column td {
padding: 10px 15px;
border: 1px solid #cccccc;
}
dd {
margin-bottom: 25px;
}
dt {
margin-bottom: 10px;
font-size: 18px;
}
.widget_rss li {
margin-bottom: 20px; padding-bottom: 20px;
}
.widget_rss li .rsswidget, .widget_rss li cite {
font-weight: bold; display: block;
}
.widget_rss li .rss-date {
display: block; margin-bottom: 10px;
}
.widget_rss li cite {
margin-top: 10px;
}
.post-content hr,
.wpb_text_column hr {
clear: both;
}
.post-content span.pull-right,
.post-content span.pull-left,
.wpb_text_column span.pull-right,
.wpb_text_column span.pull-left {
float: right;
display: inline-block;
width: 300px;
margin: 0 0 20px 20px;
font-size: 22px;
line-height: 30px;
}
.post-content span.pull-right,
.wpb_text_column span.pull-right {
float: right;
margin: 0 0 20px 20px;
text-align: right;
}
.post-content span.pull-left,
.wpb_text_column span.pull-left {
float: left;
margin: 0 20px 20px 0;
}
.post-content table,
.wpb_text_column table {
text-align: left;
width: 100%;
}
.post-content table td,
.post-content table th,
.wpb_text_column table td,
.wpb_text_column table th {
padding: 15px;
}
.post-content table tr:nth-child(even),
.post-content table thead tr,
.wpb_text_column table thead tr,
.wpb_text_column table tr:nth-child(even) {
background: #f5f5f5;
}
/*-----------------------------------------------------------------------------------*/
/* CONTACT FORM 7
/*-----------------------------------------------------------------------------------*/
div.wpcf7 .wpcf7-not-valid {
border: 2px solid #b54d4d
}
span.wpcf7-not-valid-tip {
display: none !important
}
div.wpcf7-validation-errors,
.highlight {
margin: 0;
padding: 10px;
background-color: #fcf8e3;
color: #c09853;
border: 2px solid #faebcc;
}
div.wpcf7-validation-errors {
margin-top: 20px;
}
div.wpcf7-mail-sent-ok {
margin: 0;
padding: 10px;
border: 2px solid #d6e9c6;
background-color: #dff0d8;
color: #468847;
}
div.wpcf7 textarea {
height: 110px;
}
div.wpcf7 input[type="submit"],
div.wpcf7 p {
margin-bottom: 0;
}
just add this at the end of your themes stylesheet:
.navbar.fixed{
background: rgba(255,255,255,0.6);
}
regarding the mobile question you need to search for appropriate media query in the css and add the above to the according block.
This is a rough example but hopefully you get the concept. You can a class to the header once it has scrolled.
Any styling changes to that class like the color are defined in your css but you will need some simple JS to detect your scrolling. Please see this example (I took my own liberties with the styling like the height changing) and customize to your needs
$(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 97) {
$("header").addClass('shrink');
} else {
$("header").removeClass("shrink");
}
});
});
.container {
height: 900px;
overflow-y: scroll;
}
header {
background-color: blue;
width: 100%;
height: 100px;
position: fixed;
}
h1 {
font-size: 22px;
color: white;
}
header.shrink {
height: 50px;
background-color: red;
}
h1.shrink {
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="container">
<header><h1>I'm a header</h1></header>
</body>
You should provide us with some of your code to be able to help properly.. but in short
you need a scroll listener (if using jquery)
jQuery(window).scroll(function() {
if (jQuery(document).scrollTop() > 50) {
jQuery('.navbar-nav').addClass('redColored');
} else {
jQuery('.navbar-nav').removeClass('redColored');
}
});
and the CSS
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
background:none;
}
.navbar-default .navbar-nav.redColored{
background:#ff0000;
}
I'm setting up a Jekyll page and the current theme I'm using uses Sass, but GitHub pages (where I'm hosting it) does not support Sass. So I'm trying to convert my .scss files to .css but I'm getting the an error on this file:
---
---
#import 'syntax';
$site-background-color: #f5f5f5;
$contrast-color: #333;
$azul-accent-color: #0070bb;
$ruby-accent-color: #e0115f;
$amber-accent-color: #ff7e00;
$avocado-accent-color: #568203;
/*============================================================================*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: $site-background-color;
border-top: 5px solid $contrast-color;
font-family: 'Source Sans Pro', sans-serif;
color: $contrast-color;
font-weight: 400;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl,
blockquote,
table,
img,
hr,
.fluid-width-video-wrapper,
.highlight {
margin-bottom: 20px;
}
blockquote {
padding: 0 30px;
border-left: 2px solid darken($site-background-color, 15%);
}
ul, ol {
margin-left: 40px;
}
img {
max-width: 100%;
height: auto;
border: none;
outline: none;
}
a {
text-decoration: none;
}
hr {
border : 0;
height: 25px;
background : url(/public/images/eagle.png) center center no-repeat;
}
code {
font-family: Consolas, "Liberation Mono", Courier, monospace;
font-size: .8rem;
}
p code {
padding: 0px 5px;
border: 1px solid #ddd;
background-color: #f8f8f8;
border-radius: 3px;
white-space: nowrap;
}
table {
border-collapse: collapse;
border: 1px solid $contrast-color;
td, th {
border: 1px solid $contrast-color;
padding: 5px 10px;
}
thead {
background-color: darken($site-background-color, 10%);
}
}
// TODO: make dt smaller
dt {
float: left;
width: 30%;
font-weight: bold;
}
dd {
float: right;
width: 70%;
}
footer {
font-size: .8rem;
text-align: center;
}
/*============================================================================*/
.azul { a { color: $azul-accent-color;
&:hover { color: darken($azul-accent-color, 20%);
}}}
.ruby { a { color: $ruby-accent-color;
&:hover { color: darken($ruby-accent-color, 20%);
}}}
.amber { a { color: $amber-accent-color;
&:hover { color: darken($amber-accent-color, 20%);
}}}
.avocado { a { color: $avocado-accent-color;
&:hover { color: darken($avocado-accent-color, 20%);
}}}
/*----------------------------------------------------------------------------*/
.highlight {
padding: 30px;
border-radius: 6px;
background-color: #272822;
color: #f8f8f2;
line-height: 1;
code {
font-size: .7rem;
}
}
.container {
max-width: 750px;
padding: 0 20px;
}
.center {
text-align: center;
}
.right {
float: right;
margin: 0 0 20px 20px;
}
.left {
float: left;
margin: 0 20px 20px 0;
}
.top-navbar {
margin-bottom: 40px;
height: 110px;
a {
display: inline-block;
color: $contrast-color;
padding: 66px 20px 25px;
margin-right: 10px;
margin-top: -5px;
text-transform: uppercase;
border-radius: 0 0 5px 5px;
border-bottom: 1px solid lighten($contrast-color, 10%);
transition: all ease-in-out .3s;
&:hover,
&.current-page {
color: $site-background-color;
border-bottom: none;
}
&:hover {
background-color: $contrast-color;
transform: translateY(5px);
}
&.current-page {
background-color: $contrast-color;
}
}
}
.archive,
.single {
margin-bottom: 100px;
}
.single {
font-size: 1.125rem;
line-height: 28px;
}
.single time {
color: #999;
font-size: .9rem;
}
.bundle {
border-top: 1px solid lighten($contrast-color, 50%);
padding-top: 10px;
margin-bottom: 10px;
}
.post-date {
text-align: right;
}
.not-found {
margin-top: 150px;
text-align: center;
font-size: 2rem;
}
.not-found h1 {
font-size: 8rem;
}
dl,
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
dl,
.clearfix:after {
clear: both;
}
/*============================================================================*/
#logo {
display: inline-block;
height: 110px;
width: 110px;
background-size: 90px 90px;
background-position: left center;
background-repeat: no-repeat;
}
/*============================================================================*/
#media screen and (max-width: 767px) {
.top-navbar {
height: 35px;
text-align: center;
margin-top: 40px;
a {
padding: 5px 10px;
margin: 5px;
border-radius: 0;
border: 1px solid $contrast-color;
transition: none;
&:hover {
transform: none;
}
}
}
.bundle,
.post-date {
text-align: center;
}
.bundle article {
margin-bottom: 30px;
}
#logo {
background-position: center center;
}
}
The error is:
Line 1: Invalid CSS after "-": expected number or function, was "--"
I imagine there is a quick fix for this that I am missing since I am not familiar with Sass at all. Am I right? Anyone know how I can fix this?
Also, I'm using the following command to convert from scss to css sass --watch main.scss:main.css if anyone knows of a better way please let me know!
Thanks for any help!
You have two lines of --- at the beginning of your file; what is it you think they're doing? Remove them, they're syntactically invalid and they're causing your errors.
Jekyll 2 brings native Sass compilation and the two lines of triple dashes are in fact required in order for Jekyll to compile the Sass file:
http://jekyllrb.com/docs/assets/
If you are not yet using Jekyll 2, then this will not work of course. If you are using Jekyll 2 then you can do this and no longer require a sass --watch command, Jekyll will do that automagically.
you probably had the same problem as me that the _config.yml is not at your root directory. If you don't want to change your file structure, you can set a new repo and add the jekyll files in a new gh-pages branch. I wrote a blog about it: http://shinshinwu.github.io/myblog/jekyll/update/2014/12/21/welcome-to-jekyll.html
When highlighting text with IE 8 on a webpage that I'm currently developing the font changes and/or sometimes the size. The same thing happens sometimes when I hover over the menu.
This is how my css looks like and I don't know why the error occurs? One more thing that is very strange is that I have installed Windows 7 with paralells on my osx and the error does not occur there but only on PC computers. I have tried changing fonts but with no help...
This is my css:
body {
font-family: verdana, sans-serif;
font-size: 14px;
}
#wrapper, .wrapper {
width: 900px;
padding: 0 30px;
margin-left: auto;
margin-right: auto;
}
#header {
background: url('http://localhost:8888/wp-content/uploads/2012/09/120920_scam_banner.jpg') no-repeat;
height: 150px;
margin: 20px 0;
}
#header div {
width: 900px;
height: 150px;
margin-left: auto;
margin-right: auto;
position: relative;
background: none;
}
#header div a {
text-indent: -9999px;
position: absolute;
width: 900px;
height: 150px;
}
#header div a:hover {
background: none;
}
#section {
}
#menu {
float: left;
width: 175px;
padding: 20px 25px 0 0;
border-right: 2px solid #000;
text-align: right;
}
#menu a, a {
color: #000;
text-decoration: none;
}
.mp-formdiv {
float: right;
}
img {
border: 1px solid #000;
}
#menu a:hover, a:hover {
color: #fff;
background: #000;
}
.menu li {
margin: 3px 0;
text-align: right;
}
#menu h3 {
line-height: 52px;
}
#menu .artists {
padding-left: 10px;
}
#menu-artists li {
}
#content {
float: right;
width: 670px;
padding: 20px 0 50px 20px;
}
#footer {
overflow:hidden;
clear: both;
}
#white_footer {
float: left;
width: 300px;
background: #fff;
height: 20px;
}
#footer_content {
height: 20px;
}
.store {
overflow-y: scroll;
}
#the_store {
margin-top: 10px;
}
/* FONTS */
h1 {
font-size: 3em;
margin-bottom: 40px;
white-space: nowrap;
line-height: 0%;
}
h1.storefront {
font-size: 2em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.5em;
}
#content p strong {
font-weight: bold;
}
#content p img {
float: left;
margin: 5px 20px 20px 0;
}
#content p img:after {
margin-top: 20px;
}
#subscribe_mail input[type=text]{
width: 85px;
height: 12px;
font-size: 0.60em;
margin-bottom: 5px;
float: left;
margin-right: 4px;
}
#subscribe_mail input[type=text]:focus {
font-size: 0.75em;
}
#subscribe_mail input[type=submit] {
border: 1px solid #999;
font-size: 0.75em;
float: left;
}
.mp-message, .mp-loading {
font-size: 0.75em;
}
.MailPressFormName {
display: none;
}
#artist_info {
display: none;
margin-top: 40px;
overflow: hidden;
clear: both;
}
.more-less {
background: #000;
float: left;
color: #fff;
padding: 0 2px;
margin-top: 10px;
}
#artist_less {
display: none;
}
.gallery-icon a:hover {
background: none;
}
.gallery dl {
margin-top: 0 !important;
margin-bottom: 15px;
}
.gallery dl dd {
font-size: 0.75em;
}
.newsletterH {
margin-bottom: 5px;
}
I would use Firefox's Firebug plugin to see where the styles are coming from. IE provides a less friendly developer tool window that does something similar (I only use this if the style issue is only occurring in IE). I'd check your :hover and :focus rules first since those would cause things to happen on hover or select.
I am not very good at this I know some but I am having some issues with my CSS I can not figure out.
My mainContent ID overlaps with under my Sidebar ID. I am sure I messed up my css trying to fix this but I have no idea how to fix t his. I have changed things so many times I have become lost.
Any help would be nice.
#charset "utf-8";
body {
background: #A00;
margin: 0;
text-align: center;
color: #A00;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
}
.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
float: right;
}
.twoColHybLtHdr #header {
background-image:url(img/background3.png);
padding: 12px;
background-repeat: repeat-x;
background-position: left;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 14em;
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}
.twoColHybLtHdr #sidebar1 h3, {
margin-left: 10px;
margin-right: 10px;
padding: 10px 10px 10px;
}
.twoColHybLtHdr #sidebar1 p {
margin-left: 10px;
margin-right: 10px;
padding: 10px 10px 10px;
}
.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
}
.twoColHybLtHdr #footer {
padding: 50px 8px;
background:#FFFF99;
background-color: #FF9;
}
.twoColHybLtHdr #footer p {
font:Georgia, "Times New Roman", Times, serif, 10px;
margin: 0;
padding: 10px 0;
border-color: #666666;
}
.fltrt {
float: right;
margin-left: 10px;
}
.fltlft {
float: left;
margin-right: 10px;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.twoColHybLtHdr #table {
font:
margin: 0;
padding: 10px;
color: #FFF;
y background-color: #8B0000;
; background-color: #A00;
border: #A00;
}
Make sure you specify a width on BOTH the .fltrt and .fltlft columns
Your css should look like this:
/** Assuming the parent element (container) is 940px wide **/
.fltlft {
float: left;
width: 540px;
}
.fltrt {
float: right;
width: 380px;
}
Also, make sure you replace/remove **y** with .y and remove that unused **font** attribute.
Not sure what's happening as there isn't a visual on whats actually happening.
.twoColHybLtHdr #sidebar1 h3, {
Just remove the , and all should be good
The bottom there is a few errors.
.twoColHybLtHdr #table {
**font:**
margin: 0;
padding: 10px;
color: #FFF;
**y** background-color: #8B0000;
; background-color: #A00;
border: #A00;
}
I'm guessing it should be more like
.twoColHybLtHdr #table {
font-family: helvetica, arial, sans-serif;
margin: 0;
padding: 10px;
color: #FFF;
.y{
background-color: #8B0000;
background-color: #A00;
border: #A00;
}
Take the float right off of the container
put a float left on the main content
add a div after the main content that clears both.
.twoColHybLtHdr #container {
width: 80%;
background: #CFF;
margin: 0 auto;
border: 2px solid #A00;
text-align: left;
border-color: #A00;
******** removed Float:right;
}
.twoColHybLtHdr #sidebar1 {
float: left;
width: 210px; ****** Change this to pixels unless you are specifying the font-size as !important otherwise you could have problems with this width scaling unintentionally.
background: #006633;
padding: 5px 0;
background-color: #D4DFAA;
border: #A00;
}
.twoColHybLtHdr #mainContent {
margin: 5px 20px ;
padding-left: 15px;
color: #000;
float: left; ****** Added float left to mesh it with your sidebar float right would work as well but wouldn't mesh it with your floated sidebar.
}
*********** add another div after your mainContent and assign it the ID="clear"
.twoColHybLtHdr #clear {
clear: left;
}
There are some other errors in your css but I think these are the ones where you are having your problems.