Closed. This question is off-topic. It is not currently accepting answers.admin管理员组文章数量:1331893
Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.
Closed 4 years ago.
Improve this questionI'm building a theme with the Elementor page builder and I want to add some CSS output to certain elements. I hooked into the parse_css function.
I want to use the stylesheet::add_rules() function (code reference). This function takes three parameters:
Stylesheet::add_rules( string $selector, array|string $style_rules = null, array $query = null )
The first parameters, the $selector
and the $style_rules
are not so difficult:
$post_css->get_stylesheet()->add_rules( $element->get_unique_selector(), [
'width' => '300px',
] );
This is an example function where the element gets a width of 300px. The difficult thing here is the media query, $query
. I know that parameter wants an array as input, but it doesn't tell what kind of array or in which form.
I tried a lot of things. These are a few I thought logical:
$query = ['(min-width: 600px)'];
$query = ['@media (min-width: 600px)'];
$query = [
'min-width' => '600px',
];
The last one has the same form as the $style_rules
parameter, but it doesn't work.
I searched for examples, documentation, Github etc., all to no avail.
How can I change my $query
input parameter so that the code is rendered with a media query?
Many thanks if you can provide me with an example!
Closed. This question is off-topic. It is not currently accepting answers.Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.
Closed 4 years ago.
Improve this questionI'm building a theme with the Elementor page builder and I want to add some CSS output to certain elements. I hooked into the parse_css function.
I want to use the stylesheet::add_rules() function (code reference). This function takes three parameters:
Stylesheet::add_rules( string $selector, array|string $style_rules = null, array $query = null )
The first parameters, the $selector
and the $style_rules
are not so difficult:
$post_css->get_stylesheet()->add_rules( $element->get_unique_selector(), [
'width' => '300px',
] );
This is an example function where the element gets a width of 300px. The difficult thing here is the media query, $query
. I know that parameter wants an array as input, but it doesn't tell what kind of array or in which form.
I tried a lot of things. These are a few I thought logical:
$query = ['(min-width: 600px)'];
$query = ['@media (min-width: 600px)'];
$query = [
'min-width' => '600px',
];
The last one has the same form as the $style_rules
parameter, but it doesn't work.
I searched for examples, documentation, Github etc., all to no avail.
How can I change my $query
input parameter so that the code is rendered with a media query?
Many thanks if you can provide me with an example!
Share Improve this question asked Jul 13, 2020 at 10:10 ralphjsmitralphjsmit 4026 silver badges23 bronze badges 10 | Show 5 more comments1 Answer
Reset to default 1Preface
There's no WordPress-specific stuff in this answer, but I'm just trying to help since the official documentation is (as of writing) not very helpful..
But as I said in the comments, I don't use Elementor, which means I don't know much about Elementor's technical stuff. ( Even the non-technical ones, actually.. :) )
The $query
needs a min
/max
and a "device"
So the add_rules()
method in the Elementor's stylesheet class is using the add_query_hash()
and hash_to_query()
methods in the same class, then I checked the source and noticed that:
The
$query
array (the 3rd parameter for theadd_rules()
method) should have amin
ormax
item, e.g.'min' => 600
or'max' => 799
, or both.There needs to be a "device" named the same as the
min
/max
value in the$query
array. And for registering a custom "device", you can use theadd_device()
method in that class.Additionally, the
max
value in the$query
array must be within the range of the device sizes. For example in the below sample, themax
is799
, so the max device size must be800
or more.
Code I used for testing the add_rules()
:
Tested working, but not tried with the actual Elementor plugin.
$css = new Stylesheet;
$css->add_device( '600', 600 );
$css->add_device( '800', 800 );
// Outputs @media(min-width:600px){#foo{width:300px;}}
$css->add_rules( '#foo', [
'width' => '300px',
], [
'min' => 600,
] );
// Outputs @media(max-width:799px){#foo{height:400px;}}
$css->add_rules( '#foo', [
'height' => '400px', // this is merely a test
], [
'max' => 799,
] );
echo $css; // echoes the CSS media queries above
// It works because the class has a __toString() method.
Happy coding!
本文标签: pluginsWhat form should the query media query array have for an Elementor page builder function
版权声明:本文标题:plugins - What form should the $query media query array have for an Elementor page builder function? 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742265851a2443376.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
$query = [ 'min' => 600 ];
? But note, I don't use Elementor, so I was just guessing (based on their code). – Sally CJ Commented Jul 13, 2020 at 10:37@media(min-width:px) { .elementor-element-7a8d1c4 { width:300px; } .elementor-element-0d5248a { width:300px; } }
. I tried'600'
,'600px'
and600
but those all give the same results. When I change it tomax => 600
, I get a max-width output with 767px (first breakpoint). My guess now is that it works with preregistered 'devices' and not with numbers/custom queries. – ralphjsmit Commented Jul 13, 2020 at 11:23add_device()
before theadd_rules()
:add_device( '600', 600 )
. Then the'min' => 600
should work. There might be a better way, though. – Sally CJ Commented Jul 13, 2020 at 13:55$post_css->get_stylesheet()->add_device( '600', 600 );
). Thanks! Add it as an answer ;-) – ralphjsmit Commented Jul 13, 2020 at 14:46