Styling rouded corners joomla poll module

2 replies [Last post]

Thu, 2009-02-05 21:18

EsorOne

Offline

Regular

Last seen: 10 years 42 weeks ago

Timezone: GMT+2

Joined: 2005-12-09

Posts: 30

Points: 9

Hello all,

I’m almost finished with a joomla site, but I’m having difficulties with styling the poll module of joomla. (div.module_poll in css)
I’m using the option . This means that i receive enough div’s to make it happen. But between the div there are two heading; H3 and H4. I’m thinking these heading s are the problem. But unfortunately I can’t solve it by my own.
Just check http://www.ccvitaal.nl/voet

I hope someone can help me solve the problem

I manage to get the rounded corners at the rest of the modules. With and without a module suffix. It’s just the poll module.

Thx in advance

EsorOne

CSS

/* Joomla Template voor VOET. By EsorOne. </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%65%73%6f%72%6f%6e%65%40%67%6d%61%69%6c%2e%63%6f%6d%22%3e%65%73%6f%72%6f%6e%65%40%67%6d%61%69%6c%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p> */
body {
  text-align: center;
  background: #808000;
  font-family: Tahoma, arial, geneva, sans-serif;
  background-image: url(../afbeeldingen/body_bg.jpg);
  background-position: center;
  background-repeat: repeat-y;
  margin-top: 0px;
}
 
#container {
  background-color: #fbf9e2;
  width: 900px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}
 
#header {
  width: 900px;
  height: 224px;
  background: url(../images/Header.jpg) no-repeat;
  clear: both;
}
 
#top_container {
  width: 900px;
  background: url(../images/Zoeken.jpg) no-repeat;
  background-color: #333333;
  height: 29px;
  color: #FFFFFF;
}
 
#search {
  width: 400px;
  float: right;
  height: 29px;
  color: #333333;
}
 
#breadcrumb{
  width: 400px;
  float: left;
  height: 29px;
  color: #FFFFFF;
}
 
#mod_search_searchword.inputbox{
  float: right;
  margin-right: 20px;
  margin-top: 13px;
}
 
#container2_top {
  background: url(../images/container2_top.jpg) no-repeat;
  height: 45px;
  width: 900px;
  clear: both;
}
 
#container2 {
  width: 900px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #ffffff;
  clear: both;
}
/* Deze is om de positie van sidebar left vast te houden */
 
#container3 {
  width: 900px;
  float: left;
  font: 11px/1.6em Verdana, Arial, Helvetica, sans-serif;
}
/* Begin left menu opmaak */
 
#left_box {
  width: 223px;
  float: left;
  margin-left: 10px;
}
 
#left_box li {
  text-align: left;
  font-weight: bold;
  font-family: Tahoma, arial, geneva, sans-serif;
}
 
#left_box a:link, #left_box a:visited {
  font-weight: bold;
  text-decoration: none;
  color: #FFF;
}
 
#left_box a:hover,#left_box a:active {
  text-decoration: underline;
  color: #9685BA;
}
/* Voor het plaatje bij het menu */
 
div.module_menu {
  background: url(../images/top_links.jpg) 0 0 no-repeat;
  padding: 0;
}
 
div.module_menu div {
  background: url(../images/bottom_links.jpg) 0 100% no-repeat;
  margin: 0;
  border: 0;
}
 
div.module_menu div div{
  background: url(../images/top_rechts.jpg) 100% 0 no-repeat;
}
 
div.module_menu div div div {
  background: url(../images/bottom_rechts.jpg) 100% 100% no-repeat;
}
 
div.module_menu div div div div{
  background: none;
}
 
.module_menu div div div h3 {
  padding: 0;
  padding-top: 3px;
  margin-left: 45px;
  margin-top: 13px;
}
 
ul.menu {
  margin: 0;
  margin-top: 0px;
  padding: 1px 0 15px 45px;
}
 
.module_menu ul li a {
  padding-left: 5px;
  font-size: 1.4em;
  list-style: square;
}
/* Actief "welke pagina ben ik nu? */
 
#left_box li.active a:link, #left_box li.active a:visited {
  color: #663300;
}
/* einde left menu opmaak */
/* Voor de poll */
 
div.module_poll {
  background: url(../images/top_links.jpg) 0 0 no-repeat;
  padding: 0;
}
 
div.module_poll div {
  background: url(../images/bottom_links.jpg) 0 100% no-repeat;
  margin: 0;
  border: 0;
}
 
div.module_poll div div{
  background: url(../images/top_rechts.jpg) 100% 0 no-repeat;
}
 
div.module_poll div div div {
  background: url(../images/bottom_rechts.jpg) 100% 100% no-repeat;
}
 
div.module_poll div div div div{
  background: none;
}
 
