WordPress.org

Forums

[resolved] How can I get this code's styling to work? (11 posts)

  1. HopefulGJL
    Member
    Posted 3 years ago #

    Hello,

    I am looking to use some code on a page. It works beautifully in a general 'test' html text editor. Yet for some reason, it is not working as expected when I put it on my site's page where I want it.

    What happens when it's on my site's page is that the words appear as a centered list but none of the styling around the words appears.

    I viewed the page source when I had it there, and it shows that all of the styling is enclosed in <p> tags. I don't understand that at all since, as you'll see, there are no paragraph tags there.

    I did not put any paragraph tags on the page, though the page source shows there's other paragraph tags there. I don't understand that either.

    If you are wondering, I also always use only the text tab and never use the visual tab.

    Do you have any suggestions on how I can get this to display with the styling rather than only the 'ul' items on the bottom (like now)?

    <STYLE type="text/css">
          UL {
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            height: 150px;
            width: 527px;
            background: #27d130;
            margin: 12px 12px 12px 12px;
            padding: 5px 5px 5px 5px;
            box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -ms-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -o-box-shadow: 0 0 20px rgba(0,0,0,0.9);
                                                  /* No borders set */
          }
          LI {
            color: black;                /* text color is black */
            font-family: Arial;
            font-size: 14px;
            background: white;           /* Content, padding will be white */
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            margin: 12px 12px 12px 12px;
            padding: 12px 12px 12px 12px;
            list-style: none             /* no glyphs before a list item */
                                                  /* No borders set */
          }
          LI.withborder {
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            border-style: none;
            border-width: medium;        /* sets border width on all sides */
            border-color: #27d130;
          }
        </STYLE>
    
        <UL>
          <LI><b><center>Here is some text.</center></b>
          <LI class="withborder">Here is additional text.
        </UL>
  2. W.P. Ginfo
    Member
    Posted 3 years ago #

    I viewed the page source when I had it there, and it shows that all of the styling is enclosed in <p> tags. I don't understand that at all since, as you'll see, there are no paragraph tags there.

    Chances are the paragraph tags are in the TEXT of the page itself. Check the page / post editor in the TEXT-tab.

    When defining styles in a stylesheet / inline style, the LAST style-rules will be applied LAST, thus controlling the final look.
    See if this works:
    Remove the

    <UL>
          <LI><b><center>Here is some text.</center></b>
          <LI class="withborder">Here is additional text.
        </UL>

    and check the result

  3. HopefulGJL
    Member
    Posted 3 years ago #

    Thank-you for the suggestion!

    Unfortunately, when removing that section, absolutely nothing appeared.

    And, as mentioned above, I only use the text tab/editor and there are no paragraph tags there so I'm at a loss to understand this...

    Are there additional ideas?

  4. HopefulGJL
    Member
    Posted 3 years ago #

    Update: This seems to possibly be related to wpautop. Does anyone know the best way to disable that?

  5. HopefulGJL
    Member
    Posted 3 years ago #

    OK, I've found how to disable that. Per this post, I added the following to my theme's function.php.

    (Please note: The Codex article about this is MISSING the crucial php elements and it would be excellent if that would get added there!)

    <?php
    remove_filter( 'the_content', 'wpautop' );
    remove_filter( 'the_excerpt', 'wpautop' );
    ?>

    Now the paragraph tags are removed, but now there's a new unexpected result.

    For some reason, it's trying to apply the styling to the entire page rather than only the 1 place I want it.

    How can I get it so it will apply the styling only where I want it?

  6. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Which theme are you using?

  7. HopefulGJL
    Member
    Posted 3 years ago #

    Flexsqueeze. Please note that it's a paid theme, but I don't have access to their primary help forums as I got it when I went to a seminar so they don't recognize me as a customer.

    Is it really theme related, or can the code above be altered in some way?

    Note: I've found that 95% of the time when someone indicates the theme, it turns out that there was another, much simpler solution that didn't have to do with the theme. That said, I'm still open to suggestions and ideas...

    Thanks!

  8. Andrew Nevins
    Forum moderator
    Posted 3 years ago #

    Why not just switch to a theme we support: http://wordpress.org/themes/ ?

  9. HopefulGJL
    Member
    Posted 3 years ago #

    Thank-you for the suggestion, but I just found my answer!

    (And, in answer to your question, I've put a lot of custom work in to this so I'd rather not "throw it all away" by switching themes now...)

    I had to change

    <STYLE type="text/css">

    To:
    <style scoped>

    And then wrapped the entire thing in <div> tags.

    The end result is this:

    Thank-you very kindly everyone!

    <div>
    <style scoped>
          UL {
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            height: 150px;
            width: 527px;
            background: #27d130;
            margin: 12px 12px 12px 12px;
            padding: 5px 5px 5px 5px;
            box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -ms-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -o-box-shadow: 0 0 20px rgba(0,0,0,0.9);
                                                  /* No borders set */
          }
          LI {
            color: black;                /* text color is black */
            font-family: Arial;
            font-size: 14px;
            background: white;           /* Content, padding will be white */
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            margin: 12px 12px 12px 12px;
            padding: 12px 12px 12px 12px;
            list-style: none             /* no glyphs before a list item */
                                                  /* No borders set */
          }
          LI.withborder {
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            border-style: none;
            border-width: medium;        /* sets border width on all sides */
            border-color: #27d130;
          }
        </STYLE>
    
        <UL>
          <LI><b><center>Here is some text.</center></b>
          <LI class="withborder">Here is additional text.
        </UL>
    </div>
  10. HopefulGJL
    Member
    Posted 3 years ago #

    Important Update: I later learned that the plugin I was led to in order to (hopefully) get browsers to support the scoped piece wouldn't load so I couldn't use it. That meant that I couldn't use the above after-all because browsers aren't yet supporting it.

    So, through some additional research and some very kind assistance, below is the final code that is working.

    I hope this helps anyone who's looking to accomplish the same type of result(s)!
    (And note that the wpautop, as mentioned above, still needs to be turned off for this to work - well, on my site anyway...which means I'll manually go back to add the paragraph tags in, but I don't have much there yet and it will be easy to add them in moving forward...)

    <div>
    <style type="text/css">
          .ul UL {
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            height: 175px;
            width: 400px;
            background: #7220c9;
            margin: 12px 12px 12px 12px;
            padding: 5px 5px 5px 5px;
            box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -ms-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -o-box-shadow: 0 0 20px rgba(0,0,0,0.9);
                                                  /* No borders set */
          }
          LI.withborder {
            color: black;                /* text color is black */
            font-family: Arial;
            font-size: 14px;
            background: white;           /* Content, padding will be white */
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            margin: 12px 12px 12px 12px;
            padding: 12px 12px 12px 12px;
            list-style: none;             /* no glyphs before a list item */
            border-style: none;
            border-width: medium;        /* sets border width on all sides */
            border-color: #27d130;
          }
          LI.withborder {
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            border-style: none;
            border-width: medium;        /* sets border width on all sides */
            border-color: #27d130;
          }
        </STYLE>
        <ul class="ul">
        <UL>
          <LI class="withborder"><b><center>This is some text.</center></b>
          <LI class="withborder">This is some additional text.
        </UL>
    </div>
  11. HopefulGJL
    Member
    Posted 3 years ago #

    OK, I hope what I believe is the final update will help someone else.

    I have now, for the first time, figured out how to link to a .css style sheet I upload to the server.

    I, therefore, moved all of the styling code in to its own .css sheet.
    I also realized I didn't need 2 LI.withborder sections so I deleted one of those. The style sheet looks like this now:

    .ul UL {
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            height: 300px;
            width: 200px;
            background: #7220c9;
            margin: 5px 5px 5px -40px;
            padding: 5px 5px 5px 5px;
            box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -ms-box-shadow: 0 0 20px rgba(0,0,0,0.9);
            -o-box-shadow: 0 0 20px rgba(0,0,0,0.9);
                                                  /* No borders set */
          }
          LI.withborder {
            color: black;                /* text color is black */
            font-family: Arial;
            font-size: 14px;
            background: white;           /* Content, padding will be white */
            border-radius: 20px/20px;
            -webkit-border-radius: 20px/20px;
            -moz-border-radius: 20px/20px;
            -ms-border-radius: 20px/20px;
            -o-border-radius: 20px/20px;
            margin: 12px 12px 12px 12px;
            padding: 12px 12px 12px 12px;
            list-style: none;             /* no glyphs before a list item */
            border-style: none;
            border-width: medium;        /* sets border width on all sides */
            border-color: #27d130;
          }

    Then, on my page, I have the following (which calls that style sheet from the server):

    <div>
    <link rel='stylesheet' type='text/css' href="http://yourwebsite.com/wp-content/themes/nameofyourtheme/thenameofyourcssfile.css" />
        <ul class="ul">
        <UL>
          <LI class="withborder"><b><center>This is some text.</center></b>
          <LI class="withborder">This is some additional text.
        </UL>
    </div>

    What I think is the BEST part of this method is that I was able to re-enable the wp-autop by removing that previously mentioned code from the functions.php file with this method!

    Now, I'll just adjust the styling more as turning the wp-autop back on goofed up the look of my box, but adjusting the styling sheet should (hopefully) fix that...

    Anyway, like I said, hopefully all this info helps someone out!

Topic Closed

This topic has been closed to new replies.

About this Topic