Looking to place a graphic on the same line/row as an h3 title like this:
<h3 style="display:inline;">Graphic Advantage</h3><img style="max-width: 50px; width: 100%;" src="https://sgdesign.com/images/SGDadvantage.png" alt="SGD Advantage" />
First I make the h3 display = inline so it only occupies it's actual width rather than the full row. I could float the h3 and the graphic left and then do a clearfix but it seems excessive. The goal is to simply place both the h3 and small graphic on the same line.
It fails because of Wordpresses auto formatting function wpautop() which sets automatically, a paragraph tag < p >
But yet this works when the secondary content (graphic) is wrapped in a shortcode:
<h3 style="display: inline;">Advantage SGDesign</h3>
[tooltip text="Throughout our site you'll see this icon that will help identify significant differences between SGDesign and other companies"]<img style="max-width: 50px; width: 100%;" src="https://sgdesign.com/images/SGDadvantage.png" alt="SGD Advantage" />[/tooltip]
QUESTION: Best practice to thwart the wpautop() function within a wrapped tag of some type?
Maybe creating a null shortcode like
function no_wp_autoformat_shortcode() {
return null;
}
add_shortcode('nowpautop', 'no_wp_autoformat_shortcode');
This will work but now it hides the wrapped < img ...
So the question changes to how to make an image show when wrapped by a Shortcode ?
<h3 style="display:inline;">Graphic Advantage</h3>[nowpautop]<img style="max-width: 50px; width: 100%;" src="https://sgdesign.com/images/SGDadvantage.png" alt="SGD Advantage" />[/nowpautop]
There is a way to stop Wordpress editor to automatically add in <p> element using remove_filter( 'the_content', 'wpautop' );. The down side of this will disable all the <p> elements in wordpress which is not good when comes to paragraphing your text. (It also gets problematic when people cut and paste text from word documents...)
Yes using shortcode seems good to me without having to overwrite the Wordpress core functionalities
Solved by creating a Shortcode that uses the linked file src as an Attribute. Details here:
How to create a Wordpress Shortcode that does nothing?
The primary problem was that Shortcodes REPLACE content so could not simply "wrap" an element to create the desired effect of disabling the auto format wpautop() function.
Related
I tried to add some buttons under posts on my tumblr page but they are displaying incorrectly. Like button has right position but reblog appears at the beginning of the post (and on the next posts reblog appears even outside post block). Also after first post text in the other posts moves to the left side. I don't know how to solve this problem.
Blog with problem: http://rkhmlvch.tumblr.com
Original code:
https://github.com/xSOADx/The-Default-Network/blob/master/Theme%20code
Fragment with needed code:
<div id="buttons">{likebutton}</div>
<div id="buttons">{reblogbutton}</div>
Images
First, if you're planning to use styles in a specific element, use ID. If you're planning to use styles repeatedly in multiple elements use Class. I will recommend that you change the ID's to class instead.
Example: <div id="post">...</div> to <div class="post">...</div> same goes to <div id="buttons">...</div>.
Anyway, back to your question.
Your first <div id="post">...</div> is inside <div id="wrapper"> then the rest are outside it. Put the rest of your post inside <div id="wrapper"> and all of them will be the same.
Next, for your buttons. Change it to this <div class="buttons">...</div> instead of <div id="buttons">...</div> then add styles to your CSS:
.buttons { display: inline-block; margin: 5px; }
I want to edit the "p" content which is inside the content div on my shopping cart page.
As the content div appears on every page, I don't wish to just go for "content + p"
Is there an attribute I can use that will "select all p tags in the div above cart-module"
<div class="content">
<p>The content I want to edit<./p>
<div class="cart-module">
<div class="cart-total">
Also, is there a problem with attribute rules slowing down the pages?
If the structure is always as you describe in you question then you can go with the first child selector:
.content > p:first-child {
background-color: red;
}
wich will get the p inside the content only if it is in the first place inside of it.
Regarding your second question, it will always depend on how and how many attributes you use on each page. The attribute selectors are slower than the ids or classes, because the latter are indexed by the browsers, just for this reason. Anyway, if you don't use them massively surely you won't notice the difference.
Of course, if you have access to modify the html structure the easiest would be to add a class to the p tags you want to select...
It's not possible with pure CSS.
If you want to style "all p tags in the div above cart-module", do some JQuery instead.
First, define a piece of CSS:
.my-custom-css {
color: chucknorris;
}
Then use JQuery prevAll()
$(".cart-module").prevAll().addClass("my-custom-css");
// Or do something with p tag
$(".cart-module").prevAll().find("p").addClass("my-custom-css");
// Edit content
$(".cart-module").prevAll().find("p").text("Thank God It's Friday");
Oh you want to modify something like structure or content of those "all p tags in the div above cart-module", just do the same with prevAll().
I have disabled wpautop through the given code:
remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );
This function works. But my actual problem is that, it removes custom "p" tags that I have manually used in the content.
So the problem is that when I don't use the above given code, there are automatic p tags that destroy my website and when I disable them, custom p tags are also disabled.
The easiest and simplest way to avoid wpauto issue is to understand how wpautop works,
Any plain text, or inline element that aren't wrap with block element will be automatically wrap with p. if element is block and doesn't have two line breaks inside it, it won't be wrap with P as well as the elements inside it, empty inline element will be strip and remove.
example
inline
<img src="blabal.jpg"> will be output <p><img src="blabal.jpg"></p>,
I am awesome will output <p>I am awesome</p>,
<span>Really?</span> will output <p><span>Really?</span></p>,
block
<div><img src="blabal.jpg"></div> will be output <div><img src="blabal.jpg"></div>,
<div>I am awesome</div> will output <div>I am awesome</div>,
<div><span>Really?</span></div> will output <div><span>Really?</span></div>,
<span></span> will output nothing, (empty inline elements will be removed.),
I really like wpautop, I never disable it, I just wrap any content with DIV if there's an element I don't want to have P, I also have a shortcode that avoids wpauto when element is inside, its helpful when you have a long ass content that wanted to avoid automatic p tag
Here's a fix/work-around I just found through experimentation. Give the <p> element an attribute (<p class>). It doesn't even have to have an actual value. WordPress seems to think that if it has an attribute, it's worth keeping. Furthermore, the attribute doesn't even have to be an actual HTML attribute. For example, <p data-please-work> seems to work just fine. I'm not saying I necessarily recommend doing that, but it's worth mentioning.
I actually discovered this problem myself just now, and searching for a fix lead me to this question. It's a very exasperating situation, and I don't understand why it works like that. You would think that disabling it would simply prevent WordPress from adding its own <p> elements—but no. It seems like it tries to prevent <p> elements, period—even yours.
If someone else has another way to go about dealing with this, I'd love to know. Silver's tips seem helpful to know though.
I am using rich snippets on my site, I have all of the code for them in the footer so that they are centrally located and easy to access. I do not want the text around these snippets rendered on the page because that info is elsewhere on the site. Is it ok to hide this text by using style="display:none" or will Google ignore the rich snippet entirely because the fields are hidden?
<!-- start rich snippet code -->
<div itemscope itemtype="http://schema.org/LocalBusiness">
<span itemprop="name" style="display:none">My Business Name</span>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress" style="display:none">123 Example Street, Suite 456</span>
<span itemprop="addressLocality" style="display:none">Major City</span>
<span itemprop="addressRegion" style="display:none">NY</span>
<span itemprop="postalCode" style="display:none">12345</span>
<span itemprop="addressCountry" style="display:none">US</span>
</div>
<span itemprop="telephone" style="display:none">(123) 456-7890</span>
<a itemprop="URL" style="display:none">http://www.mycompanysite.com/</a>
</div>
<!-- end rich snippet code -->
Any info would be much appreciated! Thanks in advance!
As #Diodeus said, ideally you'd have these rich snippets on the actual info that is shown to the user elsewhere on the site. Duplicating it is usually unnecessary.
Yes, Google may well ignore this content based on the display:nones. Can I ask why you're setting it on each element rather than just once on the highest level div?
A way around the display:none potential SEO issue would be to hide it in a different way. For example give the parent div a class of .visuallyhidden and add this to your stylesheet:
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
I would like to mention that Google tries heavily (using combination of algorithmic and manual things) to find websites which illegitimately use hidden text.
The typical penalty for that would be a removal from index for 30 days. However, you should not be concerned if you use hidden fields legitimate ways.
There is a very nice article Eric Enge Interviews Google's Matt Cutts regarding Google attitude toward illegitimately use of hidden text.
Have a look at this: https://sites.google.com/site/webmasterhelpforum/en/faq-rich-snippets and search for the word 'tempting'.
' It can be tempting to add all the content relevant for a rich snippet
in one place on the page, mark it up, and then hide the entire block
of text using CSS or other techniques. Don't do this! Mark up the
content where it already exists. Except in special circumstances ... '
It might seem like a clever idea to hide elements in a more complex way than by just display:none but, and i guess the same can be applied for hidden honeypot form fields, you are not the only one who can think of that.
Note: It is as easy to determine if a field is hidden by display:none as it is by margin:0; padding:0; width:1px; height:1px; overflow:hidden or by position:absolute; top:-[a value bigger than the page height]px or by something similar.
People would rich-snippet everything as an Apple product page if it would be ok to hide the snippet and provide any other kind of information on the porn - i mean page.
You got all that information already hanging out on the site, so just add the correct microdata tags to the corresponding text passages and google (other search engines, too by the way) will be happy.
So, for example, if your main page title already exists, put the itemprop="description" tag in the <div> tag thats is wrapping the title and you should be fine.
:)
I am trying to build a table which is scrollable in the x and y directions if the content is bigger than the container. I also want the header to always be visible at the top. I've got the first part working, and the header is always visible at the top, however the header column sizes do not match up with the table table sizes.
I've created this fiddle:
http://jsfiddle.net/xxQQS/1/
I am after a CSS only solution.
EDIT: There seem to be a quite a few people who seem to think that this cannot only be done with CSS. This may be true, however please don't just post to say 'no this can't be done'. If you can explain why this can't be done without CSS I'll accept your answer.
Create a clone of your table. For the first table, hide all rows except the headers using visibility: hidden. Hide the header of the other table using visibility: hidden. Place your tables inside divs with overflow properties set as follows:
<div style="overflow-x: hidden; width: 400px;">
<div style="overflow-y: hidden; height: 20px;">
<table id="head-only">
</table>
</div>
<div style="overflow-y: scroll; height: 100px;">
<table id="body-only">
</table>
</div>
</div>
May be for this you have to use JS. Check this http://www.tablefixedheader.com/
I too was searching for a solution for sticky headers to use it in my site. Finally found a Jquery plugin that seamlessly does this sticky header part.
https://github.com/jmosbech/StickyTableHeaders
You need not add any CSS, the plugin takes care of it. It clones the table header during scroll. Initialization is pretty simple
$('table').stickyTableHeaders();
Hope this helps :) As told in other answers, this cannot be achieved purely through CSS I guess.