I'd like to edit the link properties of a specific page so they direct elsewhere than what I specified in the social settings menu, which works globally. So, as it is now the links inherit their properties and theres no way in the cms to change this for every page. Is there a way to add it in the css? I'm not sure how to format it correctly. Here's the hmtl:
The page id: body.page-id-85
The HTML:
<div class="wrapper">
<div class="thb-social-home">
<a title="Facebook" href="https://www.facebook.com/">
<span class="thb-social-icon">2</span>
</a>
<a title="YouTube" href="http://www.youtube.com/">
<span class="thb-social-icon">5</span>
</a>
</div>
</div>
Thanks!!
You can use body.page-id-85 as base selector for this page:
#body.page-id-85 .wrapper {
/* wrapper specific rules*/
}
#body.page-id-85 .thb-social-home {
/* thb-social-home rules */
}
Related
Please go to my website . We build the site under Jupiter theme which uses bootstrap. I'd like to add one more section towards the right side of my logo which is CALL NOW and WhatsApp. Refer the below image.
Add this code after <a></a> which have http://www.b4bconsultancy.com/ link inside .header-logo div
<div class="rgt-side">
<a class="call" href="#">
<span>CALL NOW</span>
</a>
<a class="whatsapp" href="#">
<img src="whats-app-logo.png" class="img-rseponsive">
</a>
</div>
And put css styles as below
.mk-header .fit-logo-img a { floa:left; }
.rgt-side { display: inline-block; float: left; }
a.call { float:left; }
a.whatsapp { float:left; }
Try above code and ask any help you want.
Note - use neccerry styles for further adjustments such as margin, padding etc.
Cheers !!!
How to disabled this thumbnail using bootstrap class:
<div class="row row-menu-s0s1">
<div class="col-md-12 col-xs-12 thumb">
<a class="thumbnail" href="<c:url value='/${area}/link'/>">
<img class="img-responsive img-menu" src="<%=request.getContextPath()%>/resources/css/img/menu-box-02.jpg" alt="">
</a>
</div>
</div>
*to clarify: I would like some of thumbnail inside my pages to be disabled because of certain reason. so far ive been trying to add disabled class to <a>,div.thumb,and even img. however that doesnt works. the link still active and the pointer still showing i need something to give idea to user that this thumbnail is not active and to stop link from working.
*the answer: while my initial idea is to fade the thumbnail and return pointer to normal cursor. i realised from the answer i could just use css pointer-events: none;cursor: not-allowed; with combination <a class=disabled> and some jquery :
$('a.disabled').click(function (e) {
e.preventDefault();
});
while this might be just a workaround not real proper way. but im more than contented to accept any working answer right now.
use pointer-events: none;
.thumb a {
pointer-events: none;
cursor: not-allowed;
}
(How) Can I place a link within a twitter bootstrap "list-group-item" that is itself a link without messing up the list-group-item format? (see below)
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
<a href="https://www.facebook.com/sharer/sharer.php?u=http" target="_blank">
Share on Facebook
</a>
</a>
</div>
You can't use <a> tags inside other <a> tags, that's invalid HTML. Check this question.
You can make it clickable with jQuery though, with an hack like this:
HTML - use a div instead with a custom class and some data-tags:
<div class="list-group">
<div class="list-group-item active list-group-item-linkable"
data-link="http://www.google.com">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
<a href="https://www.facebook.com/sharer/sharer.php?u=http"
target="_blank">
Share on Facebook
</a>
</div>
</div>
CSS - make it seem like a link:
.list-group-item-linkable:hover {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
cursor: pointer;
}
JS - the fun part:
$(document).ready(function() {
$('.list-group-item-linkable').on('click', function() {
// same window/tab:
window.location.href = $(this).data('link');
// new window/tab:
//window.open($(this).data('link'));
});
$('.list-group-item-linkable a, .list-group-item-linkable button')
.on('click', function(e) {
e.stopPropagation();
});
});
I've also created a JSFiddle.
I am confused, you want the entire thing to be a link? It may take a couple more steps - nothing a little copy-and-pasting cant handle - but why not just manually provide an 'a' tag to each of the children of the "list-group"
I am trying to adapt an excellent slideout panel example from here.
adapted code is here
I like to have different icons for hide/expanded state (something like > when hidden, < when expanded). Is it possible by changing the above code. Ultimately I may use icons from Font-Awesome
Thanks.
EDIT:
To be clear on the changes from the original version, the code I plan to use doesn't use the same markup. This is to avoid hindering the history. Please use the version http://codepen.io/jetpacmonkey/pen/ktIJz
<header class="main-header">
<label for="main-nav-check" class="toggle-menu">
☰
</label>
<h1>cssPanelMenu</h1>
</header>
You can using pseudo elements (IE8+). Replace the icon with a span with class .icon and then hook up a :before style to show the content based on whether the checkbox is checked.
Demo
HTML
<label for="main-nav-check" class="toggle-menu">
<span class="icon"></span>
</label>
CSS
#main-nav-check:checked ~ .page-wrap .icon:before {
content:"<";
}
#main-nav-check ~ .page-wrap .icon:before {
content:">";
}
Just change:
<a href="#main-nav" class="open-menu">
☰
</a>
<a href="#" class="close-menu">
☰
</a>
to this:
<a href="#main-nav" class="open-menu">
>
</a>
<a href="#" class="close-menu">
<
</a>
Demo: http://codepen.io/anon/pen/nImtd
I have 10 country flags on my company's website (VS 2010/vb/asp.net4.0). Clicking a flag will display the website in that country's language for their entire session.
I would like to, when the client hovers over the flag, have a mini-picture of that country hover above and to the right of the flag. So when they click on the German flag, a mini-map of Germany appears to the upper right -- and I'll z-index it so it goes above the table row above it -- and in addition to the image, it'll say something like, "Deutch" or "View this website in German" (in German, of course).
**Images of countries here when hovering**
Flag1 Flag2 Flag3 Flag4 Flag5 Flag6 Flag7 Flag8
For someone like me who's not great at CSS, is this possible, and if so, how would I go about doing it? Any guidance would be greatly appreciated!
suppose you are using a list
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
.map{
display:none;
}
a.flagbutton:hover .map{
display:block;
}
you can add extra css to do the positioning in the .map bit!
This is pretty simple to do with just CSS, Javascript isn't required at all. There are lots of details, but the basic pattern is to put your images inside the same element as the flag. Let's call it .flag. Set the country images to display:none;. Then, set the .flag:hover img to display:block;. That will make the image appear only when hovering on the flag.
You'll have to set the position of the flag element to relative, and the position of the country image to absolute. That will allow you to set the top and right positions of the image to where you want.
I would recommend using jquery as that will allow you to get the display of the image/text when you hover. CSS will be used to position and format image or text.
Here is a good reference to start with.
http://api.jquery.com/mouseover/
You can do it in CSS but if you need animations you need JS. Here is the code for the one without the anims.
HTML
</ul>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
.
.
.
</ul>
CSS
.item {
position:relative; /*Needed for pos:absolute below*/
}
.pic {
display:none;
}
.item:hover pic {
display:block;
position:absolute;
top:-20px;
}
I've created a fiddle for you - http://jsfiddle.net/UHZzJ/
You can substitute the list with <div>'s as well or as your structure requries. The line which says 'View this website in German' needs to be in a sub-div adjacent to the link and be absolutely positioned to the parent <div>.
Forgot to add, a li:hover will not work in IE6. Only a:hover is allowed for. In that case you'll have to put the div within the <a> (setting the display:block). If you're open to JQuery, there are more elegant solutions - http://flowplayer.org/tools/tooltip/index.html, http://craigsworks.com/projects/qtip/