One page, every post has it's own div & CSS, how?

  • Hi. Right now I have my unfinished portfolio: https://www.mirelmasic.nl. The white squares with text are separate posts, and not all of them are of the same category. I want to make the website in a ‘city skyline’, each white square is a building. For example (for this topic’s sake, I’ll keep it simple), I want post X to feature a triangle on top of it, and post Y an antenna. So Post X uses div X, and Post Y uses div Y

    How do I exactly do this? this is the entirety of my content within <body>:

    <div class="container">
 <?php if(have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
 <div class="post">
 <center><h1><?php the_title(); ?></h1></center>
 <?php the_content(); ?>
 </div>
 <?php endwhile; ?>
 <?php endif; ?>
 </div>

    Can I make a if statement outside the container div? If category X, then show div X (triangle), elseif category Y, then show div Y (antenna), and so on with other types of buildings.

    Is there a certain plugin which can help me achieve this, without the use of if statements? If someone knows something, I’d greatly appreciate it, I never got around to thinking this one out. Thanks ??

    If anyone’s interested, here’s the css: https://www.mirelmasic.nl/wp-content/themes/mireltheme/style.css

Viewing 9 replies - 1 through 9 (of 9 total)

  • instead of

    <div class="post">

    could use

    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    which would give you an output like

    <div id="post-915" class="post-915 post type-post status-publish format-standard hentry category-themes category-tutorials tag-get_locale tag-l10n tag-load_theme_textdomain tag-localization">

    you could then name your classes after your categories in your css

    Thread Starter kerelberel

    (@kerelberel)

    Isn’t that the Post ID, and not the Category ID?

    the Div ID is the post ID, the class has the post ID, plus post format, post type, and all associated cats and tags

    so I would assume you would want to work with the category as class

    so for instance if I targeted

    .category-tutorials {
      amazing: css rules;
}

    in my stylesheet, it would style that post

    Thread Starter kerelberel

    (@kerelberel)

    It works, so thanks for that ?? I’m still not there yet.

    I’m.. kinda oblivious on how I can apply this to have a div on top of the existing div. For instance, I want my .category-video to have a div on top of it called .roof1.

    .category-art should have .roof2 on top of it too.

    But .category-website should have a div .sidewall floated to the left of it.

    Thread Starter kerelberel

    (@kerelberel)

    Well, this is essentially what I want, but divs don’t go inside php statements. I’m not sure how I can accomplish this any other way. I tried closing each php statement but unsurprisingly it doesn’t work.

    [Code moderated as per the Forum Rules. Please use the pastebin]

    Thread Starter kerelberel

    (@kerelberel)

    edit – here it is: https://pastebin.com/LneLZNpF

    Well, this is essentially what I want, but divs don’t go inside php statements. I’m not sure how I can accomplish this any other way. I tried closing each php statement but unsurprisingly it doesn’t work.

    Thread Starter kerelberel

    (@kerelberel)

    On another forum someone remade the code to this: https://pastebin.com/RxpFW0XV

    But it only reads out the first loop and makes every post the video category.

    Thread Starter kerelberel

    (@kerelberel)

    Now it’s like this: https://pastebin.com/dW6kDira

    Right now it’s not on the website. If I change it to the code in the pastebin link, every post gets on top of another post. How does that happen?

    edit: seems to be working now

    Thread Starter kerelberel

    (@kerelberel)

    seems to be working now, but if I place a div, the whole CSS get’s screwed up, because of the weird layout. Sigh. Now CSS’s the problem, and not PHP.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘One page, every post has it's own div & CSS, how?’ is closed to new replies.