Joomla Templates Club 406,261 posts

[elimagine Friend elimagineJoin date: October 2011Posts: 35Downloads:0Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#169879

For now, I’m posting multiple problems related to same topic, so it’s one thread. Let me know it requires different subjects to be opened.

I tried to publish another slideshow module but it doesn’t start at the to top edge of the module, just like the original slideshow module. The new slideshow is lower, maybe 10 pixels in vertical and maybe 5 in horizontal… this does not fit the clean and sharp look of JA ANION.

Same problem occurs when I try to display a banner instead of JA TABS (right position) : my image doesn’t fit the edge of the module, it’s truncated on the right and the picture is too low and leaves also space on the left. not really good looking as well

same king of “space problem ” also appears when I edit articles in JA slide news : in the demo site, you have a poster, and text of the introduction on HOME/MAIN MENU. When I add an image such as an icon at the end of the text, it is displayed over the title’s article. (check “VO” icon over quantum of solace in my frontpage

And For that again, I can’t figure how to deal with that.

any idea ?

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#420607

Hi,
Could you give me a snapshot with your annotation and username+password of backend?

[elimagine Friend elimagineJoin date: October 2011Posts: 35Downloads:0Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#420782

Slide show problem : I’d like it to be aligned with top and left lines of the template
in my case, slideshow mod goes too much down and to the right

Banner decay on right side
a simple image I’d like to star more on the right and upper
for now, it goes also too far on the right (yellow indicates the part where picture is cropped)

poster comes with title and introduction
I also added icons at the end of the text, but this icon goes over the title where it should go in the blue square area, at the end of the text

---

Attachments:

1. 
2. 
3. 

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#420878

Slide show problem : I’d like it to be aligned with top and left lines of the template
in my case, slideshow mod goes too much down and to the right

You find this code from /modules/mod_fpss/tmpl/Movies/css/template.css.php


#fpssContainer104.fpss-template-movies {
position: relative;
width: 650px;
height: 300px;
margin: 8px auto; < remove the line
border: 1px solid #999;
padding: 2px;
overflow: hidden;
font-family: "Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;
-webkit-transform-style: preserve-3d;
}

Banner decay on right side
a simple image I’d like to star more on the right and upper
for now, it goes also too far on the right (yellow indicates the part where picture is cropped)

You add this code into /templates/ja_anion/css/template.css

div.ja-moduletable.moduletable_hilite .ja-box-ct {
padding: 0px;
}
.moduletable_hilite p {
margin: 0px;
}

poster comes with title and introduction
I also added icons at the end of the text, but this icon goes over the title where it should go in the blue square area, at the end of the text

You add this code into /templates/ja_anion/css/template.css


.article-image > img {
position: absolute;
bottom: 20px;
}

1 user says Thank You to khoand for this useful post

1. elimagine

[elimagine Friend elimagineJoin date: October 2011Posts: 35Downloads:0Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#421013

thx to your help, I succeded for my slideshow integration :
BEFORE MODIFICATION

/* --- Slideshow Container --- */
#fpssContainer<?php echo $mid; ?>.fpss-template-movies {position:relative;width:<?php echo $width+$sidebarWidth; ?>px;height:<?php echo $height; ?>px;margin:8px auto;border:1px solid #999;padding:2px;overflow:hidden;font-family:"Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;-webkit-transform-style:preserve-3d;}
the template”s CSS is more like this after modification
AFTER MODIFICATION

/* --- Slideshow Container --- */
#fpssContainer<?php echo $mid; ?>.fpss-template-movies {position:relative;width:<?php echo $width+$sidebarWidth; ?>px;height:<?php echo $height; ?>px;overflow:hidden;font-family:"Trebuchet MS", Trebuchet, Arial, Verdana, sans-serif;-webkit-transform-style:preserve-3d;}

In order to get the best of JA ANION and keep it’s clean and sharp design, I finally removed :
padding, border, and margin
this should enable being driven by CSS of the template

Now my slideshow fits exactly every border of the template.
big thanks !

so it helps other users, in general for other slideshows in JA ANION : check the CSS style sheet delivered with the slide show module.

– the image inserted in an article, works fine with that code :

.article-image > img {
position: absolute;
bottom: 20px;
}

just changed it to 50px to get the picture closer to the article
works ok Thanks again ! (one “little” problem I have to set now is that, I also have a problem when I try to display icons under from “slide news” : none of the icon/small picture appears, but maybe that another thread, later)

Now, for the space around images and misplacements =

– about the image shown as a banner (wich was not a banner module) :
I added the code to templace.css :

div.ja-moduletable.moduletable_hilite .ja-box-ct {
padding: 0px;
}
.moduletable_hilite p {
margin: 0px;
}

So now, it is ok if I insert an image
I thought this would be the same once I published a banner module instead (as seen on my screenshot here)

but it is not, I’d like to have the same thing for banners module
would you have a css code for banners or should I create a new one in the template .css ?

– I’m adding more problem feedback (sure it’s only a matter of styled class to create/edit)

I now have a bad layout with slidenews module
check that screenshot :

and same with left position modules, I got text and picture that changed from the beginning, again check screenshot

---

Attachments:

1. 
2. 
3. 

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#421290

<em>@elimagine 277993 wrote:</em><blockquote>
I now have a bad layout with slidenews module
check that screenshot :

</blockquote>
You add this code into templates/ja_anion/css/template.css

.badge-top .badge {
top: -10px;
}

[elimagine Friend elimagineJoin date: October 2011Posts: 35Downloads:0Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#421463

<blockquote>I thought this would be the same once I published a banner module instead (as seen on my screenshot here)
Attachment 16755
but it is not, I’d like to have the same thing for banners module
would you have a css code for banners or should I create a new one in the template .css ?</blockquote>

<blockquote>and same with left position modules, I got text and picture that changed from the beginning, again check screenshot
Attachment 16762</blockquote>

and for both of these, do you think I shall use a specific style as well ?

or for do you think that could be a class to create, I would just have to specify the class for each article after all ?

[elimagine Friend elimagineJoin date: October 2011Posts: 35Downloads:0Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#421485

I’m replying to myself since I need to move along
I’ve created a new “hilite” class for modules on the left : they take padding margin from standard modules

so now, I call “_menu moduletable_hilite2” for left modules
-> solved

For banners : now that I have the _menu module table uses padding and margin to “0”, I just use this module class suffix into banners module -> solved

maybe it’s dirty work, but I did not find other solutions to perform what I need

I still have problem with your last code : so far, the look of modules headers is still not the same. Badge is now aligned on the top, but the modules (content slides) are not looking the same. I don’t understand why, both are using same settings, only badge class differs.

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#421656

I still have problem with your last code : so far, the look of modules headers is still not the same. Badge is now aligned on the top, but the modules (content slides) are not looking the same. I don’t understand why, both are using same settings, only badge class differs.

I don’t understand what you mean clearly :(. Sorry about that. But could you give me a snapshot with your annotation to explain more?

[elimagine Friend elimagineJoin date: October 2011Posts: 35Downloads:0Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#422125

same module
same settings
only changed class for menu module table badge stuff

not same look

---

Attachments:

1. 

[khoand Friend khoandJoin date: February 2011Posts: 4500Downloads:0Uploads:179 Thanks: 169 Thanked: 1166 times in 1060 posts]

#422150

Because module COLLECTOR “FRENCH TOUCH” use class badge-top. There is a definition in /templates/ja_anion/css/template.css:

.badge-top .badge {
top: -10px;
}
So badge is moved to top 10px.

[elimagine Friend elimagineJoin date: October 2011Posts: 35Downloads:0Uploads:20 Thanks: 5 Thanked: 1 times in 1 posts]

#422156

<blockquote>
I now have a bad layout with slidenews module
check that screenshot :
</blockquote>

<em>@khoand 278342 wrote:</em><blockquote>You add this code into templates/ja_anion/css/template.css

.badge-top .badge {
top: -10px;
}
</blockquote>

hum… yes, I know
you gave me that code to fix the badge problem earlier – it was very low

the actual problem is how to make that “bagde” class for modules looks the same whatever you choose “top, pick, news …”

at present basic Ja_anion template’s classes do not change the height style of the headers… except that “top”

if I go back and delete that last code, I’m going back in time with initial problem

to show my point : here is the screenshot of the four classes using badge attributes
last one (green) is using top (french touch as you said)

---

Attachments:

1. 

[Author]

Posts