I have a view in Drupal 7 that displays 4 user field of the currently logged-in user. I rewrote the output to the following code:
<div>[field-1]</div>
<div>[field-2]</div>
<div>[field-3]</div>
<div>[field-4]</div>
I can add some CSS classes to the fields to let everything look a little bit better, but I'm stuck at a certain point: I'd like to add a link to the block that redirects the user to his/her profile page (the url is user/[uid]). To be completely clear, I'd like the whole block to function as some kind of "button" (just like the "button" in the top menu of this website), so I don't want the seperate fields to be linked to the profile page (I know how to do that anyway).
Can this be achieved with CSS and/or HTML?
Try wrapping the 'div' in an 'a' element:
<div>[field...]</div>
Edit: This will make all the text appear as a link, so might want to add some CSS. Example:
HTML:
<a class="link-box" href="/user/id"><div>[field...]</div></a>
CSS:
.link-box {
color: #000;
text-decoration: none;
}
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;
}
Key word of my post is boxe***s***, emphasis on the plural. The code I am using will not allow me to reuse the hover on multiple pieces of text. Only one of the hovers will work at a time and the rest are frozen in place, as if they were text boxes with no hover (no hide and then reveal).
Please help me! I appreciate any input.
Here is the link to the code:
http://pastebin.com/dRgj8e1D
Basically your code is only setting up toggling for the very first toggle, as shown in the window.onload section. To make multiple instances work, you would need to get the ID of each toggle button and call the toggle setup function for each one.
An easier way to accomplish this would be to change the ID on the button to a class and use hover styles in the CSS:
.togContent {
display: none;
}
.togTrigger:hover + .togContent {
display: block;
}
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.
Im trying to create a better way of letting the user know what page they are on by telling my global navigation to stay one colour. What I mean is if the user is on the home page I want the word "Home" to stay blue for example so that they know thats the page they are currently looking at.
Im not sure if i've explained it very well but if you take a look at the jsfiddle bellow it'll make more sense.
http://jsfiddle.net/4kUp3/
If you don't want to just hard code the style into each page to highlight the item, you could use jquery to grab the element that links to the current page and change it's style
$('a[href="'+window.location.href+'"]').parent().addClass('selected_link');
You could compare each link in the menu with the current page URL. With jQuery:
$('#site_nav li a').each(function(){
if($(this).attr('href') === window.location.href) {
$(this).parent().addClass('selected_link'); // apply style to li
}
});
DEMO
You have it setup correctly, the order on your CSS is just messed up a bit.
Change
.selected_link li a:link
to
.selected_link a:link
and HOME will be blue.
I am using a script to show links on my site and by default they show a tooltip on all links which I want to hide. Their support says:
Every link has the CSS class "vglnk". That makes styling them as easy
as adding one rule to your site's CSS.
For example, this would change the color:
a.vglnk {
color: #F7923C;
}
What code do I add which would hide the tooltip on links?
Because the tooltip is likely handled via JavaScript, you may need to look at their implementation to figure out how to hide it. There isn't really a standard CSS way to style tooltips.
Can you change the HTML? Removing the title attribute from the link will remove the tooltip. If not, the script that you're using to show these links can also remove the title tag.
Demo: http://jsfiddle.net/ThinkingStiff/X98n4/
Script:
var links = document.getElementsByTagName( 'a' );
for( var index = 0; index < links.length; index++ ) {
links[index].removeAttribute( 'title' );
};
HTML:
thinkingstiff.com
thinkingstiff.com
First of all you can just do a:link a:hover a:active a:visited for styling all your hyperlinks at once. I don't see any advantages unless you want some hyperlinks to be different. For those few you could use the div name they are in for example.
If you wanna hide tooltips you have to understand how hyperlinks work.
I can tell you this, every hyperlink has a title. Mostly the title is autofilled with the hyperlink title (in cases of rss). I also asume you are talking about rss here.
However if you want the tooltip to be gone add a title in your hyperlink and leave it blank.
title=" " and you good.
succes.