div.module_poll h3 {
  margin: 5px;
  padding-left: 45px;
  padding-top: 15px;
}
/* Standaard module zonder suffix */
 
div.module {
  background: url(../images/top_links.jpg) 0 0 no-repeat;
  padding: 0;
}
 
div.module div {
  background: url(../images/bottom_links.jpg) 0 100% no-repeat;
  margin: 0;
  border: 0;
}
 
div.module div div{
  background: url(../images/top_rechts.jpg) 100% 0 no-repeat;
}
 
div.module div div div {
  padding-left: 15px;
  padding-bottom: 5px;
  background: url(../images/bottom_rechts.jpg) 100% 100% no-repeat;
}
 
div.module div div div div{
  background: none;
}
 
div.module h3 {
  margin: 0px;
  margin-bottom: 15px;
  padding-top: 2px;
  padding-left: 45px;
}
/* start content */
 
#content {
  float: left;
  color: #000;
  font-family: Verdana, helvetica, sans-serif;
  margin-left: 9px;
  padding: 15px 0 0 35px;
  width: 440px;
}
 
#content p, #content_breed p {
  width: 100%;
}
 
#content a, #content_breed a {
  color: #FF6600;
  font-family: Verdana, helvetica, sans-serif;
  font-weight: bold;
}
/* Voor als rechts niet gebruikt wordt */
 
#content_breed {
  float: left;
  width: 600px;
  margin-left: 9px;
  padding: 15px 0 0 35px;
}
/* Voor de artikelen opmaak */
 
div.leading_start, .article_column, #page, article_row {
  background-image: url(../images/Content_heading.jpg);
  background-repeat: no-repeat;
  padding: 20px 0px 5px 9px;
  border: 1px solid #CC9900;
  background-color: #EED9AE;
}
/* Voor de artikelen opmaak zonder header */
 
div#page {
  padding: 20px 0px 5px 9px;
  border: 1px solid #CC9900;
  background-color: #EED9AE;
}
 
.poll {
  padding: 20px 0px 5px 9px;
  background-color: #EED9AE;
}
/* Uitkomst van de poll */
 
dl.poll dt, dl.poll dt dd {
  font-size: x-small;
  float: left;
  width: 40%;
}
 
div.leading_start h2, .article_column h2, #page h2, .leading h2 {
  padding-left: 50px;
  margin-top: 0px;
  padding-bottom: 45px;
}
/* Voor de pagina navigatie */
 
ul.pagination li {
  width: 100%;
  display: inline;
  padding-left: 10px;
}
 
.article_separator {
  border-top: 20px;
  width: 100%;
}
 
tr.td {
  width: 100px;
}
/* Rechter Kolom */
 
#right_box {
  float: right;
  width: 150px;
  height: 100%;
;
}
/* Yoo gallery  */
 
.moduletable-blank {
  width: 140px;
}
/* Styling opmaak */
 
H1{
  color: #96220B;
  font-size: 19px;
  font-weight: bold;
}
 
h2 {
  font-size: 16px;
}
 
h3 {
  font-size: 14px;
}
 
H2, H3{
  color: #934E0D;
}
 
p{
  color: #413C3A;
}
 
li {
  list-style: square;
}
 
.breadcrumbs {
  font-size: 12px;
  float: left;
  padding-left: 30px;
  padding-top: 13px;
}
 
.breadcrumbs a {
  color: #fff;
  font-family: Tahoma, arial, geneva, sans-serif;
}
 
.breadcrumbs a:hover {
  color: #FF6600;
  font-family: Tahoma, arial, geneva, sans-serif;
}
/* Footer */
 
#footer {
  background: url(../images/footer.jpg) no-repeat;
  text-align: center;
  padding-left: 15px;
  font-size: 10px;
  padding-top: 120px;
  width: 900px;
  height: 100%;
  clear: both;
  color: #000;
}
 
.user1user2{
  color: #fff;
  background: #333333;
  float: left;
  width: 900px;
  margin: 0px;
  padding: 0px;
  border-top: 3px solid #999999;
}
/* Drie onderste modules. Bottom */
 
.moduletable_laatste_items{
  float: left;
  text-align: left;
  font-size: 12px;
  width: 31%;
}
 
.moduletable_laatste_items h3 {
  text-align: center;
  text-indent: -9999px;
  background: transparent url(../images/Laatste_nieuws.png) no-repeat;
  width: 238px;
  height: 60px;
}
 
.moduletable_laatste_items a, .moduletable_popular a, .moduletable_hot a {
  color: #FFFFFF;
  font-size: .8em;
}
 
li.latestnews_laatste_items a, li.mostread_fp a, .rsg_sem_inl_Nav a:link, .rsg_sem_inl_Nav a:visited, .rsg_sem_inl_Nav a:active, .rsg_sem_inl_Nav a:hover, .rsg2_details, .rsg2_details a {
  color: #FFFFFF;
}
 
