HopefulGJL

Awesome!

I was just able to change the z-index value in that style sheet the other day and from what I can tell, it has corrected the issue!

(That’s also the same style sheet I’ve entered the width and height values I have.)

Thank-you so very, very much for the info!!

Sure, and thanks! You can find it here. Please do excuse all the “construction dust” as it’s truly a work-in-progress!

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="https://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!

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>

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>

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!

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?

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

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?

Thank-you for that link. I reviewed it, but I must admit that I don’t completely understand what it’s attempting to convey. I tried a couple different things from there, but am still not able to get it to work.

And, since I’m looking to use this on only 1 page, I’m not sure why I would even attempt to put anything in to the head section of the site? Wouldn’t that make it so it’s all over the site rather than the 1 place I’m looking for it to be?

In answer to your other questions, I’m using the Flexsqueeze theme and I’m looking add this. It’s picture slider code.
The reason I’m looking to add that is because the plugins that I’ve browsed either don’t quite seem to have the look & feel of what I’m looking for, have really bad (written) reviews from others who tried them or aren’t tested to work with the latest version of WordPress.
That all said, I do realize that code is based on an old version of a plugin that’s available, though the current version isn’t tested to work with the current version of WordPress…So I’m therefore hoping to somehow use the code that I’ve linked to as it, if I can get the code where it should be, should give me the look & feel of what I’m looking for…

I have successfully manipulated quite a bit of code (with very gracious assistance) on my site up till now, though this is the first time I’ve attempted to incorporate so many different elements at once and I’ve not even attempted to adjust any type of script until now…

Ideas/feedback/comments?

OK, I have done even more research and through the very kind help from another forum, I now have both of the answers to this.

To begin, there is the the page options pull-down area of WordPress. To begin, go in to a picture like you are going to edit it. Then, near the upper right hand corner of the page, click the option for page options so that “panel” drops down. Then, check the option for comments. Then, close that panel and scroll down. You’ll now be able to check whether or not you have comments enabled on each picture, picture by picture rather than manipulating the code.

I actually took out the code I posted above and have opted to instead use these comments check-boxes.

Then, for the second part of my question, the other forum I mentioned has provided the answer.

The code that is working is:

<?php if ( ! is_attachment() ) { ?>
all your current stuff, meaning all my other code
<?php } ?>

I hope this information will help someone else!

OK, so through some additional research plus trail and error, I found this post that has this code:

<?php
if( !is_attachment() ){
comments_template('', true);
}
?>

That works perfectly in my single.php file to eliminate the comment sections of all the pictures there.

Then, it also works for the pages in my page.php file except that I am unable to find a way to allow the 1 and only 1 picture comments I want to allow.

Can the above code be adjusted to allow just the 1 and only 1 picture comment section through for just that 1 picture but no others?

And, I still have yet to resolve how the social media buttons are appearing on the picture attachment pages as well. How can I exclude those from the picture attachment pages? (The code is currently in my single.php file.)

Thanks in advance!

Thank-you for sharing your experience and providing me with another idea to try.

I did try a few different variations of table code, and unfortunately what ended up happening is that my 1st button was lower than everything else and then the 2nd button was higher than all the rest while all the other buttons were aligned correctly/evenly there-after.

I didn’t know what would need to be done in an attempt to correct that with the table codes I found, so I put my original code back for the time being.

Until I truly get social media up and going, I will just accept it as-is for the moment unless someone has other ideas?

Thanks very much for your time and patience in my response.

Well, it’s not what I really want, but it’s what I can live with (at least for now, anyway).

Here’s how I’ve altered the above code:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<p style="padding-left: 15px;"><a class="addthis_counter addthis_pill_style"></a>
?<a class="addthis_button_facebook_like" fb:like:layout="button_count">?</a>
?<a class="addthis_button_tweet">?</a>
<a class="addthis_button_pinterest_pinit"></a>
<class="addthis_toolbox addthis_default_style">
<a class="addthis_button_linkedin_counter" li:counter="none"></a>
?<a class="addthis_button_google_plusone" g:plusone:count="false">?</a>
</div></p>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=xa-518895bb724be09b"></script>
<!-- AddThis Button END -->

When I re-arranged what used to be that last button to make it the first button instead, the spacing code I found (and mentioned in my last post) is working between it and the facebook button when I put the code on either end of the facebook button.

I also needed to remove the div code before the LinkedIn button code so that LinkedIn wouldn’t appear on a 2nd line.

Now, I don’t know why there’s so much spacing around the Twitter button, but I can live with it for now if need be.

Does anyone have any other ideas on how to accomplish this or know how to eliminate some of the spacing around the Twitter button?
(Please note that I never put any spacing code around the Twitter button – it was just there by default for an unknown-to-me reason.)

Edit: Well, for whatever reason, that spacing code I mentioned in my last post isn’t appearing there in the code box, but it is there!

OK, I’ve done some more research, and I’ve found a partial answer. On this website, they have spacing code listed, and one of them is & # x 0 0 A 0 ;
<Sorry for the spacing between the characters; I couldn’t get it to appear here any other way, even with using the code option.>

When I put that before the +1 button code and after the +1 button code (but before the </a>, I get my desired space between LinkedIn and +1.

However, when I do the same for the last code, the add_this counter code, it makes that button completely disappear. But, when I remove the code, that last button comes back only to not have a space between it and the +1.

Does anyone have any ideas?