So I'm styling this posttype in Wordpress, and when the user links to a soundcloud track that track will show in the post header. Now, if that user posts more than one link I'd like the next ones to be in the content of the post, excluding the first one which already appears in the header.
This is what rougly is output:
<div class="content">
<p><iframe/></p>
<p><iframe/></p>
<p><iframe/></p>
<p><iframe/></p>
</div>
How do I style this in CSS so only the last three iframes displays?
Michael
Try this:
.content:first-child{
display: none;
}
Related
I tried to add some buttons under posts on my tumblr page but they are displaying incorrectly. Like button has right position but reblog appears at the beginning of the post (and on the next posts reblog appears even outside post block). Also after first post text in the other posts moves to the left side. I don't know how to solve this problem.
Blog with problem: http://rkhmlvch.tumblr.com
Original code:
https://github.com/xSOADx/The-Default-Network/blob/master/Theme%20code
Fragment with needed code:
<div id="buttons">{likebutton}</div>
<div id="buttons">{reblogbutton}</div>
Images
First, if you're planning to use styles in a specific element, use ID. If you're planning to use styles repeatedly in multiple elements use Class. I will recommend that you change the ID's to class instead.
Example: <div id="post">...</div> to <div class="post">...</div> same goes to <div id="buttons">...</div>.
Anyway, back to your question.
Your first <div id="post">...</div> is inside <div id="wrapper"> then the rest are outside it. Put the rest of your post inside <div id="wrapper"> and all of them will be the same.
Next, for your buttons. Change it to this <div class="buttons">...</div> instead of <div id="buttons">...</div> then add styles to your CSS:
.buttons { display: inline-block; margin: 5px; }
first have to say that I have no idea of CSS. I am googling around and trying to customize my Squarespace webpage, reading comments, testing... Now I'm trying to make my blog more print-friendly. I inspected the entire page, looked for id's, classes, etc and then used
<style media="print" type="text/css"> /*Hide elements you don't want to print*/
#header, #footer, #preFooter, #rightSidebar, #sidecarNav, #contentinfo, #yui3-css-stamp, #_atssh, #service-icons-0, #rw_lso_flash, #at4-thankyou, .meta-above-title, .meta-below-title, .p-comment, .sqs-block-markdown, .rw-ui-squarespace-container, .entry-footer, .pagination
{display:none;} </style>
to remove whatever I don't want to be printed. However, there is one element which I don't know how to add to the list. It is basically the url address of my post title. I tried $(".entry-title.p-name").attr("href") but it didn't work. This is the code of one arbitrary post title on my blog:
<h1 data-content-field="title" class="entry-title p-name">
<a href="/updates/2016/4/7/fathers-sons-and-fishes" class="u-url" rel="bookmark">
Fathers, Sons and Fishes</a></h1>
I hope you can help me with this one.
Sincerely, Artur
.entry-title.p-name > a { display: none; }
Should work.
It sets any anchor inside a div with class="entry-title p-name" to non-visible. The > item indicates "child of". So, it translates to .entry-title.p-name 'children' a
Barring this, you can add a class to these specific anchors to hide that class.
What you have posted you tried ($(".entry-title.p-name").attr("href")) is a javascript or jquery selector. It is not CSS. You don't need javascript/jquery for this. If can be done with CSS.
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().
Hey probably sounds like a repeat questions. Tried all the solutions on stackoverflow but seem not to get the answer.
www.sextoyswizard.com (no adult nudity on this site)
Only does not run on mobile . You cant add anything to the cart nor click anywhere on that page to load description for instance.
There's a container that overlaps your div with id="container". It looks as though it's your search container that exists at the bottom underneath the product options.
<div id="container">
....
</div>
<div id="secondary" class="" role="complementary">
....
</div>
You need to either move this div somewhere or remove it. So you'll have to set up your markup to take that into consideration.
For example, in css I added:
#secondary {
float: left;
width: 100%;
}
This kept the search form in the bottom.
I'm new here, this is my fist question, but I've performed research and can't find the answer.
I'm developing a Wordpress site and hacking a template that uses masonry with summaries and thumbnails on a grid on the index page. When you click on an image you're directed to the post content. This is the theme: http://jinsonathemes.com/fabs/?themedemo=Vasiliki
What I'd like to implement is this:
When the user clicks on the thumbnail, the content is revealed and expanded on the same page. Here's an example from Up Magazine: http://upmagazine-tap.com
I looked at the JQuery script on this very cool Fiddle (#FS34t). The boxes expand and collapse content on click, but that's not quite what I have in mind for this site. Will definitely implement on another.
I thought it would be an easy show /hide function, but each image is linked to a specific post using the same "content" div. How would I use an image in a masonry grid as the trigger for an expand/collapse of content of the respective post -- as in the Up Magazine sample?
Thank you for reading.
I would add the_content to the post div in its own child div. Then hide that div in the css.
Then I would create a function that opens up that div [I'd use jQuery slideDown()]. The function would also include the masonry reload method [.masonry( 'reload' )] in that function.
I would then bind that function to a click on the div, or perhaps the post thumbnail.
Very roughly:
html
<div class="post">
<?php the_post_thumbnail() ?>
<div class="excerpt"><?php the_excerpt() ?></div>
<div class="post-content"><?php the_content() ?></div>
</div>
the css
div.post-content {
display: none;
}
js
$('.classofpostthumbnail').click(function() {
$(this).siblings('.excerpt').slideUp();
$(this).siblings('.post-content').slideDown();
$('.masonrycontainer').masonry('reload');
});
However my js could definitely be improved. [For starters chain the slides with their callbacks so that all the animations run after each other. And of course your html and css will probably be a lot more complicated.
Well ... UpMagazine does not have hidden content on div's we load content into the container with AJAX sending requests to /wp-admin/admin-ajax.php (see: http://core.trac.wordpress.org/browser/trunk/wp-admin/admin-ajax.php ).
Glad you liked the website.