Public Forums 71,145 posts

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#162268

I am really stuck trying to figure this out so I thought I’d check to see if anyone else could help.

So on the Right column if it has a module suffix of _orange – I want a background for the module. A top for the module title, a repeating image for the middle and then a bottom.

I’m using the blank template that I’ve customized. Here’s a link to the live working site:
http://dev.joomgo.com/clients/tig/

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#384485

This is how I have it sliced up to give more of a visual of what I want the module to look like if it has a suffix.

---

Attachments:

1. 

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#384808

Do I need to change how the modules are generated so the extra DIVs are created?

Here is the layout structure and code:


<?xml version="1.0" encoding="utf-8"?>
<layout name="desktop">
<!--Extra css load for this layout-->
<stylesheets>
</stylesheets>
<blocks name="top" style="xhtml">
<block name="top-panel" type="modules" style="raw" main-inner="1">top-panel</block>
<block name="header" type="header" main-inner="1"></block>
<block name="topsl" type="spotlight" main-inner="1">user1,user2</block>
</blocks>
<blocks name="middle" colwidth="30">
<block name="content-mass-top">banner</block>
<block name="right1" markup="1">right</block>
</blocks>
<blocks name="bottom" style="xhtml">
<block name="botsl" type="spotlight" main-inner="1">user6,user7,user8</block>
<block name="footer">user10,user11</block>
</blocks>
</layout>

I read up about customizing blocks but I don’t see any documentation about customizing modules.
http://wiki.joomlart.com/wiki/JA_T3_Framework_2/FAQs#Styling_custom_block_styles

When you view the site now, it’s not fixed – I simply have a fixed background applied until I have this figured out.

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#385107

Hi,

I’ve just checked your site, seems you have figured it out already? If not, please explain your idea more details then I may help you 🙂

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#385171

No – right now it’s a complete image in the background which is not the best way to do it because it’s not dynamic.

I need modules to have a background made up of 3 images. The top which includes the module name, the middle which is dynamic in how tall it is based on how tall the module is and then the bottom image.

The image above shows you how I sliced the image.

I’ve been playing with the div tags that make up a module but have not had any lucky. I’ve read through the T3 documentation and it shows you what code to add in your layout structure to add different types of div tags to your blocks, but I’ve not seen anything on how to add div tags to your modules…

Let me know if you need any other info or have questions – thank you for trying to help!

[Don Lee Friend Don LeeJoin date: March 2010Posts: 923Downloads:0Uploads:13 Thanks: 41 Thanked: 274 times in 238 posts]

#385386

I think you should read this guide, it might be helpful for you http://wiki.joomlart.com/wiki/JA_T3_Framework_2/Guides#Generate_additional_div

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#385448

I read that and referred to it above. That is for blocks, I need to do this for module positions. I’m not seeing how to use that documentation to do what I need to do for Module positions. Can you give an example or maybe point out what I’m missing. I appreciate you helping me!

[humusjey Friend humusjeyJoin date: March 2009Posts: 27Downloads:0Uploads:0 Thanks: 3 Thanked: 4 times in 1 posts]

#386288

I think you need CSS’s help.

Try this:


.ja-moduletable { background: url(top.png) no-repeat 0 0,url(middle.png) no-repeat 0 30px, url(bottom.png) no-repeat 0 80px; }


This is an example for a 100px module height.

Top’s height = 30px
Middle’s height = 50px
Bottom’s height = 20px

So this way you can add more backgrounds as you need.

1 user says Thank You to humusjey for this useful post

1. thatcomputerdude

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#386460

But how can you make it dynamic so the background adjusts in height based on how tall the module is?

[humusjey Friend humusjeyJoin date: March 2009Posts: 27Downloads:0Uploads:0 Thanks: 3 Thanked: 4 times in 1 posts]

#386782

Well, you need to make the images have a nice resolution and height. Your width is static what is nice, now your height is dynamic, so your background needs to be a big one.

You can make a pattern image in Photoshop or whatever you’re using, or you can use an image and play with background-position.

The key is to have a big image with a nice resolution so it will no matter the height of your module if the image is bigger than height.

e.g. If module height is about 300px then you should use 400px or maybe 500px height. You can use “%” instead of “px”.

1 user says Thank You to humusjey for this useful post

1. thatcomputerdude

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#386978

I can get the top and middle images to show properly but the bottom image is not showing, it’s hidden… Here is what I set the CSS up:


.moduletable_orange {
background: url("../images/right-top-bg.png") no-repeat scroll 0 0px, url("../images/right-middle-bg.png") no-repeat scroll 0 8px, url("../images/right-bottom-bg.png") no-repeat scroll 0 200px;
padding: 10px 2px 5px 16px !important;
margin: 8px 0 30px 0!important;
width: 276px!important;
}


[pepperstreet Friend pepperstreetJoin date: April 2011Posts: 55Downloads:223Uploads:7 Thanks: 21 Thanked: 4 times in 1 posts]

#386998

Hello,
You could have a look into the PURITY II template. I remember it has those colored module variations. They are dynamic in height and width (but not endless 😉 depends on your final graphics)

The T3 v2 Tutorial for a user theme. Comes close to a PURITY III and can be found here:
http://wiki.joomlart.com/wiki/JA_T3_Framework_2/FAQs

This includes 2 Videos. You should have a look at Video2 at minute 7:57 😉

[humusjey Friend humusjeyJoin date: March 2009Posts: 27Downloads:0Uploads:0 Thanks: 3 Thanked: 4 times in 1 posts]

#387665

Do you have divs inside your module or something else that could have a background?

.moduletable_orange (here is where your 3 backgrounds are)
.h3 //title
module-content (maybe here is a background)
more-content (or maybe it’s here)

If you find any background-color or jpg,png,gif just change it to “background: none;”

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#387683

No and I think that is the problem. Here is the structure in the T3v2 Framework for a module:


<div id="Mod99" class="ja-moduletable moduletable_orange clearfix">
<h3><span>Recent News</span></h3>
<div class="ja-box-ct clearfix">
<div class="k2ItemsBlock _orange" id="k2ModuleBox99">
<ul>
</ul>
</div>
</div>
</div>


There has got to be a way to make a dynamic sized background using 2 or 3 slices….

[thatcomputerdude Friend thatcomputerdudeJoin date: December 2008Posts: 280Downloads:0Uploads:9 Thanks: 67 Thanked: 32 times in 1 posts]

#387684

Do documentation shows you how to add move Div’s to a block… or how to do it for the Right column….. I need this done to a module, not a block or column.

[Author]

Posts