I have this html:
<aside id="secondary" class="widget-area col-md-4"
role="complementary">
<div id="text-3" class="widget widget_text">
<div class="textwidget"><p><strong>Sign In</strong>.
</p>
<p><strong>Create Account</strong></p>
<p><strong>Find your next employee on Adsler
</strong></p>
</div>
</div></aside><!-- #secondary -->
I want to target Find your next employee on Adsler
Tried.
.textwidget:nth-of-type (3) {font-size: 30px}
Nothing. Should I be doing something else?
Easiest way to achieve this is using javascript or jQuery
<script>
$( ".textwidget:contains('Find your next employee on Adsler')" ).css( {fontSize: "50px"} );
<script>
This script will find all the strings 'Find your next employee on Adsler' under specified class/id.
You can add the script directly in the js file or add this jquery code by downloading a plugin naming as "simple custom css & js"
Hope this will work.
Place a text widget in the sidebar on the page and place the following html in it.
<span style="font-size: large;">Foobar</span>
Related
I would like to add some text under the "Place Order" button at WooCommerce checkout.
I'm using the woocommerce_review_order_after_submit hook:
add_action( 'woocommerce_review_order_after_submit', 'add_after_checkout_button' );
function add_after_checkout_button() {
echo '<p>By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
Result (screenshot): https://ibb.co/F38bxDf
Could someone please help me edit this code to:
Add some space at the top (between the text and the "Place Order"
button)
Center align the text
Turn "Terms of Service" and "Privacy Policy" into clickable links
Decrease the line-height of the text
Decrease the font size
Is there a way to give this text a CSS class so I can control the styling of it with custom CSS? Or is possible to somehow type the custom CSS in the code snippet itself?
EDIT:
I've got 2 pieces of code.
Nr 1:
add_action( 'woocommerce_review_order_after_submit', 'add_after_checkout_button' );
function add_after_checkout_button() {
echo '<p class="text-under-place-order">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
and
Nr 2:
<script src="https://kit.fontawesome.com/5e15d2f246.js" crossorigin="anonymous"></script>
<div class="row">
<div class="column">
<i class="fas fa-lock"></i>
SSL encrypted payment
</div>
<div class="column">
<i class="fas fa-undo"></i>
100% money-back guarantee
</div>
</div>
Code snippet Nr 1 solves my initial question.
Code snippet Nr 2 is an addition to display "encrypted payment" and "money-back guarantee" above the text as per my request in the comments.
I don't know how to merge these 2 pieces of code into 1.
You could add a class like this:
function add_after_checkout_button() {
echo '<p class="yourClassName">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
Or use css inline like this:
function add_after_checkout_button() {
echo '<p style="padding-top: 10px;">By clicking on the purchase button, you agree to our Terms of Service and Privacy Policy</p>';
}
To turn the text into links just use a Terms and Service tag inside, just like you already did with the <p>.
EDIT:
HTML and CSS code to add an "encrypted payment" and "money-back guarantee" as requested in the comments:
<script src="https://kit.fontawesome.com/5e15d2f246.js" crossorigin="anonymous"></script>
<div class="row">
<div class="column">
<i class="fas fa-lock"></i>
SSL encrypted payment
</div>
<div class="column">
<i class="fas fa-undo"></i>
100% money-back guarantee
</div>
</div>
.row {
display: flex;
text-align: center;
}
.column {
flex: 50%;
}
You should just add a class to your tag <p></p> and style it in your style.css file in your child theme.
For the links, just add tags around the words "Terms of Service" and "Privacy Policy"
Obligatory 'I have googled but am stuck'. I have a number of documents on a page with associated collapsible 'More Info' accordions. I want to be able to report on when people click to open one of these accordions and what the corresponding document name is.
Implementing tracking in GTM to show opens on the accordions are not a problem, but how do I associate the document name (h4) with the click event?
Div containing document, document heading and associated 'More Info':
enter image description here
Div that the document heading and the more info button are in:
<div class="employee-comms-results-documents">
<div class="row">
<div class="col-md-9 col-sm-8 col-xs-12 no-padding-right no-padding-left">
<div>
<div class="primary-document-meta"><div class="doc-type-pill" id="doc-type-pill-Flyers">Flyers
</div>
</div>
<h4>Helping you save for retirement</h4>
<div class="secondary-document-meta">More info <span class="caret"></span>
</div>
</div>
</div>
Thanks in anticipation!
I think I would need to see the whole site structure to be sure, but for your example I created a JavaScript variable in GTM that returns the corresponding h4-text on click.
This code has worked for me:
function(){
var clickElement = jQuery({{Click Element}}).parent(".secondary-document-meta").parent("div").find("h4").text();
return clickElement;
}
I use WordPress-editor and I want to display an icon within a "span"-tag like this:
<div id="question1" class="box-around">
<div class="box-left"><span class="fa fa-search" aria-hidden="true"> </span></div>
<div class="box-right">
<h3>Some Heading</h3>
Some Text
<span id="question1-answer"> </span>
</div>
</div>
Whenever I make a change in "visual", it removes the "span"-tag and looks like this:
<div id="question1" class="box-around">
<div class="box-left"></div>
<div class="box-right">
<h3>Some Heading</h3>
Some Text
<span id="question1-answer"> </span>
</div>
</div>
Oddly enough, the span at the bottom (id="question1-answer") is kept. Am I missing something? I already tried to set a whitespace " " within the tag, which will be converted to a " " (actual whitespace) after changing text in "visual" and used different tags as well.
Thanks!
Add this code in your active theme functions.php file.
function override_mce_options($initArray) {
$opts = '*[*]';
$initArray['valid_elements'] = $opts;
$initArray['extended_valid_elements'] = $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
A little more specific - allow empty tags if they have an id, name, class or style attribute:
function override_mce_options($initArray) {
$opts = '*[id|name|class|style]';
$initArray['valid_elements'] .= ',' . $opts;
$initArray['extended_valid_elements'] .= ',' . $opts;
return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');
Maybe I'm doing something wrong, but for me it works. Still I'm sure there's a better solution - it would be nice to be able to add only one specific tag to valid elements.
With the above answers (Val) the function will allow empty tags but this still may not work due to the theme structure or any page builder plugins you may have.
For example, I am using WPBakery page builder with custom functions. For my to allow an empty span with style (background for example) I added the above code to my functions.php and also placed a tag within the block.
The span block has a custom class .break to where the styling is created, I then set a display: none on the tag within the .break class so the styling remains but the extra space is removed.
<span class="break"><br></span>
.break br {display:none;}
Now the empty span tag should display as normal.
How do i add some CSS to the Scala Helpers, and is it possible to remove the "Required" and "Numeric" text under the textfield?
#inputText(advForm("weeknr"))
#inputText(advForm("jaar"))
#inputText(advForm("datum"))
--------------------EDIT 1------------------
When I add my own CSS, im not getting the error warnings that i used to get when I try to upload an empty form, the text used to turn red. This is the code I changed
MyPlainFieldConstructor.scala.html(only 2 lines of code):
#(elements: helper.FieldElements)
#elements.input
advPlaatsen2.scala.html:
Added this line of code
#implicitField = #{ FieldConstructor(myPlainFieldConstructor.f) }
and this is how i placed the CSS(Foundation 5):
<div class="row collapse">
<div class="small-2 columns">
<span class="prefix">Email</span>
</div>
<div class="small-4 left columns">
#inputText(advForm("email"),
'id -> "right-label",
'placeholder -> "")
</div>
</div>
This way the forms looks how I want it to look but it doesnt show me errors and it doesnt even upload my files
but when i remove this line of code:(which is above the #import helper._)
#implicitField = #{ FieldConstructor(myPlainFieldConstructor.f) }
the form works as it should but looks really bad:
To customize the html and styles of a field you can write your own field constructor. Take a look to play docs here.
I'm writing a Stylish user style sheet, and am trying to see if something is possible. I am customizing a page that has a structure like this:
<div class="main">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
Where 'someExtraLayers' and 'someOtherLayers' indicate a few levels of divs inside divs. I'm not fully replicating the page's structure here for brevity's sake.
I have this in my user CSS:
div.post:nth-child(1) {
display:block !important;
}
Essentially, I'm making visible the first post element, and this does most of what I want to do. The thing I want to add is that I only want to make that element visible if the content of the page class is 1. If it's not 1, then I don't want to display the first post element.
CSS doesn't seem to offer conditionals, or boolean ANDs, that work this way. But I'm still new-ish to CSS, so I might be missing something. If I have to use a Greasemonkey script instead, I'll do that, but I was hoping there's some CSS trickery that will let me accomplish this.
Stylish cannot do this because Stylish just injects CSS and CSS does not have a selector for text content.
To do what you want, you will have to install Greasemonkey (Firefox) or Tampermonkey (Chrome) and then a userscript can set that visibility.
Assuming that div contains only 1, then something like this complete GM/TM script will do what you want. It uses the awesome power of jQuery selectors.
You can also see a live demo of the code at jsFiddle. :
// ==UserScript==
// #name _Show the first post on page 1
// #include http://YOUR_SERVER.COM/YOUR_PATH/*
// #require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// #grant GM_addStyle
// ==/UserScript==
var pageHasOne = $("div.main:has(div.page:contains(1))");
pageHasOne.each ( function () {
var jThis = $(this); //-- this is a special var inside an .each()
var pageDiv = jThis.find ("div.page:contains(1)");
if ($.trim (pageDiv.text() ) == "1") {
//--- Show the first post div. !important is not needed here.
jThis.find ("div.post:first").css ("display", "block");
}
} );
Given the logic that jQuery javascript must use, we can see part of the reason why CSS doesn't attempt to provide selectors for this. It's beyond mission scope for CSS, but the kind of thing that javascript was made for.
Also note that this is for a static page. If the page uses AJAX for its content, the logic becomes a bit more involved.
CSS can not access HTML content.
To solve the problem, you will also need to add a class so CSS can "see" it:
HTML:
<div class="main one">
<div class="someExtraLayers">
<div class="page">
1
</div>
</div>
<div class="someOtherLayers">
<div class="post">
blah blah
</div>
<div class="post">
foo foo
</div>
<div class="post">
bar bar
</div>
</div>
</div>
CSS:
.one .post:nth-child(1) {
display:block !important;
}