Betfred horse racing.Claim Your Free 999 Pesos Bonus Today

(@mr_tompe)

Hi!

I have created a Dynamic Sidebar to my word-press homepage. I want to use different sidebars depending on which page you intent to visit.

I made it work and it changes sidebar exactly as I it should but my big problem is that I can’t make it work with the right appearance. I want it to have the same style as my theme. Can anyone help me with settings for that??? I have really tried looking at diffrent forums but i haven’t got it to work yet.

You find my page here: https://tompe.com/bloggit

If you click on my ”test” or ”ny” you can see what I mean. Doesn’t look good at all.

<?php
     // The first sidebar
     if(function_exists('register_sidebar'))
          register_sidebar(array(
          'name' => 'Sidebar One', // The sidebar name to register
        'before_widget' => '<li id="%1$s" class="sidebaritem">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
     ));
     // The second sidebar
     if(function_exists('register_sidebar'))
          register_sidebar(array(
          'name' => 'Sidebar Two', // The sidebar name to register
        'before_widget' => '<li id="%1$s" class="sidebaritem">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
     ));
     // The third sidebar
     if(function_exists('register_sidebar'))
          register_sidebar(array(
          'name' => 'Sidebar Three', // The sidebar name to register
        'before_widget' => '<li id="%1$s" class="sidebaritem">',
        'after_widget' => '</li>',
        'before_title' => '<h2 class="widgettitle">',
        'after_title' => '</h2>',
     ));
?>

And this is my style.css

/*
Theme Name: Vistalicious
Theme URI: https://dailyblogtips.com/vistalicious-wordpress-theme-released/
Description: WP theme with a Vista twist
Author: Daily Blog Tips
Author URI: https://www.dailyblogtips.com/wordpress-themes/
Version: 1.2
Tags:green color, right sidebar, one column, fixed width
*/

/* Reset Defaults Starts */

* {
  margin: 0;
  padding: 0;
  }

h1, h2, h3, h4, h5, h6, p, blockquote {
  margin: 0;
  padding: 10px;
  }

a {
  color: #256B7F;
  }

a:hover {
  color: #6B8B45;
  }

blockquote {
  margin: 5px 10px;
  padding: 5px 10px;
  background: #9DCAE8;
  border: 1px dotted #BBB;
  }

code {
  color: #3366CC;
  }

a img {
  border: none;
  }

/* Reset Defaults Ends */

body {
  position: relative; /* Fixes browser resizing bug in IE6 */
  margin: 27px auto 10px auto;
  width: 950px;
  font-family: arial, sans-serif;
  text-align: center; /* IE Centering Technique */
  background: #499F8F url(images/bgbody2.jpg) repeat-x top left;
  background-attachment: fixed;
  }

#wrapper {
  text-align: left; /* IE Centering Technique */
  }

.topcurvewhite {
  margin: 0;
  height: 13px;
  background: url(images/bgtopwhite.gif) left top no-repeat;
  }

.bottomcurvewhite {
  margin: 0;
  height: 13px;
  background: url(images/bgbottomwhite.gif) left bottom no-repeat;
  }

#header {
  margin: 0;
  padding: 5px 0 25px 0;
  }

#header h1.sitename {
  padding: 0 0 0 0;
  position: relative;
  font-size: 20pt;
  }

#header h1.sitename a {
  color: #fff;
  text-decoration: none;
  }

#header h1.sitename a:hover {
  color: #D0DE9C;
  text-decoration: none;
  }

#header h2.sitedesc {
  padding: 0 0 0 0;
  position: relative;
  font-size: 11pt;
  color: #A6DDEA;
  }

#header .topright {
  float: right;
  position: relative;
  margin: 5px 0 0 0;
  padding: 0;
  width: 400px;
  height: 60px;
  text-align: right;
  color: #fff;
  font-size: 10pt;
  }

#header .topright a {
  color: #A6DDEA;
  }

#header .topright a:hover {
  color: #D0DE9C;
  }

.search {
  padding-bottom: 5px;
  }

#searchform {
  float: right;
  margin-left: 0;
  margin-top: 2px;
  margin-right: 0px;
  }

#searchform {
  margin-left: 10px;
  width: 213px;
  padding-top: 8px;
  height: 28px;
  background: #ccc;
  background: url(images/search.gif) left 3px no-repeat;
  }

*:first-child+html #searchform { /* Filter for IE7 */
  padding: 5px 0;
  }

* html #searchform { /* Filter for IE6 */
  padding: 5px 0;
  }

#searchbox {
  margin-left: 8px;
  margin-bottom: 3px;
  width: 145px;
  background: none;
  border: none;
  }

#searchbutton {
  width: 50px;
  background: none;
  border: none;
  }

#searchbutton:hover {
  cursor: pointer;
  }

