I need to change read more link to be displayed at the end of the paragraph.
I need it to be like the green paragraph. Today it is like the red paragraph.
Website: http://sindreolsson.tumblr.com - Check last post where I use read more.
CSS:
.tumblr-text .rmlink { display: inline; }
HTML
{block:Text}
<!-- TEXT -->
<div class="tumblr-text">
{block:Title}<div class="title">{Title}</div>{/block:Title}
<div class="copy">{Body}
{block:More}<div class='rmlink'>Continue reading..</div>{/block:More}</div>
</div><!-- /.tumblr-text -->
{/block:Text}
In my case, I also had to disable the <br> tags in order to make it work, kind of like this:
.copy br {
display: none;
}
If you have a parent container with a fixed width, set the child elements to have display: inline to have them collapse like in-line text
.copy * {
display: inline;
}
Of course, this will break the natural formatting of all previous <p></p> if you have more than one paragraph (which you don't want happening), so to preserve the original formatting, you only need to set the last element (specifically <p> elements) before the Read More break to have display: inline,
i.e. the second-last child element if your Read More <div> is the last child.
But actually by the looks of it, tumblr likes to generate a set of empty <p></p> tags after the final element of the {body} text, so you'll need to account for the offset.
.copy > p:nth-last-of-type(-n+2) {
display: inline;
}
This selects the immediate descedent > paragraph element p that is the last to second-last (-n+2) child of the type :nth-last-of-type.
To clarify, -n+2 in this scenario simply means select the last element, as well as the second-to-last element since you need to set the empty <p></p> that tumblr generates to display: inline as well as your actual last paragraph with content.
And then you can up the aesthetics with ellipsis if you want using additional CSS with the ::after selector and content: set to the unicode escape for ellipsis (u2026).
.copy > p:nth-last-of-type(2)::after {
content: "\2026";
}
EDIT :
Forgot to mention that this code alone will effect all posts that have <p></p>regardless of whether they contain the Read More break, and to only target those specific posts you need to modify the CSS to only apply to posts that have Read More links. One way to differentiate posts is to assign to the post a class name (e.g., readmore) wrapped around {block:More}{/block:More} block tags which only render on posts with Read More links.
CSS
.copy.readmore > p:nth-last-of-type(-n+2) {
display: inline;
}
HTML
<div class="copy{block:More} readmore{/block:More}">
...
</div>
Also, since Read More breaks are not rendered on the permalink page of the post, the CSS won't be applied there, and it will only be applied on index pages (your blog's main page) where the break occurs.
:nth-last-of-type
::after
… - \2026
Related
I have just (i.e., today!) started with the CSS grid but it doesnt seem to work. Before that however I notice that every single tutorial about it uses class instead of id. Is this because you have to use classes and not ids? I used class anyway but it still didn't work!
OK... just a simple structure to start with. I want a header, LH column for nav, main area, and RH column for other stuff (css in external stylesheet) but the header text and picture just appear on the LHS rather than 200 pixels in.
.container
{
display:grid | inline-grid;
grid-template-columns:200px auto 250px;
grid-template-rows: 300px auto;
}
.navbar
{
grid-column-start:1;
grid-column-end:2;
grid-row-start:2;
grid-row-end:3;
}
.header
{
grid-column-start:2;
grid-column-end:4;
grid-row-start:1;
grid-row-end:2;
}
and the HTML: (obviously inside the <body> tags!)
<div class="container">
<div class="header"><h1>Astronomy Speakers - Astronomical Societies</h1><img src="headerpic.jpg" alt="astrospe akers header" style="margin-left:40px" /></div>
</div>
for .container, you cannot have both grid and inline grid.
What I think happened here is you copied this code from a website that had grid | inline grid displaying as the options for the display property
The difference between class and Ids is that classes can be used several times on the same page,while Ids can only be used once on the same page. Also I did not see navbar used on your HTML code.
Am using mustache to populate data on an AMP HTML page.
Here is the target HTML on Google's ampb.in: https://ampb.in/#z4sIphWxKIOfZtfqWTpm
The buttons open a related structure, but are null here for simplicity.
How to make the second and subsequent <span> elements work inline as part of a <p>.
Have tried .keep-together {display: inline-block; float: left} but that does not work.
If I remove the mustache template the <span> and <button> work as expected.
Since the application depends on using mustache, how to make the inline elements work as they do without mustache?
Mustache is adding enclosing <p role="listitem"> tags to each of your <span class="keep-together"> elements. By adding
p, .keep-together { display: inline; }
all text with buttons will show as one inline element.
Disclaimer: I do not know much about mustache, there might be an option to prevent the additional tags. This is merely a CSS work-around.
I want to edit the "p" content which is inside the content div on my shopping cart page.
As the content div appears on every page, I don't wish to just go for "content + p"
Is there an attribute I can use that will "select all p tags in the div above cart-module"
<div class="content">
<p>The content I want to edit<./p>
<div class="cart-module">
<div class="cart-total">
Also, is there a problem with attribute rules slowing down the pages?
If the structure is always as you describe in you question then you can go with the first child selector:
.content > p:first-child {
background-color: red;
}
wich will get the p inside the content only if it is in the first place inside of it.
Regarding your second question, it will always depend on how and how many attributes you use on each page. The attribute selectors are slower than the ids or classes, because the latter are indexed by the browsers, just for this reason. Anyway, if you don't use them massively surely you won't notice the difference.
Of course, if you have access to modify the html structure the easiest would be to add a class to the p tags you want to select...
It's not possible with pure CSS.
If you want to style "all p tags in the div above cart-module", do some JQuery instead.
First, define a piece of CSS:
.my-custom-css {
color: chucknorris;
}
Then use JQuery prevAll()
$(".cart-module").prevAll().addClass("my-custom-css");
// Or do something with p tag
$(".cart-module").prevAll().find("p").addClass("my-custom-css");
// Edit content
$(".cart-module").prevAll().find("p").text("Thank God It's Friday");
Oh you want to modify something like structure or content of those "all p tags in the div above cart-module", just do the same with prevAll().
Since the font tag in HTML is being deprecated in HTML5 (and I understand why) is there a clean solution for applying certain attributes and styles to only portions of a paragraph text? I'm using JavaScript to parse an XML file that relies on the fact that the font tag allows portions of wrapping text to be formatted using class-based CSS. I realize the "anchor" (a) tag could also be used for this purpose, but that way seems very backwards and unnatural.
EDIT
When I asked this question (a couple years ago now) I was failing to understand that every DOM element falls into a display category, the two primary categories being:
block - insists on taking up its own row
inline - falls in line with other inline elements or text
HTML offers two generic container elements, each of which by default adheres to one of these display values; div for block display, and span for inline display.
The span element is the perfect way to designate a certain chunk of text and give it a unique style or ID because you can wrap it around part of a larger paragraph without breaking the selected contents into a new row.
The span tag would be the best way.
Although inline CSS is typically not recommended, here is an example:
<p>
This is my <span style="font-weight:bold">paragraph</span>.
</p>
span and div are similar, but the div tag is a block element, so it will cause line-breaks. span is an inline tag that can be used inline with your text.
HTML:
<span class="yourstyle">
Text in your style
</span>
CSS:
.yourstyle {
color: red;
}
you could use a <span> tag
<p>here is your paragraph text and it goes on and on and on..... and now
lets start some <span>formatted text.</span> here is another<span>section
of formatted text</span> here is unformatted text<p>
you can either do inline styles such as <span style="color: #000000; font-family: calibri, arial, helvetica;"> or you can just apply a class to your span, like <span class="textformat1" and <span class="textformat2">. then just apply different css rules based on the class.
.textformat1 {
color: red;
}
.textformat2 {
color: blue;
}
hope this helps
Always use css files to hold your code which will be considered "universal" for each element you set. When you want to set for a specific, lets say <span> element. You would do just as Adam Plocher said above, use the style="" attribute for the <span>element.
Is there a way to select multiple descended elements without writing the full path everytime?
For example, to select both a and b in the code below
<div id="wrapper">
Link
<b>Text</b>
</div>
I use
#wrapper a, #wrapper b {
font-size: 16px;
}
Is there anyway to select both a and b without having to write #wrapper on all the elements?
Short answer, nop.
Long answer. Since children elements will inherit what you set in their parent you can do this:
#wrapper {
font-size: 16px;
}
And, I think <b> is no longer used, but not deprecated:
Note: According to the HTML 5 specification, the <b> tag should be
used as a LAST resort when no other tag is more appropriate. The HTML
5 specification states that headings should be denoted with the <h1>
to <h6> tags, emphasized text should be denoted with the <em> tag,
important text should be denoted with the <strong> tag, and
marked/highlighted text should use the <mark> tag.