I'm a very beginner using a plugin in WooCommerce and the plugin that show a sentence before the price, and I need to invert its order.
Now is:
You can earn 2 points $100 (in a single line)
Where: "You can earn 2 points" is the message from <span class="wc-pts-rwd-product-message"> and $100 is from <span class="amount">
The html is this:
<div class="single_variation">
<span class="price">
<span class="wc-pts-rwd-product-message">
<span class="amount">$100</span>
</span>
</div>
How should I write the css to make it show like:
$100
You can earn 2 points
First the price (amount) and than the message of points below the price.
I found that this is coming from the plugin so I can't change it or updates will be compromised.
If I can get it done only by css?
Could somebody help me with this? Thanks a lot!
Here is a pretty hacky way you can do it with css only:
.single_variation .price{
display: inline-block;
width: 180px;
}
.single_variation .wc-pts-rwd-product-message{
float: right;
}
.single_variation .amount{
float: left;
}
Tweak the 180px value depending on your font size. css is not too well suited to this task and it would be better to change the HTML flow if you can.
To do this in WordPress you'd need to find the template where this is outputted and overwrite it in your theme. This way your change won't be overwritten when the plugin updates. Below are some methods to get you started modifiying WordPress plugins without changing core code:
Hooks and filters - http://blog.teamtreehouse.com/hooks-wordpress-actions-filters-examples
Overwriting templates - https://docs.woothemes.com/document/template-structure/
Modifying theme with a child theme - https://codex.wordpress.org/Child_Themes
A method of modifying css is to install the Jetpack plugin and activate their css module. Then in the WordPress admin area under Appearance->Edit CSS you'll be able to add your own css declarations that can overwrite original css.
You can try like this -
<div class="single_variation">
<strong class="amount">$100</strong>
<span class="wc-pts-rwd-product-message">You can earn<span class="price"> 1 </span> points</span>
</div>
Related
We run a site with WordPress and use a template for our design.
On our homepage we have a scroll of our blog posts that includes a title, author/post info, reading time and an "excerpt"?
We're trying to get rid of the "excerpt"
blog-post-content-list-sider is the div and the text is just a #text within.
Everything I've looked up is something like .blog-post-content-list-sider { display: none; } but that would hide the entire thing not just one aspect of it (if I understand correctly)
This is the code for 1 blog-post-content-list-sider
The part that starts with "A Cutting-Edge" is the text that I need removed from each post on our page.
<div class="blog-post-content-list-sider">
<div class="textalignleft subtitle_post_standard">
Artificial Intelligence Emerging Technology Medicine</div> <h3 class="title_post_standard"> AI: The Key to Fertility Treatment? </h3>
<div class="fancy_one ig_meta_post_classic textaligncenter">
<span><div class="indie_author">By <b> <div class="vcard author">
Sohail Merchant</div> </b>
</div><div class="indie_on">on </div><div class="updated indie_date"> <b> August 30, 2020</b> </div> </span></div>
<span class="rt-reading-time" style="display: block;"><span class="rt-label rt-prefix">Reading Time: </span> <span class="rt-time">4</span> <span class="rt-label rt-postfix">minutes</span></span>
A Cutting-Edge Discussion about AI’s Eminent Role in Reproduction Intro Artificial intelligence has been widely useful in the diagnosis and treatment of diseases. However, little has been discovered about its capabilities in the realm of fertility treatment. Well, all that is about to change because we will soon experience the first application of AI in […]
</div>
EDIT:
I tested this CSS code and it works. Codepen link here
Please try
.blog-post-content-list-sider{
visibility:hidden;
}
.blog-post-content-list-sider>*{
visibility:visible;
}
I'm looking for the method to put a label and text in a div, within a class.
I have this html:
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<br/><label>Phone:</label> 7576XXXXXX
<br/><label>Location:</label> London, UK
</div>
<div class="showawpcpadpage"><label>Price:</label>
<strong>£ 3.00</strong></div>
<div class="fixfloat"></div>
I want to put the label 'phone' within a div class and, if necessary, the text after it in a div class.
Basically the aim of this is to be able to select the label 'phone' and the text after it, and give it a background color.
I don't know where I would insert it in given html, or even what it would lool like?
Im guessing somewhere after 'Anonymous,'
so:
Anonymous</a> div class="Phone:"><label>Phone:>.
</label>
and then continuing with existing code:
<br/>label><Phone:></label>7576XXXXXX
<br/>..........
First of all, I would suggest you go through some basics of HTML. This would be a good start: https://www.w3schools.com/html/
Now coming back to your question, you could enclose it like this:
<div class="awpcp-subtitle">Contact Information</div>
<a href="https://adsler.co.uk/wp-user-test-dashboard-
2/awpcp-reply-to-ad/13/madame-bovary/">Contact
Anonymous</a>
<div class="phone"><label>Phone:</label> 7576XXXXXX</div>
<div class="location"><label>Location:</label> London, UK</div>
</div>
<div class="showawpcpadpage"><label>Price:</label>
<strong>£ 3.00</strong></div>
<div class="fixfloat"></div>
Here, I have removed the <br> because you were using it to make that Phone and Location display in separate lines. Since we are using <div> tags are block level element by default, the contents of it will be displayed in separate lines.
So, now you can change the color of those two boxes like this:
.phone{
background-color: red;
}
.location{
background-color: yellow;
}
And lastly you asked about how to do this in Wordpress. As you may already know Wordpress uses Themes, you have to check which one is your current theme (the one that is running in your website). This can be checked via visiting Wordpress Admin Panel --> Appearance --> Themes. You will see the current active theme's name in that page. Now you have to use an FTP Client or the File Manager in your cPanel to access the following the location: /wp-content/themes/yourthemename/ in your server. Here, youthemename is the name of the theme that you noticed in the previous step.
Once you are in that folder, you would see a bunch on template files. I would suggest taking a close look at each file if you are unsure. Or its better you get a basic idea of Wordpress first before editing it. Take a look at this: https://developer.wordpress.org/themes/basics/template-hierarchy/
Once you find out the template file has this HTML code you wanted to edit, simply open it and make the changes and save it. You are all done. If you are using any Cache plugins in your Wordpress, you might need to purge the cache if you don't see the changes when accessing the webpage.
That being said, my writeup might give you a small confusion. That's why I suggested to have a look at the basics first. Otherwise you have to hire someone who would be ready to do that specific changes for you.
Hope it helps.
In Joomla how can I add a style to a article like this?
I try to edit the html in the editor but the editor deletes everything inside style
<style>
span{
color: #0099ff;
}
img{
float: right;
}
</style>
<div>
<h3>
<span>
<strong>
<em>Water Innovation through Dissemination & Exploitation of Smart Technologies</em>
</strong>
</span>
</h3>
<img src="/images/home/ict4water_projects_logos.png" alt="ICT4Water projects logos" width="400" height="225"/>
</div>
You can temporarily turn OFF the editor at the global settings to save an article or setup allowed tags list at the editor settings.
It's better to avoid embedded CSS whenever possible. Have you tried adding your custom CSS to your template's template.css file (or a custom.css file if it has one)?
In lieu of that, what Victor Yuoshev suggested will work HOWEVER any future updates to that particular article will always have to be done with the editor turned off, otherwise when you go to save it your embedded CSS will just get stripped out again.
Hey probably sounds like a repeat questions. Tried all the solutions on stackoverflow but seem not to get the answer.
www.sextoyswizard.com (no adult nudity on this site)
Only does not run on mobile . You cant add anything to the cart nor click anywhere on that page to load description for instance.
There's a container that overlaps your div with id="container". It looks as though it's your search container that exists at the bottom underneath the product options.
<div id="container">
....
</div>
<div id="secondary" class="" role="complementary">
....
</div>
You need to either move this div somewhere or remove it. So you'll have to set up your markup to take that into consideration.
For example, in css I added:
#secondary {
float: left;
width: 100%;
}
This kept the search form in the bottom.
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.
:)