#nav {
  clear: both;
  margin: 10px 0 0 0;
  }

#nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  }

#nav li {
  float: left;
  margin-right: 10px;
  }

* html #nav li a { /* Filter for IE6 to prevent li stacking */
  float: left;
  text-decoration: none;
  }

* html #nav li a span { /* Filter for IE6 to prevent li stacking */
  float: left;
  margin-left: 4px;
  text-decoration: none;
  }

#nav li a {
  display: block;
  height: 26px;
  background: url(images/bgtableft.gif) left top no-repeat;
  text-transform: lowercase;
  font-size: 10pt;
  text-decoration: none;
  }

#nav li a span {
  display: block;
  margin-left: 6px;
  padding-left: 5px;
  padding-right: 12px;
  line-height: 26px;
  color: #FFF;
  background: url(images/bgtabright.gif) right top no-repeat;
  text-decoration: none;
  }

#nav li a:hover {
  background-position: left -26px;
  text-decoration: none;
  cursor: pointer; /* For IE6 */
  }

#nav li a:hover span {
  background-position: right -26px;
  color: #fff;
  }

#nav li.current_page a {
  background-position: left -26px;
  }

#nav li.current_page a span {
  background-position: right -26px;
  color: #fff;
  }

#main {
  clear: both;
  width: 925px; /* Overrides miscalculation in IE6; ignored by other browsers. */
  margin: 0;
  padding: 0 15px 15px 10px;
  background: #fff url(images/bgwhite.gif) repeat-y top left;
  }

#contentwrapper {
  float: left;
  width: 600px;
  }

#content {
  }

#content .pageTitle {
  padding: 5px 10px 15px 10px;
  font-size: 16pt;
  font-family: arial, sans serif;
  letter-spacing: -1px;
  color: #5A7836;
  }

.post {
  margin: 5px 0 25px 0;
  }

#content h2, #content h3, #content h4, #content h5, #content h6 {
  padding: 0 10px;
  font-weight: bold;
  }

#content h2 {
  font-size: 15pt;
  }

#content h3 {
  font-size: 11pt;
  }

#content h4, #content h5, #content h6 {
  font-size: 10pt;
  }

h2.homeTitle {
  margin: 0 0 15px 0;
  }

h2.postTitle {
  padding: 0 10px;
  font-size: 16pt;
  font-weight: bold;
  color: #000;
  font-family: arial, sans serif;
  letter-spacing: -1px;
  }

h2.postTitle a {
  font-size: 15pt;
  font-weight: bold;
  text-decoration: none;
  color: #11414F;
  }

h2.postTitle a:hover {
  color: #5A7836;
  }

.postMeta {
  padding: 2px 10px 3px 10px;
  font-size: 9pt;
  color: #333;
  }

.postMeta a {
  text-decoration: none;
  }

.postContent img {
  margin: 10px;
  border: 3px solid #CCC;
  }

#content p, .postContent p {
  padding: 5px 10px;
  font-size: 10pt;
  color: #000;
  }

.postContent ul, ol {
  padding: 0 0 0 35px;
  }

.postContent ul li, ol li {
  font-size: 10pt;
  color: #000;
  }

.postTags {
  margin: 5px 10px 15px 10px;
  font-size: 9pt;
  color: #000;
  }

p.comments {
  clear: both;
  padding: 5px 10px 5px 10px;
  }

p.comments a {
  padding-left: 20px;
  background: url(images/comment.gif) left top no-repeat;
  font-size: 10pt;
  text-decoration: none;
  }

.commentlist {
  margin: 10px 0;
  font-size: 10pt;
  list-style: none;
  }

.commentlist li {
  margin: 0 0 10px -25px;
  background: #CBE7FA;
  border: 1px solid #9DCAE8;
  width: 530px;
  }

.commentlist cite {
  padding: 10px;
  font-size: 10pt;
  }

.commentlist cite a {
  }

.commentmetadata {
  padding: 10px;
  }

.comment h3 {
  padding: 0 10px;
  font-size: 12pt;
  font-weight: bold;
  text-decoration: none;
  color: #000;
  }

.comment p {
  padding: 10px;
  font-size: 10pt;
  color: #000;
  }

.comment a {
  text-decoration: none;
  }

.comment a:hover {
  text-decoration: underline;
  }

.comment textarea {
  width: 555px;
  }

.comment #submit {
  width: 118px;
  height: 30px;
  background: url(images/commentbutton.gif) left top no-repeat;
  border: none;
  font-size: 9pt;
  color: #333;
  }

.comment #submit:hover {
  cursor: pointer;
  }

.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

/* Sidebars */

.sidebars {
  float:right;
  margin-top: 0px;
  margin-left: 15px;
  padding-top: 9px;
  width: 300px;
  }

