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
Related
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
I am working on a responsive site layout where the content area for certain pages may have a right hand side info panel and others might not. I am building this site within a custom CMS that my work uses. Now, we use Templates where all the HTML structure is created and use macros to pull in the content that the client enters via the CMS.
Usually I would create a separate template for the pages that would use the right hand panel and a separate template for those that don't but as the client might want to add the right panels to pages that don't have them in the future, I was wondering if there is some overwrite style that I can add to my template so that the whole site can run on one template rather than having to add a template that has the right panel for one page and a template that doesn't for another.
My code would be something like this:
CSS:
section#maincontent {width:720px; float:left;}
aside {width:240px; float:right;}
HTML:
<section id="maincontent">[conetent]</section>
<aside>[right_panel]</aside>
Is there a piece of javascript/CSS/web magic that can overwrite the right panel div if the client decides to add/remove the right panel from a page/template so that the maincontent fills the width of the page without having to create a new template with the style added/removed?
You can simply change it to display none.
HTML
...
<div id="theOneToBeRemoved" onclick="remove()">
</div>
Javascript
function remove(){
document.getElementById("theOneToBeRemoved").style.display = "none";
}
I will note though that you may not want to add the onclick event to the div... Maybe add a button X or close..something along those lines... So if they click into the div it doesnt accidentally close... Also, you may want to add some css transitions to your div... So that when it closes its smooth instead of so abrupt.. Looks much better
Add a wrapper div, output the class "withoutRightPanel" when you want to "remove" right pannel, and add css rules below:
HTML
<div class="withoutRightPanel">
<section id="maincontent">[conetent]</section>
<aside class="rightPanel">[right_panel]</aside>
</div>
CSS
.withoutRightPannel .rightPanel
{
display:none;
}
.withoutRightPannel #maincontent
{
//Fill the gap after you hide right panel, or you can set a value by pixel
width:100%;
}
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. ;)
Im looking for a way to change the background image of a div using jQuery BUT only amending it, not totally changing it.
Let me explain.
Im using http://jqueryui.com/demos/sortable/#portlets to show some div's that open and close. Now when you click the portlet header it opens and closes the content below.
Inside the portlet header i have a child div which shows an arrow (either up or down) depending on the current state of the content. I need a way of changing the background image on this child div by adding on "-visible" onto the end of the url for the background image.
I wouldnt even know where to start with doing this, but i have added some code below for you to look at.
http://jsfiddle.net/45jZU/
From the fiddle there, i need to alter the background image of the portlet-arrow div inside portlet header. I can not simply change the background image all together, but i have simplified it down to post on here.
I hope this isnt too narrow to not be of use to anyone else on stackoverflow.
Thanks
Maybe I'm missing something here, but can't you use the .css attribute modifier for the selected jQuery object? Something like:
var current_background = $("#my-div").css("background-image");
$("#my-div").css("background-image", current_background + "-visible");
If you're looking to modify the class names themselves, you can try mess around with the .toggleClass(), .hasClass(), .addClass() and .removeClass() methods in jQuery.
I hope this helps, but let me know if I've missed the mark here completely!
I would personnaly go for using css classes to change the background image. If you decide to change the image afterwards, you won't have to alter your javascript. It is a better solution to use javascript to code the behavior of the widget, not the visual aspect.
So you have the following css:
.portlet-header {
background-image: url(<an image>);
}
.portlet-header.collapsed {
background-image: url(<an other one>);
}
Add this line to your javascript to toggle the collapsed class:
$(".portlet-header").click(function() {
...
$(this).parent().toggleClass('collapsed');
});
If you widgets starts collapsed, initially add the class.
DEMO
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.