I'm using the Display Posts Shortcode Version 2.5.1
user guide
I understand the list of attributes, even how to apply a wrapper_type (ol,ul,div) and how to apply a wrapper_class (ex: ".post-container"), and even a wrapper_id (ex: "#post-1").
The problem is that the output (4 separate posts) consists of a picture (I'm using "medium" size, which outputs a pic of 300px X 300px), a title, and an excerpt. What it looks like is a picture on the left, and then to the right of the picture is a title, and then to the right of the title is the excerpt.
What I need is to have the picture above the title and above the excerpt, so that picture, title, excerpt are vertically stacked instead of horizontally positioned.
I don't see any way using the [display-posts] shortcode a way to isolate the title and isolate the excerpt for styling in my stylesheet.
Here's an example post display. Note picture is left, post title is to the right of the picture:
Here's what I'm trying to achieve:
The documents page does give css examples:
.display-posts-listing .listing-item {
clear: both;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
...so you can see I can position the chunk as a whole (picture,title,excerpt using the .display-posts-listing class), or the image specifically. But, what about the title, and the excerpt? How can I re-position them to look more like example picture #2?
To be clear, I'm not fishing for lessons on css and styling and how to position elements. I know how to do all that. What I can't find is how to specify a class for "title" and "excerpt" in the display-post shortcode, and then I can just create that class or id in my stylesheet.
In the style.css of plugin "Display Posts Shortcode" do add one more class with css
.listing-item
{
float:left;
width:20%;
}
Related
I have used css to indent every parapgraph in wordpress by 30px. This was going great until I noticed that it also indented my centered aligned text by 30px. That makes this centered text off centered. It's even more noticible when I look at it on mobile and I want the text to be easy and professional to read on the go. So, I want to exclude "text-align:center;" from the 30px indents for every center aligned text.
I don't have access to the entire code of my theme with my wordpress premium account. I can only edit the css using a blank css editor in a menu option. Is this possible without being able to see the whole code?
I have tried looking this up on stackoverflow before posting and using this code...
#article p {
display: block;
text-align:center;
text-indent:0!important;
}
I now know that this "#workskin p.chapter" ID selector will not work because I have not added it to my code because I do not have access to the full themes code.
This is the css code that I am using to make the indents and the only code that I have in my css editor for wordpress "p" paragraph element...
article p {
text-indent: 30px;
}
I could not get any changes in making my indents disappear for the text that was center aligned.
I'd like to make my center aligned text centered with my site and not indented an extra 30px from the center. For example:
Title-centered with no indents
Paragraph one-indented
Paragraph two-indented
Break in paragraph-centered no indents
Paragraph three-indented
Paragraph four-indented
Break in paragraph-centered with no indents...etc
This is the first time I am using css. Usually I have a full theme to look at the code and I am able to make small edits using color# and changing the src of images but that is the extent of my coding knowledge and I'm learning a little more with each google search and comment. This is the last code edit I need on my site and I appreciate everyones comments and help.
The specificity in CSS is in the order of
Type selector(h1, p ,div...) < Class selector(rules with a period .) < ID selector(rules with #) but the rules defined with ! important overrides any other declaration ofcourse ;)
As discussed above if different set of rules are added for a same element i.e rules targeting elements with same specificity then the CSS will use the rules defined later on (i.e the latest one)
Example:
p{
color : red ;
}
p{
color : green ;
}
In this example the color of the text in paragraphs will be green and not red as rule with green color is defined after the red one.
p{
color : red ! important;
}
p{
color : green ;
}
But here because of ! importantis added to red the color of text inside the p will be red.
So in your case you can go with either defining the text-align: center ! important or just define the rules overiding the ones you don't want in the specific p tag but this can be done by defining it's specific CSS rules after the rules for normal p tags
first define the normal or default rules as
article p {
text-indent: 30px;
}
After this add the specific rules
#worskin p .chapter {
display: block;
text-align:center;
text-indent:0;
}
Thanks AuxTaco for your suggestion.
you can put class on the p that you want to exclude from it like:
article p {
text-indent: 30px;
}
// try changing it to this remember exclude is class on p tags you want to exclude
// Dont forget the dot (.) before exclude
// and the !important is after the value
article .exclude {
text-indent: 10px !important; // you put !important here
color: red !important; // like this
padding: 10px !important; // like this
}
MAKE SURE TO MAKE EXCLUDED P UNDER THE NONE EXCLUDED TO REWRITE IT
LOOK AT CODE COMMENTS CAREFULLY
Hope it was hepfull
hello I have a little problem after adding a widget script "Recent Post by Label on Static Pages" on the static page my header image has changed slightly but only on this page where I have add the script, for other pages it is good no problem the header image look great can you give me a solution and thank you
the problem page : https://mon-blogger-code.blogspot.com/p/tutoriel-blogger.html
enter image description here
enter image description here
You can remove height: 90 from the #header-blog style rule. It makes the height fixed, and removes part of your header image. If you can't change the style rule, add a new one that says:
#header-blog {
height: auto!important;
}
I had entered the following piece of css coding in my blog template to give a certain width value to all my post images. Essentially I wanted my post images to stretch the full width of the post container so everything looked uniformed.
.post-body img {
float: left;
width: 683px;
height: auto;
}
However the problem that has come about is that the share buttons at the end of the post have all changed to that width also, which I do not want. How do I change the width of my post images without that piece of coding altering the values for any other images in the post.
Do you have a sample of your html code that displays the problem that you are encountering? It would help to diagnose your problem much more easily.
A sample of the HTML in question would be beneficial. As #Adam says, it sounds like your share buttons can also be targeted with your CSS selector. If the share button images have another class on them, then you could amend your selector to something like .post-body img:not(.share-img).
I am new to CSS and learning it side by side while making a site.
I am confused about how to position elements.I want to know whether I should use div to position elements or do I do it directly by either using tags and ids.If I use tag names and IDs I don't have to use div separately to position the elements. I can both style and position at the same time.
When to use div and when not to?
Actually, I am trying to build something like this:
HTML5 has made divs a bit outdated with the introduction of the header, footer, aside, section, article tags and so on. In HTML5, divs should only be used when the content cannot fit inside one of the newer, more fitting tags that I just listed. Check out this article for better clarification.
If I understand your question properly, it appears to me that you have a misunderstanding of some very basic concepts.
Basically, a div can be thought of as a Container, Panel or Element which hosts other elements. You can position a div, but chances are you're also going to want to position any other element, so here is some very basic code:
Positioning an element:
<!doctype html>
<html lang="en">
<head></head>
<body>
<div id="uniqueDiv">
<!-- You cannot use the same ID on any element more than once on a page. If you need multiple elements with the same "id", use class instead. -->
<img id="one" src="one.png" />
<img id="two" src="two.png" />
</div>
</body>
</html>
* { margin: 0; padding: 0; outline: 0; border: 0; outline: none; border: none; }
uniqueDiv img {
margin: 10px 0 0 0;
}
#one {
float: left;
}
#two {
float: right;
}
The is the basic premise behind positioning. I did not add an example for Padding, but you should not position elements using Padding. You should use margin instead. Also, the line that begins with * is called a CSS Reset and the goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins etc.
Here's a brief explanation of what this code does:
The top piece of code is obviously HTML. It should be placed in its own .html file. The bottom piece, the CSS, should be placed in its own .css file.
So, we have 1 div and two images inside it. In this scenario, we want to have one image to the far left of the div and another to the far right. We also want to push both images down by about 10 pixels (positioning).
So, uniqueDiv img {} is used to position all images contained within the uniqueDiv down by 10 pixels from the top of its div. #one {} and #two are used to float the image to the left and the right.
My advice as per the excellent book "The Truth About HTML5 by Luke Stevens" switching to "Sections" "Header", "Footer", "Aside" etc can have accessibility problems as HTML5 is not recognized by all devices so to combat this you can make use of ARIA "Roles". You can still use Divs and assign "Roles" for your layouts, but adopting the HTML5 approach is what I would do.
Some good info is here;
Improving Web Accesibility
Aria Roles 101
I am working on a blog: http://poweryogatrainings.blogspot.com/search. If you check the link you can see that currently the blog posts are just below the thumbnail. Now I am trying to make the blog posts align beside (on the right side of) the thumbnail but I am not sure how. Does anyone know what is causing the line break and what can I do to avoid it?
Also I think there was a website where you could edit codes of your website and watch the preview without actually changing the codes. Any ideas about it?
Simply add left float to the image, and give it some space to the right and bottom, as below:
img.postthumb {
float: left;
margin: 0 10px 10px 0;
}
Use float to place your contents on same line. Like float:left; for img tag will allow contents to be displayed horizontally.
if your thumbnails are all the same width, then you can do this:
article { overflow: hidden; /* or some other clearfix method */ }
article img.postthumb { float: left; }
article h3, article header, article div.postbody, article footer { margin-left: WIDTH_OF_IMAGE }
a few points:
WIDTH_OF_IMAGE should be replaced by the actual width of your image, and possibly any extra space that you want to appear between it and the words of your article
the code I've recommended will line things up in columns, if you want to avoid that, then just remove the third line of css and you will have flowing paragraphs which wrap the image
there is a lot you could do to make your code a bit more consise, for instance your article's h3 tag should really be in your article's header tag etc. You also have <title> and <meta> tags in your body, when these are best placed in the <head> of your document..
anyway, good luck, I love yoga sites in general and, look forward to seeing the finished article