Wordpress page complete text gets underlined when page is hovered - css

I'm creating a website for myself in WordPress using Elementor free plugin and Phlox theme. I've just started and completed a couple of sections. Each section has some text, buttons and some images. The issue I'm facing here right now is that when I open the website and move my mouse pointer inside the Webpage area, the text in all sections gets underlined just like any hyperlink but there is no hyperlink with any text. I've checked settings in customizations and other stuff in theme settings but nothing helped. I'm new on WordPress and don't know how to debug this in any technical depth. Please have a look and tell me how can I fix this issue.
I can't continue with these underlined text appearing all over my page.
Link : myWebPage
Any help is appreciated.

Try this:
.csstransitions .aux-page-show-circle.aux-page-animation-done #inner-body, .csstransitions .aux-page-show-circle.aux-page-animation-done {
height: auto;
overflow: visible;
text-decoration: none;
}

Always attempt to use your browser dev tools to check these things. In your css you have this in your custom.css file. Dont know why its there but thats the cause
body:hover {
text-decoration: underline;
}

Related

I migrated WP to another domain and now I get a double navbar

I migrated my WP website to another domain, I am using an animation I made on Animate CC and used and Iframe to placed it. I am working with DIVI and Elementor.
Now, when I click from the animation, I get a double nav bar and I have no idea why. But when I go from the menu, everything is fine.
Does someone know how to fix this? I have tried uninstalling and reinstalling DIVI, elementor and other plugins but nothing works. I have also changed the links of the animation.
This is the website:
https://psychotherapie-couple-famille-lausanne.ch/accueil/
I appreciate any help, thank you in advance.
Because you are loading that page in an iframe.
for example, by clicking an image it opened this page https://psychotherapie-couple-famille-lausanne.ch/therapies/therapie-individuelle/ in iframe.
Edit that page and hide header for that page from divi settings or put this CSS code for that page. you will see custom css option on that page.
div#page-container {
padding-top: 0px !important;
}
header#main-header {
display: none;
}

Remove bullets from Select2 Dropdown Options in Woocommerce

I've searched around for a good while now trying to find a solution for this issue, but haven't seen anyone else experiencing it so far.
I have a WooCommerce store I'm working on developing, and recently noticed that the select field for the billing state is displaying list-style type bullets in front of the options when expanded.
I've messed around in the CSS including removing any background image and making sure there was no list-style attribute applied to the options, but I'm stuck on as to what's happening here.
The issue can be viewed live at this link: http://grahams.staging.wpengine.com/donate/
Does anyone have any ideas on what could be causing this? My guess is it's somewhere in the woocommerce files but I'm unsure as to where I would start looking.
List of Woo Extensions:
One Page Checkout
Name Your Price
WooCommerce Subscriptions
WooCommerce Variation
Swatches and Photos
Other than the above, no customizations have been made. Theme being used is Hybrid.
EDIT: adding an image for those who can't load it/are looking after it's been resolved.
Inspecting your CSS, there is a background image being applied to all ul li elements. See _elements.scss, line 96.
ul li { background: url(images/build/bullet.png) no-repeat 0 6px; }
Adding the following style fixes the issue.
.select2-results__option { background-image: none; }

Wordpress Page Content not showing

I've recently started a new website with Wordpress through blue host.
I'm completely new to this and had never even heard of either of these programs up until last week.
I downloaded a theme from Mojo marketplace linked to blue host called Solstice. I've managed to make some customer changes and get some pictures and pages and post headers on there.
The only trouble I'm having right now is that I've wrote text in the About us section but it doesn't show up on the website. I haven't downloaded any plugins yet and the template it still set to default.
I have tried googling the answer but not had much luck.
Any help would be greatly appreciated.
www.2lostbuffaloes.com
As Naveed mentioned, the text color is white, over white background, that's why you can't see it. If you add to your css this rule:
body {
color #000000;
}
The text should appear.
You will probably also want to add white to the text color of the footer:
.footer-top, .footer-top a {
color: #ffffff;
}
In style sheet, you need to do
body{
color : #000000;
}
Right now its white color for text, if you do control A on about us page you will see all text.

Joomla 3, No bullets shown on frontend, only backend. (must be css)

I am new to CSS and have the following problem.
I have created a Joomla 3.3 site using a free template called Prismatic.
My problem arises when i write an article and use bullets at some point.
Bullets show fine on the backend but i get nothing on the frontend.
After reading various posts and forums i got the idea it has to do with the template.css but thats as far as i can get..
My site demo address is "white.dr-tsekouras.gr"
and the axact url where the bullets dont show is:
http://white.dr-tsekouras.gr/index.php/2014-10-13-12-15-44
Sorry the site is in greek
Can you please help ..
You just need to add your own custom styling to your lists.
ul {
list-style: disc;
}
Then, get these styles to be included when your website is loaded. The simplest way would be to create a separate CSS file, and reference it directly in your header.php file of your template.
This is a tricky one...
There is
body {
color: #fff;
}
on several places of your CSS. That means bullets are there, but white. Background is white as well. Remove that color: #fff;.
EDIT: Added DevTools print screen showing the problem:
Just remove this from basics.css
ul {
list-style: outside;
padding-left: 0;
}
BTW, this template is pretty poorly coded. I'm anticipating it will give you more headaches than this!

CSS display:none won't hide YouTube Embed (no jQuery)

I'm having difficulties getting an embedded YouTube video to not show on my site. The thing is there are two of the same embedded videos on the page and I would like to hide one.
There are 2 because one is generated by the wordpress theme (I have to paste the embed code somewhere in the theme settings) while the other is the direct youtube link pasted into the editor, the sole purpose being to auto generate featured image from the video thumbnail.
I would like to hide the second one, preferrably. I know it can easily be deleted by deleting the YouTUbe link in the text editor after publishing. But I want it to not to have to show at all at the time the page is initially published.
In attempt to hide any of the 2 videos, I have tried this CSS and it doesn't seem to work
div.entry-video-wrapper {display:none !important;}
div.entry-video iframe {display:none !important;}
div.fluid-with-video-wrapper {visibility:hidden !important;}
Is there anything I might be doing wrong?
Here's the sample page I'm working on http://wazobiajournal.tv/gallery/game-of-thrones-season-4-fire-and-ice-foreshadowing/
If you want to hide first video then use:
.entry-video .fluid-width-video-wrapper{
display: none;
}
If you want to hide second video then use:
.embed-youtube .fluid-width-video-wrapper{
display: none;
}
Although your code is also working and it seems that you have to clear cache to see it in action.
Note: Avoid using !important, it is not a good practice.
Try to clean cache maybe. I'm just trying to add display: none; for .entry-video-wrapper in CSS and it's work for me:
.entry-video-wrapper {
margin: 0 -30px;
display: none;
}

Resources