HTML & CSS trying to copy paste css rule, but not working

[josh]

Hi folks,

I'm brand new to the group, so forgive me if I commit any faux pas.

I know very little about coding. I have not formal training or experience. I have several Wordpress websites that I really use for little else than to try to teach my self how to code. most of what i do is copying code then tweaking it until I get what I want. Over the years, I've done pretty well. I thought my process was sound, and that everything would work fine, but alas, no. So, I’m turning to you for help.

Here's the deal. I created a custom field in Wordpress for a pithy quotation to go above the content of each post. All good. I liked the style of the blockquote in the theme I’m using, so I just wrapped the post quote in a blockquote. I now want to tweak the blockquote style within my content, but I don’t want to mess with the post quote. So, I copied the blockquote rules in the stle.css file, pasted them below and changed the name for blockquote to postquote. I assumed that postquote would look identical to blockquote, but I was wrong. But shouldn’t it? I would think so.

Here's the code I’ve got going on:

In my content-single.php file:

<?php
            $post_quote = get_post_meta($post->ID, 'post_quote', true);
                if ($post_quote) { ?>
                    <postquote><?php echo $post_quote; ?></postquote><br><br>
        <?php
                } else {
                    // do nothing;
                       }
         ?>

And in the style.css file for the blockquote:

blockquote {
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
    background: #fff9f5;
    padding: 20px 40px;
    margin: 0;
    position: relative;
    box-shadow: 5px 5px 15px  rgba(0, 0, 0, 0.35) !important;
    border-radius: 15px;
}

And for the postquote:

postquote {
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
    background: #fff9f5;
    padding: 20px 40px;
    margin: 0;
    position: relative;
    box-shadow: 5px 5px 15px  rgba(0, 0, 0, 0.35) !important;
    border-radius: 15px;
}

Again, I thought they’d be identical, but they’re not. Look at the attached image to see (sorry, this site in on my computer, so not accessible). The blockquote at the top is the postquote and the one in the middle is the blockquote (as they should both appear...also, ignore the drop cap below the blockquote...that was from another test

For awareness, at the end of the day, I want the postquote to look like the current blockquote, then I want the block quote to look like the rest of the content, but all lines indented on the left and right (as you would imagine a traditional blockquote from school essays).

Finally, before you ask, the answer is yes, I’m using a child theme, so no worries that I’ll mess up the existing one (which is Cenote if that matters).

Thanks so much for your help.

Josh

 

[Deleted member 2829]

Well, the CSS entries for postquote and blockquote are certainly 100% identical. Not sure why you need two ?

I'm puzzled by your PHP code

<postquote><?php echo $post_quote; ?></postquote><br><br>

As far as I know there is no HTML tag <postcode>. Should this not be something like

<div class='postquote'><?php echo $post_quote; ?></div><br><br>

(in which case you would use .postcode in the CSS).
Or is this something Wordpress specific ?

 

[josh]

Thanks for the reply. I did try to .phostquote as well, and I got the same results.

I don't want blockquote and postquote to be identical. I'm just using blockquote as my starting point. I figured if I copied and pasted, it should look exactly the same and then I could tweak it from there....that's my problem that I'm trying to figure out..why it's not identical.

I created postcode, it's not a Wordpress thing. I figured that if blockquote worked, I could just use the same info, but rename it. If that is not the right approach, can you help me figure out what is? I'll try the div again, but it when I did it last time, it looked exactly the same as it currently does in the pic I posted.

Thanks,

Josh

 

[josh]

son of a gun.I did the div class again and sure enough it worked....I wonder if there wasn't something weird going on on my computer yesterday and turning it off overnight and turning it back on this morning cleared it up?

Either way, thanks again for getting me to revisit this! I super appreciate it. Now I can go and tweak away!

 

[josh]

Just to follow up on this in case anyone cares

As cbreemer suggested (and to be fair to me, I did try yesterday), I tried making postquote a div and it worked. So this is what I have now:

In my content-single.php file:

<!-- post quote here -->
        <?php
            $post_quote = get_post_meta($post->ID, 'post_quote', true);
                if ($post_quote) { ?>
                    <div class="postquote"><?php echo $post_quote; ?></div><br><br>
        <?php
                } else {
                    // do nothing;
                       }
         ?>
<!-- end post quote -->

And in the style.css file for the postquote (what the original blockquote had):

.postquote {
    text-align: center;
    font-size: 18pt;
    font-weight: bold;
    background: #fff9f5;
    padding: 20px 40px;
    margin: 0;
    position: relative;
    box-shadow: 5px 5px 15px  rgba(0, 0, 0, 0.35) !important;
    border-radius: 15px;
}

and the updated blockquote looks like this:

blockquote {
    text-align: justify;
    font-size: normal;
    background: none;
    position: relative;
     max-width: 550px;
    margin: 0px 80px;
    padding: 2px;
}

And the attached pic shows the final results. Yea! Thanks again cbreemer for making me go back and try again.

But I am curious...why is blockquote not a div? Is it written in somewhere else in the Wordpress source code?

 

[Deleted member 2829]

Glad I could help ! But why do you wonder that blockquote is not a div ? Why should it be ? As far as I can see, blockquote and postquote aren't recognized HTML tags. You can put them in your CSS but you must make the relevant HTML element refer to them with a class or id.