Hi I am a student new to Wordpress and CSS and HTML coding in general. I have provided a link of my website below.
https://homepages.shu.ac.uk/~b7009049/wordpress/
What I need help in is making the social media icons that are on the left side of the website disappear upon pressing the + sign that is on top of it. One thing to mention is that I used a plugin called 'layerslider.' and I will type the code on the sheet they provide. As that's where I got the social media icons from.
add z-index: 99999999 !important; to .fusion-sliding-bar-position-left
add this CSS your custom css file
.fusion-sliding-bar-position-left {
z-index: 99999999 !important;
}
Related
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;
}
I am working on a project where I need to update the external CSS files for a webpage.
The problem is that I need to use a Marketo token to dictate what the new CSS style will be. Tokens do not work in external CSS files; I've tried.
I've been able to do most of this work myself, however, I am stuck at one element: a slider. I want to modify the color of the slider buttons to be determined by the Marketo tokens. I have tried "rebuilding" the slider section in the webpage html code, but so far no luck.
Any ideas?
This is a time-sensitive project, too.
Your help is greatly appreciated!
I understand you are trying to override previous css codes. Have you tried the following?
background-color: red !important;
Putting the link of the css file you want to be valid at the bottom.
deleting all the classes of the button related to javascript and adding new classes to style them.
.color{
color: red;
color: blue !important;
}
<div class="color">Color</div>
document.querySelector('.js-a').classList.add('js-b');
document.querySelector('.js-a').classList.remove('js-a');
.js-b{
color:blue;
}
.js-a{
color:red;
}
<div class="js-a">Javascript</div>
I've a page which is old asp.net page also non bootstrap. Its only 1 page among 100s of pages under a master page file. But I have to update the page in some extend and been asked to make the buttons and inputs look like bootstrap style.
I linked bootstrap css to the page alone which is also working using a huge css file from the master file. This is bootstrap css I used.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css
But as expected the page breaks in lots of places. So what my problem is how can I make the inputs and buttons on a noon bootstrap page looks like bootstrap way. Only the buttons and inputs.
Sure thing!
Go over to bootstrap customize and then tick off everything but the buttons, add the button classes to your buttons and you're done!
I faced a very similar problem recently, I found you can actually download the components individually without using the whole framework.
Customize and download bootstrap
Hope this helps, let me know how you get on
Sorry, don't have the rep to simply comment.
But for the input fields you will also want to select forms too.
Then you can go through the CSS file that is downloaded and pick those you want.
Or an example styling class to start work with:
.example
{
padding: 5px 10px 5px 10px;
background: #ff671d;
border-radius: 10px;
color: #fff;
}
You will need to play around with the properties to get what you want.
I'm having some issues in trying to fix a site that was built by some one else. Seems the previous developer some how used BootStrap which I'm not an expert. When checking the code I can see that there is a reference for a #footer class, but cannot find the exact problem. The problem is ... there are few Social Media icons, on the regular site they are click-able and working fine, but when you resize the site for responsive the images are there but the links disappear or not working ...
Any idea how to fix this problem ?
The site link is at : http://tie.com.sa/index.html
Thanks in advance ...
Fawaz
You can add some "priority" to the elements using position: relative and z-index.
The description of the footer is overlapping the icons.
Just add the properties and values as shown below into #footer ul:
#footer ul {
position: relative;
z-index: 9999;
}
Hi I'm using SquareSpace V6, with the Momentum template.
in this template there's an option to have the style of your gallery "full-bleed" or simply centered, but this setting is global and it applies to all the galleries on the website.
I'm trying to create some CSS code that will override the default and allow me to have a "full-bleed" gallery in the home page and the home page only, all the other ones will be left centered.
I've been inspecting the code with Chrome and I thought I had it, but nothing changes once I add my code to that specific page:
#collection-type-gallery { gallery-style:Full Bleed; }
Does anyone has experience with SquareSpace?
not exactly the answer I'm looking for.. but I found a workaround.
I created an empty page and added a background (with a snippet of code) to only that page.
(it only works if you want 1 single fullscreen image)
#collection-51b4ef7de4b0_use_your_own_here_62dc3410aaf3
{
background-image:url(http://static.squarespace.com/static/../background2.jpg);
background-repeat:no-repeat;
background-size:cover;
background-position:center;
}
You can call out the homepage specifically by using:
.homepage { }
or you can use a source code inspector and find the unique id as a class on the element and call out any individual page like so:
.collection-51b4ef7de4b062dc3410aaf3 { }