The image slider menu items are shifted downward 5px on every page the blog page, where they are positioned correctly. I can see the shift in Firebug but do not know where in CSS to fix.
http://drkateklemer.com
Thanks!
Your problem is in line 662 of your style.css for the organic natural summer theme. Change the margins to 0px, going from this:
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 5px 0px 5px 0px;
padding: 0px;
line-height: 32px;
}
To this:
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 0px;
padding: 0px;
line-height: 32px;
}
Note: Tested using Developer Tools for Chrome.
wordpress is loading the images into the content block, i dont think it your css just how images are accessed through your template
#contenthome h1, #content h1 {
color: #333333;
font-size: 32px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-transform: normal;
letter-spacing: -1px;
margin: 0px 0px 0px 0px;
padding: 0px;
line-height: 32px;
}
Related
I need to align label and content in a form but no code I tried worked.
Expected
currently look like
The css code I created is this:
.crm-webform, .crm-webform-label, .crm-webform-fieldset, .crm-webform-input-label, .crm-webform-group, .crm-webform-input, .crm-webform-label-content {font-family: Open sans, 'Open sans', Lato, sans-serif; font-size:14px; color:black; margin: 0px 0px 3px 0px; }
.crm-webform-input {height: 32px; } .crm-webform-icon {height: 22px; line-height: 30px;} #LEAD_UF_CRM_5BEF2B8E126AA { padding: 1px 3px 1px 3px; height:60px; resize: both;
overflow: auto;} label[for=LEAD_UF_CRM_1550937652], label[for=LEAD_UF_CRM_1550937755] {height:0px; color:transparent; opacity:0; margin: 0px 6px 0px 6px;}
.flexible-middle-width, .crm-webform-header-container {background-color:transparent; background-opacity:0.4;}
/*#bx_form_iframe_6 , .crm-webform-block .bx_form_iframe_12 */
.*, * {background-color:transparent; background-opacity:0.4; font-family:Open-sans, Open sans, 'Open sans', Lato, sans-serif; color:black; }
h1, .crm-webform-header {color:black; font-family:Open-sans, 'Open sans', Lato, sans-serif; font-weight: bold; size:26px; letter-spacing: 1px; margin: 6px 0px 0px 0px;}
.crm-webform-input {font-weight:600; } .crm-webform-checkbox-container, .crm-webform-checkbox-radio, .crm-webform-checkbox-name {display:inline; font-family:Open-sans,'Open sans', Lato, sans-serif; font-size:14px; color:black; padding: 0px 4px 0px 9px;}
If you set these attributes to this class .crm-webform-field-string (or create another class as well) it will work:
.crm-webform-field-string {
display: flex;
align-items: center;
}
The rest is only to set a margin-right to the label container.
For example:
margin-right: 30px;
I'm trying to add a badge after the h1 on this page: http://69.175.87.138/~plnew/portfolio-item/verde-rosa/ Unfortunately it is not lining up with the h1. I have tried a number of things to get it to display correctly: negative margins, different display: values, different line-heights, etc. Nothing seems to be working so I thought I would ask here.
h1 {
font-size: 55px;
line-height: 35px;
font-weight: 300;
color: #595959;
margin-bottom: 15px;
font-family: "lust-display",sans-serif;
}
h1::after {
display: inline;
margin-left: 10px;
font-size: 14px;
font-family:"freight-sans-pro", lato, sans-serif;
background-color: #C9B39E;
color: #FFF;
border-radius: 5px;
padding: 5px;
content:"Marble";
}
<h1 class="entry-title">Verde Rosa</h1>
JSFiddle
Try adding vertical-align: middle to the :after pseudo-element.
h1 {
font-size: 55px;
line-height: 35px;
font-weight: 300;
color: #595959;
margin-bottom: 15px;
font-family: "lust-display", sans-serif;
}
h1::after {
display: inline;
margin-left: 10px;
font-size: 14px;
font-family: "freight-sans-pro", lato, sans-serif;
background-color: #C9B39E;
color: #FFF;
border-radius: 5px;
padding: 5px;
content: "Marble";
vertical-align: middle;
}
<h1 class="entry-title">Verde Rosa</h1>
Not sure if this is what you were looking for based on the short description, but have you tried vertical-align?
h1::after {
display: inline;
margin-left: 10px;
font-size: 14px;
font-family: "freight-sans-pro", lato, sans-serif;
background-color: #C9B39E;
color: #FFF;
border-radius: 5px;
padding: 5px;
content: "Marble";
vertical-align: middle;
}
Trying to change h2 color from 3f3e3c to FF1494 in CSS, but the change doesn't seem to be taking effect when I publish it.
h2 {
font-size: 36px ;
padding: .5em 0 .2em 0;
line-height: 1;
font-family: 'Kaushan Script', cursive;
font-weight: normal;
color: #FF1494;
text-shadow: 1px 1px 0px #fff;
}
What am I missing? Thanks
Also tried clearing the cache, no luck. Note - I'm customizing a theme in Weebly. Is there something else I should look for that might be preventing my change?
Maybe you've already changed the color on another h2, use !important after the color, it might help.
h2 {
font-size: 36px ;
padding: .5em 0 .2em 0;
line-height: 1;
font-family: 'Kaushan Script', cursive;
font-weight: normal;
color: #FF1494 !important;
text-shadow: 1px 1px 0px #fff;
}
I think you forgot to add a } at the end of the h2 . (or if it's just a typo on SO, try clearing your browser's cache)
h2 {
font-size: 36px ;
padding: .5em 0 .2em 0;
line-height: 1;
font-family: 'Kaushan Script', cursive;
font-weight: normal;
color: #FF1494;
text-shadow: 1px 1px 0px #fff;
} <- add this
I'm using a Raspberry Pi and Screenly-OSE as a Digital Signage solution for our pharmacy. I display various ads along with the overnights. I'm using a very simple Sinatra application to to serve overnights. Works great except from a small detail which bugs me a lot, there's a white space available there: see picture .
I'm using the following very simple css file:
body {
/* background-color: #246013; */
background-image:url('moon.jpg');
color: white;
text-align: center;
font: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#wrapper{
width:1200px;
margin:0 auto;
text-align: center;
}
#content{
text-align: center;
margin:auto;
}
#footer{
text-align: center;
padding-top: 30px;
color: #D6D6D6;
font: 14px "Courier New", Courier, mono;
}
h1 {
font-size: 80px;
padding-top: 10px;
font-weight: bold;
text-align: center;
}
h2 {
text-align: center;
font-size: 60px;
font-weight: bold;
}
h3 {
text-align: center;
font-size: 32px;
padding-top: 10px;
padding-bottom: 3px;
font-weight: bold;
}
h4 {
text-align: left;
font-size: 25px;
padding-top: 5px;
padding-bottom: 3px;
text-decoration: underline;
}
h5 {
text-align: left;
font-size: 23px;
padding-top: 5px;
padding-bottom: 3px;
font-weight: bold;
}
I wonder if there's a way to get full-screen background cover. The background picture cover goes along with the text, some days overdays are displayed and if the overdays are 5 or 6 the entire screen is covered.
I know I can simulate this behavior by adding br/ and/or counting the text lines displayed. But I wonder if there's any other other, more natural way of achieving this.
Thanks
Make sure setting both html and body to 100% height to make them cover it all.
html, body {
height: 100%;
}
On my wordpress blog, the page title appears differently in windows and on linux. On Linux in Firefox its smooth and appears as it should,but on Windows in both Firefox and IE it has rough edges. On Windows, it appears http://img691.imageshack.us/img691/4592/picwindows.png . Any way to fix this ?
The CSS is as follows :
#pagetitle{
padding: 3em 0 0 1em;
}
#pagetitle h1.logo{
font-family: "Arial Black", Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati;
font-size: 500%;
float: left;
padding: .1em 0 0 0;
margin: 0;
letter-spacing: -0.1em;
/*font-variant: small-caps;*/ /* Uncomment this line to change title to uppercase */
font-weight: normal;
color: #eeeadb;
}
#pagetitle h1.logo a{
color: #eeeadb;
text-decoration: none;
}
#pagetitle h1.logo a:hover{
color: #fff;
}
#pagetitle h4{
float: left;
border-left: 1px solid #8e7762;
padding: .6em 0 .6em .8em;
margin-left: 1em;
color: #e9e2c9;
}
Thank You.
Turn on cleartype, in your desktop settings?