I was wondering how to hide a content, especially a link (see http://i.imgur.com/P3kWHjH.jpg), in a website template and blogger template
Just if a script code is used or an html tag or something like that, thanks
I think you are using some template which is showing its link back. Proper option is to buy that template.
Although if you want to hide specific element you can use selectors.
For Id = #id
for class= .class
for name = [name=name]
and so on, search over internet if you want any other selector.
and the use css or jquery.
CSS
#id {display: none}
Jquery
$("#Id").hide();
If it is html link, You can make the link invisible or display none by using css.
a { display:none }
or
a {visibility:hidden}
Related
Hey I'm using webflow to create my web project. Webflow gives active links an class called .w--current, that's their "active". So the link class looks like this when a webpage is open .nav__link .w--current.
How can I give in this specific case the .w--current element an ::before pseudo? I tried all kind of ways like .nav__link .w--current::before or .nav__link:before .w--current:before but none of them worked. Can I generally add an pseudo element to an CSS class which is at the second position?
The empty space between both classes was my problem.
The correct solution is: .nav__link.w--current:before
I'm trying to remove a link completely via CSS and replace it with my own custom message. Is this possible? I found some link disabling via css but the anchor text is still visible, and doesn't allow me to include my own message.
Essentially I want to make it so only logged in members can view links, using a conditional that uses CSS only for non-logged in (guests) users, replacing download links with "Sorry, only members can see this link, register here"
Any ideas?
CSS would be a terrible way to add privacy to your element, as it could be seen in any case by inspecting the source code, or by just disabling CSS.
You have to hide your link server-side.
By the way, just for the sake of completeness, and in case you have to use such a thing for something that actually makes sense doing by CSS, you could go around doing it by adding a class to the html or body in case of non-authenticated users, and then having a CSS rule as such:
html.not-logged-in element {
display: none;
}
Keep in mind that, obviously anybody can still see the element if they want.
Edit
You can't change text with CSS (unless using the content property in a pseudo-element, but nevermind that, as you won't be able to change the href attribute of your link). So, to achieve what you are looking for, you need to have two separate elements. As I said above, add a class to your html or body when the user is authenticated (this is actually a good idea in general), then show and hide your elements conditionally.
So your HTML would look something like this:
<span class="error">Sorry, only members can see this link</span>
I am a secret link
And your CSS would look like this:
.not-logged-in .secret {
display: none;
}
.logged-in .error {
display: none;
}
You can see an example here. In this example I use Javascript to simulate your logging-in process (all I do in Javascript is really just adding the class to the html element).
I am working on a mobile site which is linked to online css which I cannot change. I added twitter bootstrap to that site. Bootstrap is applying but not 100% on all FORM HTML tags like select. All I want that if styling is not applying i'll force it somehow on that element, kindly let me know how can i do that. On form tag select the down arrow is not comming which is quite irritating. Kindly let me know how can I force the select to behave like the by default random styling.
You'll probably have to put your own stylesheet embedded into the of your document. Maybe use !important if it doesn't overwrite
I want to change background of this 2 link
<a href="http://www.domain.com/index.html">
<a href="http://www.domain.com/index.php">
But condition is I can't add any class or Div id here. I can't touch this this html code also. Just I need to add some css from external. I mean in main style.css sheet. Is is possible ? I have tried with this code a { background:url(../images/image.png);} but problem is it's change the whole link's background of the page. But I want 2 different background of the 2 link. Is is really possible. Anyone can help me please :)
You need to find a way to differentiate the two links, from the code you posted, they only differ in the url they point to, so you could use this:
/* anchors with href attribute ending in index.html */
a[href$='index.html'] { background:url(../images/image.png);}
/* anchors with href attribute ending in index.php */
a[href$='index.php'] { background:url(../images/image2.png);}
You can use CSS attribute selectors to only style links with an href that matches the links you supplied. Example:
a[href="http://www.domain.com/index.html"],
a[href="http://www.domain.com/index.php"]{
background:url(../images/image.png);
}
You could also match all links with an href starting with http://www.domain.com using the following rule
a[href^="http://www.domain.com"]{
background:url(../images/image.png);
}
Please check the support as older browser might ignore attribute selectors.
http://css-tricks.com/attribute-selectors/
I'm attempting to display a mailto link. Is that possible with CSS?
html
<li class="fe footer_no_link"></li>
css
.footer_column .fe:after {content:"info#site.com"; }
you cannot add html elements with the CSS3 ::after or ::before selectors. The content:"" property will only accept plain text.
You must remember that CSS is for styling purposes only. This includes the ::before and ::after selectors.
Your best option is to use a JavaScript alternative.
Your value wasn't appearing because the speech marks needed escaping, or changing:
.fe:after {content:"<a href='mailto:info#site.com'>info#site.com</a>"; }
http://jsfiddle.net/Cb2ry/
Even then though, your content will just display as static text, rather than rendered.
Content added with the pseudo-element doesn't appear in the DOM, so no you can't.
But why do you want to do it with CSS ? It is not styling, the right place seems to be directly on the HTML file.
If the goal is to block spam, I usually use this piece of javascript:
var m;
m='in';
m+='f';
m+='o#exa';
m+='mpl';
m+='e.co';
m+='m';
$ele = document.getElementById('contact-mail');
$ele.href = 'mailto:'+m;
$ele.innerHTML = m;
The mail is splitted to be sure that it doesn't appear as an email in any file.
You can see the result here: http://jsfiddle.net/tzkDt/
This might be useful to someone...
Instead of inserting the link with the css, I coded it into the html with an href & class, but left it empty. Like this:
<p>This text is always here.</p>
<a class="mobile" href="mailto:info#site.com"></a>
.mobile:after {
content:'Click here to email us.'
}
That way the link doesn't appear (height:0, width:0) until it has content.
I used it for a responsive store locator where the map was stacked on top of the location list at small screen sizes, necessitating a link to the list anchor. I considered it a "design" decision, which is the only justifiable reason to do it.
You can't add html to the content in css. Unless you escape everything.
http://jsfiddle.net/PDTng/
Alternatively, you could use jQuery and use .html(), eg:
http://jsfiddle.net/PDTng/1/