I am trying to customize every single post of first-paragraph starts with first-letter only, bold and larger fonts. But it does not appear on first-letter of the first paragraph. Instead, it appears on every paragraph rather than the first-paragraph.
This is for a Wordpress template. In the past I've tried using the property first-child. However, it didn't seem to be working.
p::first-letter {
font-size:300%;
color:#00aff2;
font-style:bold;
border: 2px solid #00aff2;
margin:0 5px 3px 0;
padding: 3px;
}
<p>This is a sample</p>
<p>This is a sample</p>
I would like to customize the first-letter of every first paragraph of a single post in Wordpress.
You can use :first-child to apply ::first-letter to the first paragraph only.
p:first-child::first-letter {
font-size:300%;
color:#00aff2;
font-style:bold;
border: 2px solid #00aff2;
margin:0 5px 3px 0;
padding: 3px;
}
<p>This is a sample</p>
<p>This is a sample</p>
Try This
p:first-of-type::first-letter {
font-size:300%;
color:#00aff2;
font-weight: bold;
border: 2px solid #00aff2;
margin:0 5px 3px 0;
padding: 3px;
}
<p>This is a sample</p>
<p>This is a sample</p>
<p>This is a sample</p>
<p>This is a sample</p>
Related
I am playing with various css properties to see how they work. And my question is, why is it when I set "margin-top" that is more negative than -20px my link doesn't move more upwards any more. Setting a more negative value like -21px and above doesn't move the link more to the top at all.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nav</title>
<style>
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: inline-block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 20px;
border-bottom: 2px solid red;
margin-top: -20px; /* more negative value doesn't move the link more to the top */
}
</style>
</head>
<body>
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
</body>
</html>
For inline (inline-block) elements it appears they don't go beyond their height (can't say/find why), so if you for example change padding greater that 20px, you can have a negative margin as big.
If you do change the anchor to a block level element though, the negative margin applies properly.
Sample 1 - padding
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: inline-block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 40px;
border-bottom: 2px solid red;
margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
Sample 2 - block element
nav { /*height: 60px;*/ border: 2px solid black;}
a {
display: block;
text-decoration: none;
background-color: lightgreen;
color: grey;
font-weight: bold;
padding: 20px;
border-bottom: 2px solid red;
margin-top: -40px; /* more negative value doesn't move the link more to the top */
}
<h1>Testing</h1>
<nav>
link 1
</nav>
<p>some text so we can see how it is affected when setting various properties</p>
It will never go more negative because there is a h1 tag which dosen't have any spaces above it to do the margin
you have to use position:absolute; to make a tag move freely
All the elements in your example have what is called (are in) a "Normal Flow". The very first element in the flow is <h1> which is block element, it occupies the whole available width and makes the line break. When you use negative margin-top you go up to the element above. 20px of padding is the available negative margin for the element. To go out of the "Normal flow" you can use position: absolute. To stay in the flow you may use position: relative, and use top: -21px;.
My main problem is how can I get the foreground bubble (in blue) to be slightly below and to the right of the background bubble under all conditions?
I've tried playing around with different ways of overlapping objects on top of each other... specifically using the following ways:
Playing around with negative margins
Absolute/Relative positioning and z-index
However, I'm not able to get one combination which works under "all conditions" and keeps the text bubble "whole." (see note below)
Specifically, the conditions I'm facing are:
Different Text Lengths --- The text which currently written in as "Some Title" is automatically generated and could very in size (i.e. number of characters) so the bubbles need to adjust to be a different number of lines (1-5).
Differing Browser Sizes --- I want the text bubbles to adjust in response to the size of the browser, but not the distance between them.
Also note:
I'm using the latest version of Twitter Bootstrap.
I use specific before/after psuedo elements on the text bubbles so their little tips are placed in what appears to be okay location aesthetically. These would often get screwed up when I tried the second method above to solve the problem.
Bonus points if you can make the tips on the text bubbles look better ;)
Here's my html:
<div>
<div id="head-names">
<h2>
Person A
</h2>
<h2>
Person B
</h2>
</div>
<div align="center">
<h2 class="text-bubble background-bubble">
<p>Some Title</p>
</h2>
<h2 class="text-bubble foreground-bubble">
<p>Some Title</p>
</h2>
</div>
</div>
And my css:
#head-names {
display:flex;
align-items: center;
justify-content: space-around;
flex-wrap:wrap;
}
.text-bubble {
position:relative;
text-align : center;
border-radius:30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
max-width:650px;
padding: 10px 20px;
margin: 0 0 20px;
}
.text-bubble:before {
content:"";
position:absolute;
width: 0;
height:0;
border-style:solid;
}
.text-bubble:after {
content:"";
position:absolute;
border-style:solid;
display:block;
width: 0;
}
.foreground-bubble {
background-color: #ADD8E6;
border: 6px solid #666;
left:2%;
}
.foreground-bubble:before {
bottom:100%;
left:13%;
border-color: transparent transparent #666 #666;
border-width: 30px 30px 30px 30px;
}
.foreground-bubble:after {
bottom:100%;
left:15%;
border-color: transparent transparent #ADD8E6 #ADD8E6;
border-width: 18px 18px 18px 18px;
}
.background-bubble {
background-color: #fff;
border: 6px solid #666;
left:-2%;
color:transparent;
margin-bottom:-17%;
}
.background-bubble:before {
bottom:100%;
left:80%;
border-color: transparent #666 #666 transparent;
border-width: 30px 30px 30px 30px;
}
.background-bubble:after {
bottom:100%;
left:82.5%;
border-color: transparent #fff #fff transparent;
border-width: 18px 18px 18px 18px;
My code can be found here: http://jsfiddle.net/aZ6bE/
Link to some wireframes/sample images of how I'd ideally like it to scale: http://ge.tt/2puJ7Hh1/v/0?c
For the positioning I removed the .background-bubble margin-bottom:-17% and instead added top:-100px to .foreground-bubble since its position:relative.
I also gave the wrapping div a new class "bubbles" and added margin-top:50px to move it a bit further down so the tips don't collide with the text.
According the tips of the bubbles I changed:
the size (border-width) of the bigger triangle
percentage -> pixels
(background-bubble) left -> right
Here's the JSFiddle
I would also suggest you combine some of the CSS into new classes to reduce the redundancy.
e.g the border-width and bottom:100% of the tips.
On one of my pages I have five similar divs and I wish to add a border to the top aswell to the bottom of the first and the last div.
HTML:
<div class="info_box">
Text content is here
</div
<div class="info_box">
Text content is here
</div>
... And so on...
CSS:
.info_box{
top: 8em;
float: left;
max-width:100%;
max-height: 50px;
position: relative;
overflow: hidden;
background-color: rgba(255, 0, 0, 0.0.5);
}
.info_box:first-child{
border-top: 1 px solid #666;
}
.info_box:last-child{
border-bottom: 1 px solid #666;
}
Can someone tell me what I'm doing wrong here?
just add class "with-border" to the first and last div (or any div you want to have a border), and then add this to your css:
.with-border {
border-bottom: 1 px solid #666;
}
So your first and last divs will be:
<div class="info_box with-border">
Text content is here
</div>
How you are doing it with the CSS is absolutely fine, except you have two errors.
You need to remove the space between the 1 and px like the following.
.info_box:first-child {
border-top: 1px solid #666;
}
.info_box:last-child{
border-bottom: 1px solid #666;
}
In addition you need to close your divs, you are missing a closing >
<div class="info_box">
Text content is here
</div>
<div class="info_box">
Text content is here
</div>
That should solve it for you.
This is how my css looks like:
.rounded-box{
border-radius: 5px;
background-color: #e4f4fd;
font-size: 16px;
margin-top: 18px;
border: 1px solid #dedef7;
padding: 18px;
text-shadow: 1px 1px 0 white;
display: inline-block;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
h3 {
text-shadow: 1px 1px 0 white;
margin: 10px;
}
And this is how my html looks like:
<div class="rounded-box">
<h3>some text here</h3>
<h3>some text here</h3>
</div>
For some reason in IE8 (haven't tested it yet in other IEs) the rounded-box sits on top of the text. When I load the page a see for a fraction of the second my text then the rounded box covers the text.
(All the other browsers display the text as I intended on top of the rounded-box)
Any ides?
The problem was with jquery.curvycorners.min.js. When I eliminated it from my HTML page the problem went way.
On top of that it eliminated a problem I had in another page where I had a text field that would not show up in IE 8.
I am trying to create highlighted text effect with line break(s).
Example:
I cannot figure out how to add padding to the text. Here is the CSS for the span element that contains the text:
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 24px;
padding-left: 5px;
When adding padding it only adds padding to beginning of the text and the end, as seen here:
CSS:
background: none repeat scroll 0 0 #1B1615;
display: inline;
font-size: 15px;
line-height: 3em;
padding: 10px;
Does anybody have any idea on how to make this happen?
I had this same question and I did some hunting and found a pure CSS solution this that only requires a little bit of CSS: CSS create padding before line-break
The basic solution is using padding on top and bottom and a solid box shadow to pad the left and right sides of the text, like this:
.highlight {
color:#fff;
background:#000;
box-shadow:5px 0 0 #000, -5px 0 0 #000;
padding: 5px 0;
}
Here's a method of achieving a multi-line, padded, highlight behavior for text using just CSS.
This is based on the box-shadow method found elsewhere, however as of Firefox 32 the traditional box-shadow solution no longer renders correctly.
Reviewing the changelog for FF32 I found there's a new property: box-decoration-break that causes the breakage.
This property defaults to 'split' but needs to be specified as 'clone' to achieve the desired multiline padding effect.
For more info see:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break
.box {
width: 50rem;
margin: 1rem auto;
font-family: arial, verdana, sans-serif;
}
h1 {
color: white;
font-size: 2.5rem;
line-height: 4rem; /* reduce size to remove gap between text */
margin: 0px;
}
h1 span {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
-webkit-box-decoration-break:clone;
-moz-box-decoration-break:clone;
box-decoration-break: clone;
}
<div class="box">
<h1>
<span>Multi-line, padded, highlighted text that display properly in Firefox using box-decoration-break: clone</span>
</h1>
</div>
Building on Brandon's solution, I figured out you can actually avoid the padding altogether and do it purely using box-shadow's spread option, and the padding on wrapped inline elements behaves as you expect.
.highlight {
background: black;
color: white;
box-shadow: 0 0 0 5px black;
}
you can use box-decoration-break
-moz-box-decoration-break:clone;
-webkit-box-decoration-break:clone;
box-decoration-break:clone;
working sample codepen
Just add:
If space in the text area is all you are looking for.
If this is a "title" or something similar and it wraps because the container is fluid, why not set the background color on the container, then when/if your text/title wraps, all of the space between the lines of text, as well as the text line length, will appear to be the same.
<html>
<head><title>...blah...blah</title>
<style type="text/css" title="text/css">
#masthead{
background-color:black;
color: white;
}
#masthead h1{
text-transform:uppercase;
}
#container{
background-color:red;
}
</style>
</head>
<body>
<div id="container">
<div id="masthead">
<h1>some sort of title goes here</h1>
</div>
</div>
</body>
</html>
Additionally, you can probably just enhance the text in the h1 tag with margin/padding styles to get the appearance you are after.
Add padding for the surrounding block-level element (e.g. div or td) and remove the padding from your span.