1 Replies - 332 Views - Last Post: 20 February 2020 - 04:47 PM Rate Topic: -----

#1 sayhello   User is offline

  • D.I.C Regular

Reputation: 4
  • View blog
  • Posts: 314
  • Joined: 12-November 17

customizing a wordpress-theme:: How to apply CSS to a single postid

Posted 20 February 2020 - 11:28 AM

hello dear all experts of dreamincode,


customizing a wordpress-theme:: How to apply CSS to a single postid

what is aimed - what <strong>i am going to achieve: </strong> i am currently working on a page - ( which is beta-beta ) see http://www.job-starter.com For front-end images, we have to add them in WordPress Admin > Appearance > Edit CSS.


i have three postings on the site: eg. post-ids:
.post-256 ...
.post-258 ...
.post-260 ...

Let us have a closer look at the Posting 256 - it has the post-id (see more here .post-256 ...)we have the following - in the code we can see this: http://prntscr.com/r50bhr - cf <img src="http://prntscr.com/r50bhr"/>

Note: the image was added not as image but as background. The height of this element is determined by .panel-image-prop - padding value. By the way: However possible is, that the image will not have valid quality when we change this in CSS. We could / should do this in php file using thumbnail image size. However if we want to do individual CSS for each post, there an advice here could be like been seen here: https://www.wpbeginn...st-differently/

What is aimed: i need a CSS-rule that can be applied only to only post number eg to the postid-256 only.

regarding the customization: Here we have the wanted opposite behaviour: https://www.karavadr...eventeen-theme/
See that the images on this page and at this example all have differnt heights: the great and very well written tutorial - here at Bharat Kardavara has managed it to apply different heights to the different images. Thats just great.

again, what is aimed: i need a CSS-rule that can be applied only to only post number eg to the postid 256 only.

But this is not the case - my problem is that i cannot achieve the change of the height of only one featured image in other words - every time i do some changes _ then all the images are changing Here we have the opposite behaviour: https://www.karavadr...eventeen-theme/

But to be frank - we have to inspect the regarding elements in the browser and subsequently we have to find the correct applicable class-name for those images in question. In the tutorial it is ."single-featured-image-header img". In my theme (it is the twentyseventeen) it might be different.

question: can we even use CSS :first-of-type or :last-of-type pseudo-classes, Do we even be able to use greater than ( > ) CSS selector. Well i need to check the uses and apply then.

WordPress by default adds an unique class to each single post in the body tag. So we can take advantage of it. I guess that we have to Inspect the classes in the body tag and there we will find postid-NUMBER. So for given posts, the classes there will be postid-256, postid-258, postid-260 respectively.

Example: Now i think that we can adjust CSS rule something similar to:

.postid-256 .single-featured-image-header img {
/* display: block; */
/* margin: auto; */
height: 33vh;
object-fit: cover;
}


Assumtion: Then the rule will apply only to postid-number 256 only.
But wait:it looks like that if we change with postid -256 then we apply the changes for all and every image.

Then the rule will apply only to post number 256 only. But this is not the case - my problem is: i cannot achieve the change of the height of only one featured image - every time i do some changes, then all the images are changing. Here we have the opposite behaviour: https://www.karavadr...eventeen-theme/

see below the full css code - i guess that i have mixed it up with some mess...
can we even use CSS :first-of-type or :last-of-type pseudo-classes: Do we even be able to use greater than ( > ) CSS selector.
Well i need to check the uses and apply then.


Now you can adjust CSS rule something similar to:

.postid-256 .single-featured-image-header img {

/* display: block; */

/* margin: auto; */

height: 33vh;

object-fit: cover;

}


Then the rule will apply only to post number 256 only. But this is not the case - my problem is, that i cannot achieve the change of the height of only one featured image - every time i do some changes _ then all the images are changing
However possible is, that image will not have valid quality when we change this in css. We should do this in php file using thumbnail image size.

more links and ressources:

If we want to do individual CSS for each post, there is <strong>advice here</strong>: https://www.wpbeginn...st-differently/
Here we have the opposite behaviour: https://www.karavadr...eventeen-theme/
we have the following - in the code we can see this: http://prntscr.com/r50bhr - cf <img src="http://prntscr.com/r50bhr"/>

see the full CSS-Code:

.wrap { max-width: 1366px; }
.wrap { max-width: 1366px; }
/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 60%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 30%
}

/*Responsive*/
@media(max-width:768px) {
/*For Content*/
.has-sidebar:not(.error404) #primary {
width: 100%
}

/*For Sidebar*/
.has-sidebar #secondary {
width: 100%
}
}

/* STRUCTURE */

.wrap {
max-width: 80% !important;
}

.page.page-one-column:not(.twentyseventeen-front-page) #primary {
max-width: 100% !important;
}

@media screen and (min-width: 48em) {
.wrap {
max-width: 80% !important;
}
}

@media screen and (min-width: 30em) {

.page-one-column .panel-content .wrap {
max-width: 80% !important;
}
}
@media screen and (max-width: 650px) {
.wrap {
max-width: 95% !important;
}
}
@media screen and (min-width: 48em) {
.background-fixed .panel-image {
background-attachment: initial;
}
}
.custom-header-media {
    height: 6vh;
}
@media screen and (min-width: 48em) {
.panel-image {
height: 200px;
}}

.postid-256 .single-featured-image-header img {
/* display: block; */
/* margin: auto; */
height: 42vh;
object-fit: cover;
}

.postid-258 .single-featured-image-header img {
}
@media screen and (min-width: 48em) {
.postid-258 .panel-image-prop {
padding: 12px; height:33px;
object-fit: cover;
}}


love to hear from you

Is This A Good Question/Topic? 0
  • +

Replies To: customizing a wordpress-theme:: How to apply CSS to a single postid

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5537
  • View blog
  • Posts: 14,539
  • Joined: 18-April 07

Re: customizing a wordpress-theme:: How to apply CSS to a single postid

Posted 20 February 2020 - 04:47 PM

Honestly I didn't read through all that, it is too much. What I can say is that if you want to target a specific post with a given number, you have already identified it. You can target .post-256 with your CSS and it will style only that post.

Things to keep in mind with this however is that...

1) Your styles should come after any other styles that have been defined by the theme or wordpress itself. This means, make sure your CSS changes come last in the chain.
2) If there are any more powerful styles using something like !important or using an actual ID style aka. #post-256 { then you will have to get more specific or use !important too (again being further down in the styles list means yours will override)

You might also want to look at hooks that activate prior to template being chosen. At that point, in PHP, you can look at the ID and if it matches a given number, introduce some additional tagging into the template for which you can then target your styles. One such hook that comes to mind is https://codex.wordpr...mplate_redirect which should have the post Id available and can be evaluated. If it is "256" then add some additional markup to the template and have your CSS style that tag you add.

Good luck! :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1