Hi I've a wordpress site and i need to modify the highlighted code to "display=flex" insted of "display=none".
But i am not able to to this because is element.style..please help me.
https://imgur.com/93zuJyU
.fep-message-content .fep-message-content-5 .fep-message-
content-own .fep-message-content-admin .fep-hide-if-js{
display:flex !important;
}
this is an accordion of front-end-pm plugin for wordpress and it is displayed none when closed and displayed block when opened. i would have it permaopened.
Is possible to change the highligthed code?
Thank you for helping. :)
My guess is that there's a javascript hiding that element after the page is loaded. So no matter what you tell the page to load, it gets altered after. I would search the theme or plugin javascripts for "fep-hide-if-js".
Related
Im editing this jekyll theme with github pages and im trying to add buymeacoffee generated button in menu bar.
It works but for some reason it gets the theme colors, i tried to debug it hours now but it didn't work.
The button should look like this:
https://i.imgur.com/RSYrOx6.png
But now:
https://i.imgur.com/KzwqCml.png
I added it in _includes/navbar.html in the end of the file. I tried to placed it in other files too, outside divs inside divs with custom css classes nothing worked.
Looks like it gets a "general" color, i tried to find this setting but i couldn't, can any of you help me to figure it out? thank you!
you can selector level of custom css in _dark.scss.
Example, you can change with this.
body[data-theme="dark"] .bmc-btn-container > a.bmc-btn:hover {
color: black;
}
I am building a Wordpress site for my nonprofit using the theme Avada and trying to implement some basic custom code.
I am using a "Modal Text / HTML Link" with an image to link to a modal (a pop-up: https://avada.theme-fusion.com/design-elements/modal-element/ and documentation: https://theme-fusion.com/documentation/avada/elements/modal-element/). To help make it clear to users that they can click the image to produce the modal, I want the opacity to change to 70% on hover over just that image.
I currently have the below in the "text/HTML" field, but it’s causing the hover opacity effect for all images on the page rather than just this one image. How can I amend this code to only cause the effect for the linked image? I know so little about coding but feel like it probably has something to do with divs??? I also get the sense I'm accidentlly mixing css and html.....I think I need the html for this field OR I can have just the image source code in the html, and then implement css.
{<img src="https://staging2.pvdwaterways.org/wp-content/uploads/2021/07/Lilly-Manycolors.png" />
}
img:hover {
opacity: 0.7;
}
Here's a screenshot of the interface with the code entered
Thank you!
As #daniel Theman told already in the comment, you can set a class to your element in element edit on the first page at the bottom and then you add the code to custom css tab in avada theme options. Give your element a unique name as class like hoverop and add this to you custom css tab in theme options:
.hoverop:hover{
opacity:0.7;
}
Hope everyone doing well!
I am making a site in WordPress through Elementor plugin. I am facing a weird issue on the button. Button has line break <br>, even I didn't add it there.
But on the other hand, the button is showing alright in Elementor dashboard, but when I do a live preview, button messed up.
I tried to deactivate all plugins and themes, but it didn't work. Need Help!
You have to assign a custom class tag to the button element, it most likely would be assigned to the div .elementor-button-wrapper, you’ll have to check it with dev tools, then you need to access the theme style on appearance/editor. So you could add the following code:
.class-used br{
display:none;
}
In case the class you assigned to the button is not in a parent tag on top of all you need to eliminate try the same process assigning the class to the column or element that wraps the button. Hope it give you an idea to solve the issue.
button or link padding, width, margin and other style won't work. Because button or link need to add display:inline-block; or display: block; then it will be work. So you need to use that display:inline-block; or display: block;. Hope it helps
I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
I know this can be done with custom CSS, but I can't figure out the right way to do it.
I think I can figure it out for all of them if you show me how to do it with just the title.
For example, this is the element I want to remove: <h1 class="page-title entry-title">
I know that {display: none} is the CSS to hide an item, but how can I do it for only a specific page?
the website is: http://myinneryoga.com/strange-exotic-fruit-supplement/
Use h1.page-title { display: none; } to hide the title, this will affect ALL pages that use the same template.
If you want to do it specifically to this post use the following:
#post-28 h1.page-title { display: none; } the post number will lock it to that page only.
Based on that page, the body has classes
<body class="wordpress... singular-page singular-page-28 layout-1c"
28 is the page id of that page, so if you just want a CSS fix for this, you can use the code below
.singular-page-28 h1.page-title{
display:none;
}
note, if you move the wordpress to another webhost, via export/import, you'll need to look at the page_id again if it changed
See this fiddle, if this is the way you want it.
http://jsfiddle.net/Qj4Us/
It simply looks for the targetted URL like "http://myinneryoga.com/strange-exotic-fruit-supplement/" and if found, hides the h1 with class=page-title
Instead of modifying CSS which will affect all pages we can make use of simple plugin. Below are the steps :
Click on Plugins > Add New.
Now search for Hide Title.
Install and activate the plugin.
Now click on Pages > All Pages.
Now edit the particular page where you want to hide the title.
Now, In the right panel you can see an option to Hide title. Check that and publish your changes.