I have added php snippet that get terms option and display frontend.
But there is problem after switching to Hebrew.
values are displayed with "-" at the end, instead in front.
I tried almost every css code for unsetting rtl like direction: ltr !important;, but unfortunatelly without success.
I will attach two images.
Thanks!
<div class="elementor-shortcode">
<p>מ <strong class="none-rtl">-0.75</strong> ל <strong>-2.25</strong></p>
</div>
Related
I added a subscription box widget and I need to change the style to put the submit button inside the input box. It currently looks like this:
enter image description here
[enter image description here][2]
And I want it to look like this:
[2]: https://i.stack.imgur.com/Z4Aqe.png
Which I know how to do with plain html, but I'm not sure how to change the Wordpress widget html while keeping the functionality. Here is the widget code:
<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:genesis-blocks/gb-newsletter {"instanceId":0} /--></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->
Thank you in advance.
That is markup outputted from the WordPress' new block-based syntax (Background)
It's not quite HTML in that if you edit it, it would not render as you would expect; it will break, because the additional block code (not shown on the screen) expects only certain .
You have a couple options here depending how much time you want to devote to this:
Determine whether your has block styling options (borders, font, font-size, etc) already built-in to the block settings. Check the genesis blocks documentation to verify this. This will be the easiest option to do what you want but if you're asking this question, I'm guessing that the block doesn't have these options.
This is probably the best route to take:
In your group block container, on the right hand side, create a css class shown in this picture. Then, go to your theme's CSS; add a selector of that CSS class and begin adding the rules that you want. This may require some trial and error because you're likely need to write some additional selectors and increase the level of specificity so you can style exactly how you want it and override some other rules already written.
(You may also need to include !important as for your rules but that is a last resort and not a best practice for writing CSS)
You may also need to do this for the gb-newsletter block as well.
Writing your own blocks (which has frustratingly has a high learning curve, imho); this will offer the most customization but will be a LOT of time.
I am using Drupal 7. I want to animate the login block with aos.
The login block is called "block-user-login". It´s a <div id="block-user-login" ... >
Can I create some css code around to make "data-aos='zoom-in'" be associated to that #block-user-login ?
How can I create a style script to do that?
I dunno if you're still in doubt bout that. But you can try <div id="block-user-login" data-aos = 'zoom-in'> and after that you can config in css the color, the font and everything else.
I've downloaded a ready-made HTML5 website template from w3layouts.com that is under CC3.0 license. Because the used scripts like Bootstrap etc. are all old version I'm updating these and the source code to function. But I'm on a issue that I can't get resolved. I'm new in Bootstrap and it's my first time I'm working with it. I'm tired of coding my own designs. :)
The original/old template is using Bootstrap v3.3.4 and I using now 4.0.0-beta.
As you could see here in the original the "My Services" section is all in shape. But in my updated version the columns wont wrap. I've already tried a lot of things and Googled a lot but found no solution.
Here are the source codes:
HTML: https:// pastebin.com/NJYmqAk2
CSS: https:// pastebin.com/AdYUTtFe
(Sorry I had to modify the pastebin links 'cuz I'm not high reputated atm. :))
It seems that the version of Bootstrap you're using, is not dividing the columns width in %, and also they are not floating left.
In your HTML, there's a big problem with the row wrapped around each column.
<div class="row"> <!-- This wraps the column and defeats its purpose -->
<div class="col-xs-4 wthree_about_right_grid_left">
<div class="hvr-rectangle-in">
<i class="glyphicon glyphicon-pencil"></i>
</div>
</div>
</div>
Start by deleting the row, and then you're going to want to make the colums float left and determine it's width in %.
Like this:
By doing so, you can get it to act like on your template, and ultimately solve your initial problem.
You would benefit far more from using the version of bootstrap that is compatible with your template.
I am using ng-view to render dynamic data on my page. When the page loads, if I use static html I get this (top):
When Angular loads the page the data is there but it's like the element is still empty (bottom).
If I make even the slightest adjustment in Chrome dev tools, the items snap into place but I cannot get them to prefill without using CSS to make them static sizes, which doesn't work because text is different sizes. The elements in question have CSS of inline-block.
As you can see in this screenshot, I have tried two ways of populating the data, both with the same result:
<div class="cd-rating" ng-class="caseData.scoreClass">
<span class="score" ng-bind="caseData.adjustedScore | number:0" ng-cloak>N/A</span>
<span class="verdict">{{caseData.recommendation}}</span>
</div>
Here is the what the HTML looks like in the browser:
<div class="cd-rating medium" ng-class="caseData.scoreClass">
<span class="score ng-binding" ng-bind="caseData.adjustedScore | number:0">349</span>
<span class="verdict ng-binding">review</span>
</div>
If I hard-code that HTML identically, then it renders perfectly. It's only when Angularjs renders it that the elements are collapsed, appearing if there is not content.
I would also like to add that I am using RequireJS and manually bootstrapping the app instead of using the ng-app directive, in case that matters.
Any ideas on how to make the view fill the elements?
EDIT: Here is a video that demonstrates the behavior: http://youtu.be/zTwv-o6mWRM
I am not able to figure out what exactly you mean by the "..data is still there but the element is empty.." - the only issue that I find with the rendering by AngularJS is that the "Review" (button?) is overwritten with the number.
Looking at your code (which, as #Wingman4l7 suggests needs to be posted in the question rather than as a image), I see that you are using bindings to define a class dynamically. Instead, can you use the ng-class directive and see if it resolves the issue?
That is, replace:
<div class="cd-rating {{caseData.scoreClass}}">
with
<div class="cd-rating" ng-class="caseData.scoreClass">
instead and check if the issue gets resolved?
I'm using html5, JQuery Mobile and KnockoutJS, I Have a foreach template that renders a grid like GUI from an observable array.
However, when I add items to the bound array, the styles are not applied to any new items.
They appear unstyled, most of the times.
some times they appear with style, but once the styling fails, it stays broken for as long as I run my app.
Does anyone have any idea how to resolve this problem?
Snippet:
<div id="timeEntryList" data-bind="foreach: timeEntries">
<div data-role="header" data-theme="c">
<h1>some header</h1>
The odd thing is that it works sometimes.
Hard to guess without any code. But I guess you 're saying jqm doesn't render properly after dynamically adding elements. That's right it doesn't. I guess it's like the list. And you probably can do something like $('#mylist').listview('refresh'); but I don't know what sort of component you're talking about.
you can find more info in the documentation
jQM might not support more than one data-role="header" section. I would try conforming to their standard page layout with one header, one content and one footer section and see if that helps.
I've found that if I update my KO observables in pagebeforeshow I don't have to use .listview('refresh')