I know this is a NOOB question to most of you, but here is what Im trying to have it look like: http://cssdesk.com/6Rzk2 (Keep that link for the preview please)
However its just showing up as just plain text.
Thanks
As far as I can see, you only have 2 style sheets being loaded on your site - style.css and large.css. Neither one has anything for #SumTitle. Add this to style.css and it will work -
#SumTitle {
color: #0D2F87;
border-bottom: 1px #3a6cc5 solid;
padding: 20px 0px 3px 0px;
margin: 0px 0px 5px 0px;
font-weight: bold;
font-family: Verdana, Arial, sans-serif;
font-size: 18px
}
Related
blockquote {
background-color: #2b2b2b;
color: #fff;
font-family: 'Crimson Text', serif;
padding: 30px;
border-radius: 20px;
border: 3px solid #c97b63;
box-shadow: 10px 10px 10px #000;
background-image: url('https://www.worldanvil.com/uploads/images/b87d651425efdc82663685a49303ca96.png');
background-repeat: repeat;
}
Everything else worked for me, but when I tried adding an image to the background and repeat it, the image does not seem to load on the webpage. I don't know what single quotes vs quotation marks do, so I tried both. Neither loads the image. What should I try to do next? Thanks for your time.
See the example snippet below of a text using two box-shadow: inset as underline.
It renders perfectly on Chrome, Firefox and Safari (recent versions).
But it looks like this on Edge (see the faded line leaking at the bottom of the underline):
QUESTION
Is there any way around this? Or should I just give Edge users what they deserve?
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
h2 {
font-family: 'Proxima Nova';
color: rgb(60,128,124);
font-size: 21px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
a.boxShadow {
color: darkGrey;
text-decoration: none;
line-height: 26px;
box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
padding-bottom: 3px;
}
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
https://gs.statcounter.com/browser-market-share/all/europe/#monthly-201810-201910-bar
I reproduced the issue in Microsoft Edge(EdgeHTML). I think it might be due to the different performance of different browser's render engine. Besides, I found a similar issue report, you could also report this issue. The situation of another issue report is also similar.
You could try to avoid using two inset box-shadow in Microsoft Edge(EdgeHTML) and use the code below as a workaround:
#import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
h2 {
font-family: 'Proxima Nova';
color: rgb(60, 128, 124);
font-size: 21px;
font-weight: bold;
margin-top: 20px;
margin-bottom: 10px;
}
.boxShadow {
color: darkGrey;
text-decoration: none;
line-height: 26px;
box-shadow: inset 0 -2px 0 rgb(60, 128, 124);
padding-bottom: 1px;
}
<h2>
<a class="boxShadow">Hello gjq box-shadow</a>
</h2>
Im using Contact Form 7 on my WP site, and I'm experiencing a strange issue with the submit button. Im using the following class for the button:
.ctaredbutton
background-color: #EA3939;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF !important;
font-family: Proxima Nova,Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 22px 30px;
text-transform: uppercase;
margin-left:20px
The button displays as expected in Firefox (http://cl.ly/SQ5Y) but there appears to be extra padding in Chrome (http://cl.ly/SPcr). The form is live at 'elitegolfusa.org/apply'
Has anyone seen this before? I've got no idea where the additional top padding has came from?
Ditch the padding on the top/bottom altogether and use line-height. Set line-height to whatever height you want the button.
.ctaredbutton{
background-color: #EA3939;
border-radius: 40px 40px 40px 40px;
color: #FFFFFF !important;
font-family: Proxima Nova,Helvetica,sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.02em;
line-height:45px; // I added this
padding: 0 30px; // I changed this
text-transform: uppercase;
margin-left:20px
}
I am just starting to use SlickGrid and amazed by its quality. However, when it comes to styling, I did not find any docs or examples recommending an overall styling approach. There are options and APIs scattered in various places, but it's very difficult to extract a strategy out of those. Also the grid leverages jQuery UI themes. Unfortunately those are interfering with what I am trying to achieve. We have picked up jQuery UI only for the calendar widget along with the ui-darkness theme. This theme works perfectly fine for the calendar widget, but the grid needs to override every aspect of it.
Here's a jsFiddle that shows the look I am trying to achieve: http://jsfiddle.net/nareshbhatia/3q6RD/. Just for illustration, it uses a regular HTML table. However I would like to achieve the exact same styling using SlickGrid. The CSS in this jsFiddle is essentially the requirement I have from my visual designer, e.g.
#positions-table th {
background-color: #505050;
color: #eeeeee;
text-shadow: none;
font-size: 13px;
height: 40px;
line-height: 40px;
}
Edit: I also created a jsFiddle with a starter SlickGrid implementation: http://jsfiddle.net/nareshbhatia/vJshY/. As you can see, the ui-darkness theme has completely taken over!
Within your second/last jsFiddle you can modify the CSS to have this code
.slick-header-column.ui-state-default {
background:none ;
background-color: #505050 ;
color: #eeeeee;
border: none;
padding: 0;
text-shadow: none;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
height: 40px;
line-height: 40px;
}
.slick-row.ui-widget-content, .slick-cell {
background: none;
background-color: #eeeeee;
color: #666666;
border: none;
border-bottom: solid 1px #ffffff;
font-size: 14px;
height: 60px;
line-height: 60px;
padding: 0 5px;
}
I cannot seem to change my .CSS (the file name is loginmodule.css)
I only wanted to change the font color to black.
I have edited this in Microsoft FrontPage,notepad++, notepad and it has already change but when I look it in the browser(Firefox beta, latest patch). It didn't change at all. I know I had not made a duplicate file and I am sure it is the same file I edited and opened from a browser(Firefox beta, latest patch). Is it because of the browser or something else?
body {
color: #666666;
margin: 0px;
background: #f8f7e5 url('images/abstract-bg.jpg') no-repeat center top;; font-style:normal; font-variant:normal; font-weight:normal; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding-left:10px; padding-right:10px; padding-top:20px; padding-bottom:0px
}
.textfield {
font-size: 11px;
color: #333333;
background: #F7F7F7;
border: 1px solid #CCCCCC;
padding-left: 1px;
}
h1 {
color: blue;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
font: bold 18px Verdana, Arial, Helvetica, sans-serif;
border-bottom: 1px dashed #E6E8ED;
}
h2 {
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
margin: 0px 0px 5px;
padding: 0px 0px 3px;
color: #99CCFF;
border-bottom: 1px dashed #E6E8ED;
}
a {
color: #2D3954;
font-size: 11px;
}
a:hover {
color: #99CC00;
}
.err {
color: #FF9900;
}
th {
font-weight: bold;
text-align: left;
}
#content {
width: 860px;
margin: 238px auto 0;
background: #fff;
border: solid 1px #ccc;
padding: 20px;
}
If you want to be certain the file hasn't been cached by the browser, just append a query string to the CSS file declaration.
So inside your page/template, change the <link /> attribute like so
<link rel="stylesheet" type="text/css" href="/css/loginmodule.css?v=2" />
Alternatively, hold down CTRL and press F5 inside Firefox to do a hard refresh.
Browsers typically cache the CSS. Try closing all of your browser windows then viewing the file.
Things like that usually occur from browsers. I usually delete all history and clear cacheand it works fine. But make sure you have saved and uploaded the css to the correct directory. You can also try to view it in a browser that you don't use very often.
good luck.