I want to put different h2, h3, h4 to different pages for the sidebar title.
On the homepage, I want that the sidebar titles such as Popular Posts, commentaires recents in h4 and single.php on h3.
I did manage to found this code but it doesn’t work :
<?php if ( is_single() ) { ?>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('#sidebar-top h3:not(:last)').each(function(){
var $this = jQuery(this);
$this.add($this.next()).wrapAll('<div class="section"></div>');
});
jQuery('<div class="Bordure_Haute_Petite"></div>').insertBefore('div.section');
jQuery('<div class="Bordure_Basse_Petite"></div>').insertAfter('div.section');
});
</script>
<?php } else { ?>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('#sidebar-top h4:not(:last)').each(function(){
var $this = jQuery(this);
$this.add($this.next()).wrapAll('<div class="section"></div>');
});
jQuery('<div class="Bordure_Haute_Petite"></div>').insertBefore('div.section');
jQuery('<div class="Bordure_Basse_Petite"></div>').insertAfter('div.section');
});
</script>
<?php } ?>
.
Does anyone know how to do that?
Hi
Do you know how to use Internet Explorer conditional comments? What you need to do is create a second stylesheet that contains only tweaks needed to get Internet Explorer to behave.
Here is info on how to set the conditional stylesheets up
http://www.divitodesign.com/2009/03/css-conditional-comments-guide/#readmore
Put this in your header.php file – I use a stylesheet called ie.css Make sure it is AFTER the declaration of style.css. That way when you style page elements in ie.css they will override the styling in style.css because it comes after it in the header.
For one thing you need to reduce your fontsize on IE7
In #Mini_Body font-size is defined as 100%. In ie.css try overriding it to 90%
#Mini_Body { font-size:90%; }
Then change the paddings/margins on your rounded corners in IE to get them to line up with the left and right borders.
I just got Edito to move up to the top by giving it a
margin-right: -10px
=================
I put this code h4:not(:last)') in this statement
jQuery('#sidebar-top h4:not(:last)').each(function(){
because at the time you did not want the last box at the bottom to have borders around it. That code is saying “Do for all occurrences of id=”sidebar-top h4” EXCEPT leave out the last one.
Your conditional jquery code with the PHP IF — ELSE — – the code is correct. The problem is on your home page the jquery code with the h4 is the code that is running, while the tags on that page are H3 –
your code says If this is a single page, apply the jquery to the H3 tags otherwise to the H4 tags. But on your front page the tags are H3 so it is not working. Try this – I changed only the first line – that applies the code to both the single page and the home page
<?php if ( is_single() ) || is_front_page() { ?>
<script type=’text/javascript’>
……
});
</script>
<?php } else { ?>
<script type=’text/javascript’>
…….
});
</script>
<?php } ?>
Hello again,
First : Thanks for the IE conditionnam comments, it works very fine but like always, i’m getting some trouble :
->The problem is that i can’t really understand how to make this website work on all resolution (I am at 1366*768 and on Firefox it displays well but on a 1280*1024 it’s not the same!)
->This problem is the same I think on IE, the div “gauche” and “droite” (left and right) don’t really fit together. However there can’t be a problem of size.
Second : u remember the jquery code used to put borders? I really can’t make the last one bordered…
Thanks for u’re help.
Moderator
t-p
(@t-p)
Hi everyone,
I tried the following to put border around elemnets of the default sidebar:
Here is what you need to do to get this working –
1) in header.php find the line <?php wp_head(); ?>
2) BEFORE that line, add this line
<?php wp_enqueue_script(‘jquery’); ?>
3) AFTER that line, paste in this script
<script type=’text/javascript’>
jQuery(document).ready(function(){
jQuery(‘#sidebar-top h3:not(:last)’).each(function(){
var $this = jQuery(this);
$this.add($this.next()).wrapAll(‘<div class=”section”></div>’);
});
});
</script>4) in style.css add this code
#sidebar-top div.section {
border:3px solid #99CC01;
margin-bottom: 10px;
padding: 0 5px;
}
1) It added the following W3C validation error:
Line 37, Column 61: document type does not allow element “div” here
… $this.add($this.next()).wrapAll(‘<div class=”section”></div>’);
That is in header.php
2) it adds border around all elements except one (“Tags”) – the last item
(www.gurbani.org)
Please Guide. Thanks. Tara
Forget that and just add something like:
#sidebar ul li{ border:1px solid #000; padding:5px; }
#sidebar ul li li{ border:none; padding:0;}
To your CSS.
#sidebar ul li relates to each section of the sidebar.
#sidebar ul li li relates to the individual pieces inside each section of the sidebar, e.g each link, each post title..
Moderator
t-p
(@t-p)
excellent xdesi,
I works just great.
Question: there is this existing in the style.css
#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
}
Your suggestion works if I keep this existing as well as I add yours code to the style.css too.
Now there are two “#sidebar ul li” – existing and yours.
If remove the existing, then the style breaks.
So I am keeping both. Is it OK to keep both?
Thanks again.tara
Yeah it’s fine to keep both, but you can join them together in one like:
#sidebar ul li {
list-style-type: none;
list-style-image: none;
margin-bottom: 15px;
border:1px solid #000;
padding:5px;
}
You get the idea hopefully!
Moderator
t-p
(@t-p)
Thanks xdesi,
I forgot to tell you that I also tried to join them together but that also breaks down the style, that was the reason I decided to leave both in style.css
But just wanted to make sure there is no harm in having both in the style.css
I appreciate your great help. I tried so many solotion from this forum but yours is the only one that worked. thanks. tara
