Joomla Templates Club 406,261 posts

[treybraid Friend treybraidJoin date: May 2008Posts: 302Downloads:0Uploads:23 Thanks: 43 Thanked: 14 times in 1 posts]

#149473

right now it is the width of the page… what do i need to edit to narrow the module position; so, the right module position pulls up next to it…

thanks
trey

[histeriks Friend histeriksJoin date: December 2009Posts: 285Downloads:0Uploads:3 Thanks: 16 Thanked: 114 times in 87 posts]

#336016

treybraid;169170right now it is the width of the page… what do i need to edit to narrow the module position; so, the right module position pulls up next to it…

thanks
trey

Hi Trey,

I’m not sure how would you like to manage the right position to cross that break between topsl and main body. Could i recommend that you just narrow it and create a new upper-right position beside it, something like this:

In order to do that, you have to do the following:

open topsl.php, located in layouts/blocks directory of your template, and on line 16 find this:

<div class="ja-rs1-mid"><div class="ja-rs1-ml">
add this after that:

<div id="ja-right-top">
<jdoc:include type="modules" name="ja-right-top" style="JAxhtml" />
</div>
so that your topsl.php looks like this in top spotlight area:

<!-- TOP SPOTLIGHT -->
<div id="ja-topsl" class="wrap">
<div class="main clearfix">

<div class="ja-rs1-top"><div class="ja-rs1-tl"> </div><div class="ja-rs1-tr"> </div></div>

<div class="ja-rs1-mid"><div class="ja-rs1-ml">

<div id="ja-right-top">
<jdoc:include type="modules" name="ja-right-top" style="JAxhtml" />
</div>

<div class="ja-rs1-mr clearfix">

<?php if ($top) : ?>
<div id="ja-top" class="clearfix">
<jdoc:include type="modules" name="top" style="JAxhtml" />
</div>
<?php endif; ?>
Then, open your template.css from your template’s css directory, and find this on line 1547:

#ja-topsl .ja-rs1-mr {
padding: 10px 15px;
}
give ja-rs1-mr a fixed width, of ~662 pixels (i guess you could somehow use percentages too, but that may be a bit tricky) , so that it looks like this:

#ja-topsl .ja-rs1-mr {
padding: 10px 15px;
width: 662px;
}
and add below styling for our new position, ja-right-top:

#ja-right-top {
width: 275px;
float:right;
padding: 10px 15px 0 10px;
}
and at last, add your new position to your templateDetails.xml file, located in your template’s directory:

<position>ja-right-top</position>
I hope this can point you in the right direction 🙂

1 user says Thank You to histeriks for this useful post

1. treybraid

[treybraid Friend treybraidJoin date: May 2008Posts: 302Downloads:0Uploads:23 Thanks: 43 Thanked: 14 times in 1 posts]

#336017

hey i agree will get back to you after i make the change’s

thanks
trey

[treybraid Friend treybraidJoin date: May 2008Posts: 302Downloads:0Uploads:23 Thanks: 43 Thanked: 14 times in 1 posts]

#336036

hey thanks…. take a look: http://kickndesigns.net/NXTLVL/

any idea how can i adjust the padding below sample 1 and 2 …. right now the dark green.css line #173…. ive got the left, right and top spaced out pretty evenly and i just have to bring the bottom up slightly…

thanks
trey

[histeriks Friend histeriksJoin date: December 2009Posts: 285Downloads:0Uploads:3 Thanks: 16 Thanked: 114 times in 87 posts]

#336041

treybraid;169202hey thanks…. take a look: http://kickndesigns.net/NXTLVL/

any idea how can i adjust the padding below sample 1 and 2 …. right now the dark green.css line #173…. ive got the left, right and top spaced out pretty evenly and i just have to bring the bottom up slightly…

thanks
trey

Find this on line 712 of template.css (if it’s still line 712 after all this tweaking :)):

.ja-rs1-bot { background: #101112; }
add height zero to it, so that it says:

.ja-rs1-bot { background: #101112; height: 0px;}
and i guess you’ll get rid of that div 😉

please report if it works.

by the way, it looks very promising 🙂

[treybraid Friend treybraidJoin date: May 2008Posts: 302Downloads:0Uploads:23 Thanks: 43 Thanked: 14 times in 1 posts]

#336098

hey thanks… it is a start… im putting ja_bulletin in the mod position and ive been able to style the title and date; but having issue getting the news items/ links to change…. this is what i have added to an extent with no success:

template.css
/* this is styling for new right column next to slideshow*/
#ja-right-top {
width: 270px;
background-position:center;
float: right;
font-size:11px;
color:#FFF;
padding: 10px 10px 10px 10px;

}

#ja-right-top .title-black h3 span strong.first-word {
background-color: #000000;
background-image: url(“../images/title-black.gif”);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: left top;
}

#ja-right-top h3 {
margin: 0 0 8px;
padding: 0;
color: #fff;
background: none;
}

#ja-right-top h3 span,
#ja-right-top h3 strong.first-word,
#ja-right-top h3 strong.first-word strong {
background: none !important;
margin: 0;
padding: 0;
}

/* this is end of styling for mod on right of slideshow*/

ive even tried to styling the dark-green.css file:
#ja-topsl, #ja-right-top { color: #FFFFFF; }

#ja-topsl a, #ja-right-top a { color: #ffffff; }

#ja-topsl a:hover, #ja-topsl a:active, #ja-topsl a:focus,
#ja-right-top a:hover, #ja-right-top a:active, #ja-right-top a:focus {
border-bottom: 0px solid #8A8A72; color: #ffffff; }

#ja-topsl h3, #ja-right-top h3 { color: #ffffff; }

#ja-topsl h3 span span, #ja-right-top h3 span span { color: #ffffff; }

let me know
thanks

trey

[Author]

Posts