I'm completely new to coding, so please be gentle with me! I'm trying to add CSS code to a button, I've tested it in Codepen which shows it as working, but when I've tried it in my browser, it's coming up with a hyperlink, then the code alongside it.
Home
.button
{padding: 10px 24px;
font-family: trebuchet;
Color: #E8DCEC;
Background-color: #ed1c24;
text-align: center;
display: inline-block;
font-size: 16px;
border: 2px solid #8b52a1;
border-radius: 4px;}
.button:hover {
background-color: #72bf44
color: #E8DCEC; }
I'm sure I've missed something totally obvious here, but I've looked over it so much and I can't see anything
CSS code needs to be in <style> or linked in an external CSS document via a link tag
Home
<style>
.button {
padding: 10px 24px;
font-family: trebuchet;
Color: #E8DCEC;
Background-color: #ed1c24;
text-align: center;
display: inline-block;
font-size: 16px;
border: 2px solid #8b52a1;
border-radius: 4px;
}
.button:hover {
background-color: #72bf44 color: #E8DCEC;
}
</style>
Related
I have copied the styling from this Codepen demo: https://codepen.io/CSWApps/pen/MmpBjV into my own code like so:
<style>
body {
background-color: #5c4084;
text-align: center;
padding: 50px;
}
.container {
padding: 40px 80px;
background-color: #fff;
border-radius: 8px;
}
.heading {
h1 {
background: -webkit-linear-gradient(#fff, #999);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
text-align: center;
margin: 0 0 5px 0;
font-weight: 900;
font-size: 4rem;
color: #fff;
}
h4 {
color: lighten(#5c3d86,30%);
text-align: center;
margin: 0 0 35px 0;
font-weight: 400;
font-size: 24px;
}
}
</style>
However, beginning with H1 my IDE highlights the line background: -webkit-linear-gradient(#fff, #999); with the error message "semi-colon expected." I can confirm that no linear gradient is being added.
If you click on settings then CSS, you can see that some older versions of Bootstrap are in use.
Note: I would recommend a newer version of Bootstrap, or better yet, Bootstrap-Vue
css:
.load_more{
width:100%;
height: 44px;
color: #fff;
background-color: #5dc7d0;
border:none;
border-radius: 5px;
font-family: $base-font;
font-size: 18px;
margin-top: 22px;
cursor: pointer
}
ur code is working fine there might be some other css overwriting ur css, u should inspect elemnt and check that, also check below code and see if it works for u
.load_more{
width:100%;
height: 44px;
color: #fff;
background-color: #5dc7d0;
border:none;
border-radius: 5px;
font-family: $base-font;
font-size: 18px;
margin-top: 22px;
}
.load_more, .load_more a{
cursor: pointer!important;
}
<div class="load_more">
im having some link here
</div>
Twitter Bootstrap is ment to easily build on top of it. Now I'm experience a problem which I can not solve. I work with TB v. 2.3.2.
In my own style.less file, I included TB:
#import "../bootstrap/less/bootstrap.less";
In the original TB files, forms.less, this LESS can be found:
// INPUT GROUPS
// ------------
// Allow us to put symbols and text within the input field for a cleaner look
.input-append,
.input-prepend {
display: inline-block;
margin-bottom: #baseLineHeight / 2;
vertical-align: middle;
font-size: 0; // white space collapse hack
white-space: nowrap; // Prevent span and input from separating
.add-on {
display: inline-block;
width: auto;
height: #baseLineHeight;
min-width: 16px;
padding: 4px 5px;
font-size: #baseFontSize;
font-weight: normal;
line-height: #baseLineHeight;
text-align: center;
text-shadow: 0 1px 0 #white;
background-color: #grayLighter;
border: 1px solid #ccc;
}
}
So in my own stylesheet after after the #import of the bootstrap files, I trie to change the background-color for .add-on like this (should become pink instead of #grayLighter you find in the above code):
.input-append,
.input-prepend {
.add-on {
color: blue;
background-color: pink;
}
}
Now, the color I have added (blue) is working! This is not overwriting a value, because the .add-on in forms.less did not had any color specified. But as you can see it does have a background-color (#grayLighter), which I want to change! You see that I have specified this to be pink, but it doesn't work. I don't understand this. Can somebody help me out?
I use these Less further down in my stylesheet like this:
div {
.input-prepend;
.form-search .input-prepend;
label {
.input-prepend > .add-on;
}
}
As you can see in below image, the pink background color is not working.
I checked how the output from the LESS in CSS looks, and have written my questions in there as well. The further I'm digging in to this the more I don't understand it, a codepen example DOES SHOW PINK as background, how it should be in my opinion, see working example here: http://codepen.io/willemsiebe/pen/kvmic.
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // FIRST MENTION BG COLOR IN FORMS.LESS
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink; // SECOND MENTION BG COLOR IN MY OWN LESS FILE
}
// THIS IS HOW I REFERRED IT AS YOU CAN SEE IN MY TOPIC! BUT WHY IS BG COLOR PINK SHOWING UP BEFORE BG COLOR OF FORMS.LESS?
#woocommerce_product_search-3 #searchform div label {
color: blue;
background-color: pink; // WHY IS THIS SHOWING UP FIRST?
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee; // WHY IS THIS SHOWING UP LAST?
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
margin-bottom: 0;
}
20-7-2014: Ok, now I'm really confused! Instead of overwriting it in my own style.less directly, I put the same code in a different less file and imported it with #import, and now its working... but the output in CSS is exactly the same, except from the fact that the background color PINK is now mentioned last!
.input-append .add-on,
.input-prepend .add-on {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
}
.input-append .add-on,
.input-prepend .add-on {
color: blue;
background-color: pink;
}
#woocommerce_product_search-3 #searchform div label {
display: inline-block;
width: auto;
height: 24px;
min-width: 16px;
padding: 4px 5px;
font-size: 14px;
font-weight: normal;
line-height: 24px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background-color: #eee;
border: 1px solid #ccc;
vertical-align: top;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
margin-right: -1px;
color: blue;
background-color: pink; // NOW IT'S MENTIONED LAST!
margin-bottom: 0;
}
Twitter Bootstrap is ment to easily build on top of it.
That's only true for mixins, see also: Bootstrap 3 with LESS: how to handle bootstrap's nested rules?
In stead on mixins (which only work for simple classes) you could try to use the :extend() psuedo class, see: http://lesscss.org/features/#extend-feature-combining-styles-a-more-advanced-mixin
To style your HTML:
<form id="searchform">
<label>zoeken:</label>
<input type="text">
<input type="submit">
</form>
Try the following Less code:
#import "bootstrap.less";
#searchform {
&:extend(.input-prepend, input-append all);
margin-top:5px;
label {
&:extend(.input-prepend .add-on all);
color: blue;
background-color: pink;
}
input[type="text"] {
&:extend(.input-prepend input all, .input-append input all);
border-radius: 0;
}
input[type="submit"] {
&:extend(button all,.btn all,.input-append .add-on all);
height:30px;
}
}
Been messing with it for the past couple of hours. Trying to get a vertical space betweeb tags, but no luck...
Blog has a separate template file.
Live link here
http://soloveich.com/pr6/blog/
Html code
<div id="tagy">
widget code
</div>
css
#tagy {
margin-top: 20px !important;
}
#one h2 {
text-align: center;
width: 100%;
padding-top: 45px;
padding-bottom: 10px;
font-family: 'Raleway', sans-serif;
font-size: 26px !important;
color: #7e7e7e;
border-bottom-style: dotted;
border-bottom-color: #a6a6a6;
border-bottom-width: 1px;
}
.seo-tag-cloud a {
margin: 10px;
padding: 7px;
background-color: #dddddd;
color: #666666;
font-size: 14px !important;
text-align: center;
}
Add display: inline-block to your .seo-tag-cloud a styling. Anchors are inline by default, which means they don't have margin.
I have used following css for select tag:
select {
background-color: transparent;
border: 1px solid #A96800;
color: #fff;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
This css affects the text also.
You are unable to see the options because in your css, you are setting text's color to white.
color: #fff;
Just remove the above line so that your css looks like:
select {
background-color: transparent;
border: 1px solid #A96800;
font-family: "Verdana","Lucida Fax","Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
font-size: 10pt;
height: 21px;
margin-bottom: 5px;
padding-left: 3px;
width: 260px;
}
Now you can view your options as well.
Here's the updated fiddle: http://jsfiddle.net/UJMkN/1/
Hope this helps.