Joomla Templates Club 406,261 posts

[akierum Friend akierumJoin date: April 2008Posts: 11Downloads:0Uploads:3]

#127880

Hi, want to use Fedora 1.5 bottom spotlight on my Bellatrixv1.1 1.5 template.

css_ok.jpg – How I need it to look like
jpg.gif css_problem.jpg – The problem
zip.gif css_problem.zip – zipped file with fedora and bellatrix css and index files

Is does not work right 🙁

Here is my original bellatrix bottom spotlight code:

Old bottom header form CSS file:

[PHP]/*old bottom header
#ja-botsl {
background: url(../images/botsl-bg.gif) top left repeat-x #545C66;
color: #C6CED9;
padding: 15px 20px;
}

#ja-botsl a {
color: #C6CED9;
}

.ja-box {
float: left;
overflow: hidden;
}

#ja-botsl h3 {
padding: 0;
margin: 0 0 5px;
color: #FFFFFF;
font-size: 1em;
}

#ja-botsl div.moduletable {
margin: 0 20px 0 0;
padding: 0;
}

#ja-botsl ul {
padding: 0;
margin: 0!important;
}

#ja-botsl li {
padding: 0;
margin: 0;
background: none;
line-height: 170%;
}

#ja-botsl li a {
padding-left: 13px;
background: url(../images/arrow-readon.gif) no-repeat 0 50%;
text-decoration: none;
}

#ja-botsl li a:hover,
#ja-botsl li a:active,
#ja-botsl li a:focus {
color: #5FA4FB;
background: url(../images/arrow-readon2.gif) no-repeat 0 50%;
text-decoration: none;
}

#ja-botsl td {
padding: 0;
}

#ja-botsl .article_separator,
#ja-topsl .article_separator {
display: none;
}

#ja-botsl table,
#ja-topsl table {
border-spacing: 0;
border-collapse: collapse;
}

.box-ended div.moduletable {
margin-right: 0!important;
border: none!important;
} end old bottom header*/[/PHP]

New code from Fedora bottom header form CSS file:
does it need changing to adapt to bellatrix template?
[PHP]

/*start bottom header beta

/* Bot spotlight */
element.style {
height:211px;
width:20%;
}

/* Spotlight Box Style */
.ja-box-full, .ja-box-left, .ja-box-center, .ja-box-right {
float: left;
overflow: hidden;
}

.ja-box-left, .ja-box-center {
}

#ja-botsl {
color: #CCCCCC;
background: url(../images/pat3-1.gif) #666666;
}

#ja-botsl h3 {
color: #FFFFFF;
font-size: 115%;
background: none;
border-bottom: 1px solid #999999;
margin-bottom: 0;
margin: 0 0 5px;
padding: 0 0 5px;
}

#ja-botsl div.moduletable {
padding: 15px;
}

#ja-botsl .ja-box-full,
#ja-botsl .ja-box-left,
#ja-botsl .ja-box-center,
#ja-botsl .ja-box-right {
border-top: 5px solid #CCCCCC;
}

#ja-botsl .ja-box-full:hover,
#ja-botsl .ja-box-left:hover,
#ja-botsl .ja-box-center:hover,
#ja-botsl .ja-box-right:hover {
border-top: 5px solid #E6E6E6;
background: url(../images/pat3-2.gif) #787878;
color: #FFFFFF;
}

#ja-botsl .ja-box-full:hover a,
#ja-botsl .ja-box-left:hover a,
#ja-botsl .ja-box-center:hover a,
#ja-botsl .ja-box-right:hover a {
color: #FFFFFF;
}

#ja-botsl ul, #ja-botsl ol {
margin: 0;
padding: 0;
}

#ja-botsl ol li {
margin: 0 0 0 20px;
padding: 0;
}

#ja-botsl ul li {
margin: 0;
padding: 4px 4px 6px;
background: url(../images/dot.gif) repeat-x bottom;
}

#ja-botsl a {
display: block;
color: #CCCCCC;
}

#ja-botsl li a:hover, #ja-botsl li a:active, #ja-botsl li a:focus {
color: #FFFFFF;
}

/*end bottom header beta*/
[/PHP]

Old bellatrix index php code

[PHP]<!– BEGIN: BOTTOM SPOTLIGHT –>
<div id=”ja-botsl” class=”clearfix”>

<?php if ( $this->countModules(‘user1’) ) { ?>
<div class=”ja-box<?php echo $user1divstyle; ?>” style=”width: <?php echo $divbotwidth ?>;”>
<jdoc:include type=”modules” name=”user1″ style=”xhtml” />
</div>
<?php } ?>

