I'm using wordpress and elementor and some times i need css. Can anyone help me about how I can choose a specific page that css won't work on
I'm using elementor toogle. The toogle come as a closed by default but I want some page's toogle to be opened by default while other toogle, which I use in my website, stay closed by default.
For this purpose, I found the css that is below, but when I use that, all toogle in my website are open by default. For this, I want to except a specific page that the css won't work on.
.elementor-toggle .elementor-tab-content {
display: block;
}
Many thaks for repliers
Using conditional tags, example in the header.php:
<?php if(is_page("page_id or slug")): ?>
<style>
/* some CSS */
</style>
<?php endif; ?>
Related
Need a CSS code that will disable the primary menu on mobile screens:
main-nav id="menu-primary-menu"
"menu-primary-menu" class="mobile-navigation">
I think there's a conflict with the theme to prevent it.
My problem:
I haven't been able to find the menu-primary-menu code in Functions.php either to disable the mobile class.
Simply add the following custom CSS code in style.css file of your theme:
.mobile-navigation{
display: none!important;
}
I am using this theme in Wordpress
Click Mag. This theme has a built in functionality which shows sharing options for multiple social media platforms. I would like to hide that for a particular page. Is there any option for that?
I know I can write page specific css but I was thinking if there is any other nice way to do it.
Thanks in advance.
There are a couple of ways to do it.
Add an inline CSS, that corresponds to that page
body.your-page-id #mvp-nav-soc {
display: none;
}
You can also do it with PHP, but not recommended as it increases server load
<?php ?>
<?php if( in_page('your_page') ) { ?>
<style>
#mvp-nav-soc{
display: none;
}
</style>
<?php } ?>
How can I update the default WordPress Theme Customizer toolbar CSS so that I could for example change the text color from the default black.
The default hook to add admin CSS does not seem to work here add_action('admin_head', 'custom_admin_css');
So for example the #theme-description id, could be change to another color but how?!
*I actually want to add some CSS to a custom option but rather than pasting lots of confusing code I am trying to keep the question simple, so If I can change the CSS for this then I can create CSS for what I need.
Many thanks
You could try the customize_controls_print_styles hook I think:
function theme_customizer_css() { ?>
<style>
// Custom Styles in here
</style>
<?php }
add_action( 'customize_controls_print_styles', 'theme_customizer_css' );
My website users are using TinyMCE editor to write contents and after finish writing contents they save it to my database. I then fetch those articles from database and display it using the following code:
<h2><?php echo $records ['article_title']; ?></h2>
<div style="text-align:justify; font-size:12px;">
<?php echo $records ['article_content']; ?>
</div>
If my users use font size or format texts, my CSS inside the div doesn't work. For example; if any user uses 14px font size and set the text-align to right for an article, the code style="text-align:justify; font-size:12px; inside the div doesn't work.
I don't want to display the content in font-size more than 12px;
Could you tell me how to do it ?
Thanks :)
Edit
In my CSS file I have added the following code:
.textformat{
text-align:justify !important;
font-size:12px !important;
}
and then in my view file:
<div class="textformat">
<?php echo $records ['article_content']; ?>
</div>
But still its not working, please suggest me something else.
Thanks :)
If this is how you always want the css to be within your user editable area style="text-align:justify; font-size:12px; then put this style="text-align:justify !important; font-size:12px !important; into your css file. This will supersede the inline styles output from TinyMCE.
I'm sure you could go into the TinyMCE back end and change settings but this is a quick fix.
Style sheets are cascading, meaning a more specific style will be applied. The style in the article_content will be more specific than the one on your div, and will thus be applied. There is no "solution" to this, as this is the behavior as intended.
There are at least two ways out though:
Use !important on your styles to overrule the cascading nature of CSS. Note though that this is generally bad practice and should be avoided if possible.
Although I'm not sure if it's possible with TinyMCE, perhaps you can limit the user's ability to create fonts bigger than a certain size (or perhaps disable changing font-size for users completely). Perhaps the font_size_style_values can help you out?
What is the easiest method of highlighting the current page from a nav menu in Wordpress?
If your top nav links are manually inserted in your theme, you can do something like this:
<a href="page-link" <?php if(is_page('page-name') : ?>class="highlight"<?php endif; ?> >Link text</a>
I do something similar to this in a theme where certain pages and categories have special headers. There are a few conditional functions that help with this:
is_page('page-name')
is_category('category-name')
is_home()
is_front_page()
Edit: Didn't see the comment about it being dynamic WP links. You might still be able to use these functions if the query data you get back contains the page slugs.
You might instead consider using the get_pages() function and loop through it manually, doing an is_page() check on each one to see if the current page ID matches the ID of the page you are at in the array.
Current page highlighting sometimes depends on if it happens to be implemented in the CSS of the theme you're using, but this should work in a basic theme.
<?php wp_list_pages('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?>
CSS: Change the color in the CSS to whatever highlights well against the background of the menu bar or background image. Change the # to the container of the list pages call above.
#menu ul li a:active, #menu ul li.current_page_item a
{
color:#000;
}
You can use the dtabs plugin, which does just that, for both pages, categories, home, and other types of pages.