.weblinks {
  color: #333333;
}
 
td.greyline {
  width: 20px;
  border-right: #669999 solid thin;
/*  background: url(../images/mw_line_grey.png) 50% 0 repeat-y; */
}
/* Polular */
 
.moduletable_popular{
  float: left;
  text-align: left;
  font-size: 12px;
  width: 31%;
  padding-left: 40px;
}
 
.moduletable_popular h3{
  text-align: center;
  text-indent: -9999px;
  background: transparent url(../images/Polular.png) no-repeat;
  width: 238px;
  height: 60px;
}
 
.moduletable_hot{
  float: right;
  text-align: left;
  font-size: 12px;
  width: 31%;
}
 
.moduletable_hot h3{
  text-align: center;
  text-indent: -9999px;
  background: transparent url(../images/Hot.png) no-repeat;
  width: 238px;
  height: 50px;
}
 
div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}
/* Gallery */
 
span.pagenav, a.pagenav {
  color: #666666;
}
 
a:link, a:visited, a:active, a:hover {
  color: #fff;
}
 
.rsg2-galleryList-text {
  color: #000;
}
 
.rsg2_details {
  color: #666666;
}

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language;?>" lang="<?php echo $this->language;?>" >
<head>
<link rel="shortcut icon" href="favicon.ico" />
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css"/>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/voet/css/template.css" type="text/css" />
</head>
<body>
<!--Start van de container. Buitenste-->
<div id="container">
<!--Header -->
<div id="header"> </div>
 <!--zoeken en breadcrumb -->
<div id="top_container">
<div id="breadcrumb"><jdoc:include type="modules" name="breadcrumb" /> </div>
 <div id="search"><jdoc:include type="module" name="search" /></div>
 </div>
<!--top van container 2 voor de plaatjes -->
<div id="container2_top"></div>
<!--Start van de container 2.  Voor het menu en de content samen te houden-->
<div id="container2">
 
<!--Start van de container 3.  Voor sidebar left-->
<div id="container3">
<!-- Begin #leftbox -->
<div id="left_box">
<?php if ($this->countModules('left')) : ?>
<jdoc:include type="modules" name="left" style="rounded" />
<?php endif;?>
</div>
 
  <!-- Begin #content -->
    <?php if ($this->countModules('right')) : ?>
  <div id="content">
<jdoc:include type="component" style="xhtml" />
</div>
<div id="right_box">
<jdoc:include type="modules" name="right" style="xhtml" />
</div>
<?php endif;?>
 
 
<?php if ($this->countModules('right') < 1) : ?>
  <div id="content_breed">
<jdoc:include type="component" style="xhtml" />
</div>
<?php endif;?>
</div>
<!-- BEGIN: FOOTER -->
<div id="footer">  VOLGT
</div>
<!-- END: FOOTER -->
<?php if ($this->countModules('user1 or user2')) : ?>
        <div class="user1user2">
 
 
                <?php if ($this->countModules('user1')) : ?>
                        <jdoc:include type="modules" name="user1" style="xhtml" />
                <?php endif;?>
 
                <?php if ($this->countModules('user1 and user2 and user3')) : ?>
                      <!--  <div class="greyline"></div>   -->
                <?php endif;?>
 
                <?php if ($this->countModules('user2')) : ?>
                        <jdoc:include type="modules" name="user2" style="xhtml" />
                <?php endif;?>
 
                 <?php if ($this->countModules('user3')) : ?>
                        <jdoc:include type="modules" name="user3" style="xhtml" />
                <?php endif;?>
 
        </div>
 
 
 
       </div>
   <?php endif;?>
 
</div>
 
 
</body>
</html>

Tags:

Styling CMS and Social Sites

Thu, 2009-02-05 21:58

syrupcore

Offline

Enthusiast

Last seen: 14 years 16 weeks ago

Timezone: GMT-8

Joined: 2004-03-10

Posts: 108

Points: 0

think you have two

think you have two problems.

first is that your background image isn't long enough. bottom_links.jpg that is. second is that the bg color on the form.poll is covering up the bottom of the rounded corner. you'll probably want to add some margin to push it off the bottom as well. if you do, you can keep the bg color.

http://soundofthatday.com

Fri, 2009-02-06 23:40

EsorOne

Offline

Regular

Last seen: 10 years 42 weeks ago

Timezone: GMT+2

Joined: 2005-12-09

Posts: 30

Points: 9

yes your right. Simple

yes your right. Simple error.

I change it. but I try first a solution of apicture that will tile automaticly. Something like a repeat-y from bottom to the top.

But your solution helpt me to manage this problem.

Styling rouded corners joomla poll module

think you have two

yes your right. Simple

User login

Navigation