<?php if ( $this->countModules(‘user2’) ) { ?>
<div class=”ja-box<?php echo $user2divstyle; ?>” style=”width: <?php echo $divbotwidth ?>;”>
<jdoc:include type=”modules” name=”user2″ style=”xhtml” />
</div>
<?php } ?>

<?php if ( $this->countModules(‘top’) ) { ?>
<div class=”ja-box<?php echo $topdivstyle; ?>” style=”width: <?php echo $divbotwidth ?>;”>
<jdoc:include type=”modules” name=”top” style=”xhtml” />
</div>
<?php } ?>

</div>
<!– END: BOTTOM SPOTLIGHT –>[/PHP]

New bellatrix code

[PHP]<!– BEGIN: BOTTOM SPOTLIGHT –>
<div id=”ja-botsl” class=”clearfix”>

<?php if( $this->countModules(‘user1’) ) {?>
<div class=”ja-box<?php echo $botsl[‘user1’][‘class’]; ?>” style=”width: <?php echo $botsl[‘user1’][‘width’]; ?>;”>
<jdoc:include type=”modules” name=”user2″ style=”xhtml” />
</div>
<?php } ?>

<?php if( $this->countModules(‘user2’) ) {?>
<div class=”ja-box<?php echo $botsl[‘user2’][‘class’]; ?>” style=”width: <?php echo $botsl[‘user2’][‘width’]; ?>;”>
<jdoc:include type=”modules” name=”user2″ style=”xhtml” />
</div>
<?php } ?>

<?php if( $this->countModules(‘top’) ) {?>
<div class=”ja-box<?php echo $botsl[‘top’][‘class’]; ?>” style=”width: <?php echo $botsl[‘top’][‘width’]; ?>;”>
<jdoc:include type=”modules” name=”user2″ style=”xhtml” />
</div>
<?php } ?>

</div>
<!– END: BOTTOM SPOTLIGHT –>[/PHP]

---

Attachments:

1. 
2. 

1. css_problem.zip

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#246754

Hi akierum !
I see a problem in New bellatrix code section.New bellatrix code must is :


<!-- BEGIN: BOTTOM SPOTLIGHT -->
<div id="ja-botsl" class="clearfix">

<?php if( $this->countModules('user1') ) {?>
<div class="ja-box<?php echo $botsl['user1']['class']; ?>" style="width: <?php echo $botsl['user1']['width']; ?>;">
<jdoc:include type="modules" name="user1" style="xhtml" />
</div>
<?php } ?>

<?php if( $this->countModules('user2') ) {?>
<div class="ja-box<?php echo $botsl['user2']['class']; ?>" style="width: <?php echo $botsl['user2']['width']; ?>;">
<jdoc:include type="modules" name="user2" style="xhtml" />
</div>
<?php } ?>

<?php if( $this->countModules('top') ) {?>
<div class="ja-box<?php echo $botsl['top']['class']; ?>" style="width: <?php echo $botsl['top']['width']; ?>;">
<jdoc:include type="modules" name="top" style="xhtml" />
</div>
<?php } ?>

</div>
<!-- END: BOTTOM SPOTLIGHT -->


[akierum Friend akierumJoin date: April 2008Posts: 11Downloads:0Uploads:3]

#246783

Thanks, that fixes the same module listed 3 times but does not fix the alignment – positioning problem.

The modules are still lists from top to bottom not across like it should be.
I updated my site with bellatrix old code plus background images (no hover effects etc.)

Can anyone help me ti fix this like it should be?

[joomboom Friend joomboomJoin date: November 2007Posts: 144Downloads:8Uploads:6 Thanks: 13 Thanked: 2 times in 1 posts]

#247323

You have additional files that manage the template – like the template variables, etc. You might need to make changes there too:))

[akierum Friend akierumJoin date: April 2008Posts: 11Downloads:0Uploads:3]

#247509

<em>@joomboom 51151 wrote:</em><blockquote>You have additional files that manage the template – like the template variables, etc. You might need to make changes there too:))</blockquote>

Hmm, yes I know that unfortunately I’m not an expert in CSS so can somebody help me?

Now I tweaked the code as much as I can to use Bellatrix CSS + “add look and feel” but original way would be better.

[akierum Friend akierumJoin date: April 2008Posts: 11Downloads:0Uploads:3]

#247742

any help here?

[Author]

Posts