This is the description i want to hide
This is my blog actually my problem is i want to hide the description in home page and iam using blogger i have tried color:white for that it worked but when i moved the description to the top or left the black image displays the description because it is in white color.
And i have also tried display:none; but overall code dstruct i mean title moves to some where and image moves to some where i hope understand my problem.
I have heard this can be done with jquery or javascript i mean without css like display:none; or color:white.
If you are ok with editing your html template, here is a solution for you..
Go to Dashboard > Template > Edit HTML
find the div container with class of post-body (which contains post discription) and wrap it with blogger b:if condition. In this case it will hide the description from all pages except post page and static page.
<b:if cond='data:blog.pageType in {"static_page","item"}'>
//<div class='post-body entry-content' ...>
//</div>
</b:if>
I found that the descriptions are shown in a div.If You dont want to see that description ,then delete the div from your source.
and if that div is so necessary you add that an id or class to particular div and add this css style like this..
<style>
.desc{
display: none;
}
</style
<div class="desc">
tata capital job openings are there in mumbai it is one of the
leading company of the world with our large number of customers
attracting wide range of customers from all over the world. There are
large number of jobs are avilable...
</div>
You can use the page break tool in blogger post window.
Just put the page break before every first paragraph/word
Sure this helps
Related
Im using the after property on my h2s to create border lines.
Im using the border lines on my home page and parent page but don't want them on my sub pages is there anyway to display none for this?
thanks
I am not sure what code you have written but to give you an idea, you can do the following:
<span class="border-line">Some text here</span>
Then in your CSS
.border-line {
display: none
}
it simply throw the styling in another style sheet and then link it to your homepage and parent page but not to your other pages it should solve the problem
so I'm building a wordpress website and I have some products sub-menus in a megamenu. I wanna make so when a hover a sub-menu product link to show a specific image in column 4 of the megamenu. I've tryed many options with css but can't figure it out.
So, as an exemple I've gave one link a special class ".pricomigdale" and the image ".pricomigdale-img" with a "display:none" so when I hover on "Pricomigdale de cocos" to take action like this ".pricomigdale a:hover .pricomigdale-img {display:block}" but nothing happen. Here's the website maybe someone can figure it out: https://thefitbaker.ro
enter image description here
I would like to eat your products ;)
I think it might be helpful if you would post a bit more of your code.
I just recognized that you left out a semicolon here: {display:block}
It should be {display:block;}
But I am not sure if that would solve your problem..
I think this fiddle can help you
The point is that you create attribute with your links, for example data-image with url of necessary image
And use JS to make your image changing on hover
$('a').hover(function(e) {
e.preventDefault();
$('#photo-container').html('<img src="' + $(this).data('image') + '"/>')
});
I'm trying really hard to replicate what happens here angular theme on Wordpress.
I've been able to get isotope to filter the post_thumbnails display them and it animate great but what I'm stuck on is when clicking an image or link the content of that post/portfolio gets displayed in a new div. Ideally in place and pushing boxes out the way so if you're on a mobile you don't have to scroll to the top.
Any pointers to get me started would be great, just can't find anything like this anywhere and think it would be very useful to others :)
Thanks
Actually that can be achieved quite easily. Basically you'll merely have to add a click handler to all Isotope items. The handler has to figure out which element has been clicked (e.g. by checking class names of the clicked item, but of course there are numerous ways) and then add the respective content to your div element.
If the content has to be shown in place, it's even easier. You can simply add the preview and the full content to the same Isotope item, but hide the full content by default:
<div class="item">
<div class="preview">...</div>
<div class="full">...</div> <!-- hidden with CSS -->
</div>
Then add a click handler to all Isotope items:
$(".item").click(function(){
$(this).toggleClass("big");
$("#container").isotope("reLayout");
});
By calling .isotope("reLayout") the other items are pushed out of the way when the clicked one expands.
Finally you need some basic CSS rules making div elements with .big bigger, hiding .full by default, but showing it when .big is set in the parent div. In that case .preview has to be hidden of course; this can all be done with CSS, no JavaScript/jQuery required.
Ok, it's a bit cumbersome to explain - I guess an example says more than a thousand words: JSFiddle
Of course that's just a very basic example, but hopefully it explains what I meant. ;)
Is there any way to align google plus button to right? It seems that g+ button holds some place in case there were more digits. It would be nice if sulution could be using only css/html - no javascript.
update It apears that google has changed a little bit api of 1+ button since yesterday, but still it seems impossible to align it to the right.
update 2
Question has been asked on Aug 24 '11. Since then Google+ has changed several times. There's no need to spam answers to this post anymore (repeated, and same answers!). Options you all suggest didn't existed at the time. Check out parameters on google+ documentation webpage: https://developers.google.com/+/plugins/+1button/?hl=pl#plusonetag-parameters
Nowadays you just add data-align="right" to your <div>. For example:
<div class="g-plusone" data-align="right" data-size="medium" data-href="http://www.mywebsite.com"></div>
That will keep the contents of the <iframe> aligned to the right.
If you would like to align the +1 button right, you should either use the 'tall' form factor, since it expands up, or configure the +1 button to not display the count. Either of these will remove the slack space for numbers on the right side. The documentation explaining how to do this can be found here: http://code.google.com/apis/+1button/#button-sizes
Now that the padding is gone on the right side you can use CSS to align the button.
Add the following attribute to the g:plusone tag:
align="right"
Got the solution from
https://developers.google.com/+/plugins/+1button/#button-sizes
Set the align attribute to right for the +1 button tag.
<g:plusone align="right"></g:plusone>
The easiest solution I have found is to just wrap the plus one button div in a container, give the container a class and style that to float how ever you require.
<!-- Google +1 button -->
<div class="plusonealign"><div class="g-plusone" data-size="medium" data-align="left"></div></div>
.plusonealign {
float: left;
}
encountered this exact problem yesterday. wrapped the namedspaced plus one tag in a div and floated right.
you could always use a stylesheet to override the inline styles that google send down the wire
so for markup like this:
<div class="myPlusOneWrapper">
<div id="theActualPlusOneWrapper" style="whatever google send down the wire">
<!-- blah -->
</div>
</div>
you could have this CSS:
.myPlusOneWrapper
{
float: right;
}
.myPlusOneWrapper > div
{
width: auto !important;
}
the width will then adapt to be as wide as it needs to be, and will take precedence over google's inline style
JS Fiddle
I would try to put the button into a div. Then I would make this div smaller than the button to cut away the right part of the button. You need to adjust the position and overflow options in your css.
Please take a look at this site as a reference: http://www.philsalesses.com/place-pulse/
On the left you'll see a screenshot of an image. If you click the image, it will open colorbox for that one image.
I'm using wordpress, so associated with that post there are 4 more screenshots, all in a gallery.
What I want to do is when you click on that one image, to cycle through all the images in the gallery associated with that post.
I'm brand spanking new to wordpress, so please speak down to me.
No need to speak down to - everyone starts somewhere. As for showing your other images, the way the colorbox plugin is setup on your page is like so (pseudocode):
for all links that contain an image {
if the link is to an image {
if the image has a CSS class of "colorbox-[0-9]+" {
group it with all other images with the same CSS class
}
if the image has a CSS class of "colorbox-manual" or no CSS class {
don't group it with any other images
}
}
}
Looking at your page I see two problems:
Your one image link has the CSS class "colorbox-manual".
There's only one link on your page that meets the above criteria :)
The easiest way to fix it would be to add the other 4 images to your post so they show up as thumbnails, however I suspect this isn't what you want. As a hack, what you could do is add the other 4 images and then give them all a display: none style. That way the colorbox plugin would find them and group them with you main image, but not actually show the thumbnails on the post.
Something like this for the four images:
<img src="image1-thumb.jpg" />
<img src="image2-thumb.jpg" />
<img src="image3-thumb.jpg" />
<img src="image4-thumb.jpg" />
If that doesn't work, check in your markup for the class that the colorbox plugin adds to your images. It should be in the form colorbox-[0-9]+ (i.e. colorbox-123).
I used NextGen Gallery, imported the pictures using that, set the "Effect" in the options to off. Then I went in to the nextgen source and added colorbox-1 as a class under each img. Style the CSS and I'm done. 4 hours tops.
Take a look at http://www.philsalesses.com/seaswarm for a demo.