.sidebars h2 {
  padding: 6px 5px 2px 7px;
  font-size: 11pt;
  color: #fff;
  background: url(images/sidebar_title_bg.gif) left top no-repeat;
  height: 29px;
  }

.sidebars table {
  width: 300px;
  }

.sidebars ul {
  margin: 0;
  padding: 0 0 5px 0;
  }

.sidebars li {
  margin-bottom: 20px;
  list-style: none;
  font-size: 9pt;
  }

.sidebars li ul {
  padding: 0;
  }

.sidebars ul ul li {
  margin: 0;
  padding: 3px 2px 2px 16px;
  color: #333;
  background: url(images/bullet.gif) left 7px no-repeat;
  line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
  border-bottom: 1px dashed #ddd;
  }

.sidebars li.nobg a:hover {
  background: none;
  color: #003366;
  text-decoration: none;
  }

.sidebars a {
  display: inline;
  color: #333;
  text-decoration: none;
  }

.sidebars a:hover {
  color: #003366;
  background: #C1DEF1;
  }

.sidebars p {
  padding: 2px 0;
  font-size: 9pt;
  }

#tag_cloud a {
  display: inline;
  }

.sidebars ul.children li {border-bottom:none;}
.sidebars ul.children {margin-bottom:-5px;}

/* Footer */

#footer {
  clear: both;
  padding-top: 10px;
  color: #fff;
  text-align: left; /* IE Centering Technique */
  }

#footer p {
  padding: 0;
  font-size: 8pt;
  line-height: 19px;
  }

#footer a {
  color: #A6DDEA;
  }

#footer a:hover {
  color: #D0DE9C;
  }

#credits {
  clear: both;
  float: left;
  margin: 0 auto;
  padding: 0 0 5px 0;
  width: 950px;
  text-align: center;
  }

/* extras */

.cleared {
  clear: both;
  }

.left {
  float:left;
  }

.right {
  float:right;
  }

#nextprevious {
  padding:10px;
  font-size:85%;
  }

a.gravatar {
  float:right;
  margin:10px 15px 20px 0;
  width:50px;
  }

I really hope there is anyone out there who can help me.

Thanks //Thomas

Viewing 3 replies - 1 through 3 (of 3 total)

Josh Leuze
(@jleuze)

15 years, 10 months ago

At the very least, you need to have yor sidebar in a division wit the class of “sidebars” if you want the sidebar styles to apply.

Thread Starter mr_tompe
(@mr_tompe)

15 years, 10 months ago

Great that you find the problem, but im a newbie to this. Maybe somone could help me with that ?? Im not sure how to do that by my own ??

And i really have to get this to work.

Sorry for my bad english, i do my best.

//Thomas
Josh Leuze
(@jleuze)

15 years, 10 months ago
This will be a lot simpler if you create a separate template file for each sidebar.

Vistalicious has a default sidebar with the filename of “sidebar.php”. The code in your default sidebar should look like this:
```
<div class="sidebars">

<ul>

<li class="nobg">

<a href="feed:<?php bloginfo('rss2_url'); ?>" ><img src="<?php bloginfo('template_directory'); ?>/images/subscribe.gif" alt="subscribe"></img></a>

</li>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>

<li>

<h2>Categories</h2>

<ul>

  <?php wp_list_categories('show_count=0&amp;title_li='); ?>

</ul>

</li>

<li>

<h2>Meta</h2>

<ul>

  <?php wp_register(); ?>

  <li><?php wp_loginout(); ?></li>

  <li><a href="https://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>

  <li><a href="https://www.ads-software.com/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>

  <?php wp_meta(); ?>

</ul>

</li>

<?php endif; ?>

</ul>

<div class="cleared"></div>

</div> 
```
You need to make a copy of that file, maybe called “sidebar-test.php” or “sidebar-ny.php” And you want to leave most of that code intact, your sidebar will not be styled like the rest of the site if it does not have the same divisions and other HTML elements.

You just want to change the content, not the divs, maybe start from something like this in your custom sidebar file:
```
<div class="sidebars">

<ul>

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1') ) : ?>

<li>

<h2>TITLE GOES HERE</h2>

<ul>

  <li>WIDGET OR OTHER CONTENT GOES HERE</li>

</ul>

</li>

<?php endif; ?>

</ul>

<div class="cleared"></div>

</div> 
```
All you are changing is the unorder list inside the sidebar, the divs, and the code for dynamic widgets can be left alone.

Then you just have to activate that custom sidebar, and add it to any page templates that you want to include it in. To figure out how to do that, check out this article about Customizing Your Sidebar.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘I have a big problem with Dynamic Sidebar…’ is closed to new replies.

I have a big problem with Dynamic Sidebar…

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics