Joomla Templates Club 406,261 posts

[swansonwc Friend swansonwcJoin date: March 2009Posts: 19Downloads:0Uploads:10 Thanks: 5]

#161781

Hi,

I created a custom HTML module to be displayed in the content-mass-top position. I put the text in the module in a div class=”ja-content-main”. I also created a css rule override (in the local template.css file) to style the h2 tag that I put in the text:
.ja-content-main h2 {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 185%;
color: #5c4e36;
}

Everything looks the way I intended in FireFox, the h2 styling doesn’t work in Chrome, and in IE the div doesn’t have rounded corners and the h2 styling doesn’t work.

I’ve included screen captures from all three browsers. The site is http://readwritepost.com.

Best regards,
Bill

---

Attachments:

1. 
2. 
3. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#382844

i saw you use these for your custom module:

<div class=”ja-content-main”>
YOUR CONTENT HERE
</div>

=> in the IE browser the template called a script for render the rounded corners , but this rule is not controlled by script code.

You try with this:

<div class=”ja-slidewrap”>
<div class=”ja-moduleraw-style2″>

<div>
</div>

[swansonwc Friend swansonwcJoin date: March 2009Posts: 19Downloads:0Uploads:10 Thanks: 5]

#382877

Thank you for your reply. Unfortunately, that didn’t work.I’ve attached screen caps of the results.

What I’d like to accomplish is having some introductory text for the site above the several highest rated articles. Do you think that I should try a different approach to doing this – instead of having this text in a custom html module?

Best regards,
Bill

---

Attachments:

1. 
2. 

[swansonwc Friend swansonwcJoin date: March 2009Posts: 19Downloads:0Uploads:10 Thanks: 5]

#382967

tienhc,

This particular post is not an issue any longer. I’ve taken a different approach. Thank you for your answer.

Instead of placing the site’s static text in the module in the content-mass-top position, I’ve moved it down to the main body and created a new module position at the bottom of the page for the rest of the page content. I did this by following the advice from the post “So much Confusion :(“. However the content in the module looks awful. I’d like to style it to look like the main body area. What module class suffix can I use to accomplish this?

Best regards,
Bill

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#383023

ok, now, please rollback the original then open the file; templatesja_socialblocksie-rounded.php and find the following code:
[PHP]
DD_roundies.addRule(‘#ja-content-main, #ja-container div.ja-moduletable’, ‘8px’);[/PHP]

replace by:
[PHP]
DD_roundies.addRule(‘#ja-content-main, #ja-container div.ja-moduletable, .ja-content-main’, ‘8px’);
[/PHP]

[swansonwc Friend swansonwcJoin date: March 2009Posts: 19Downloads:0Uploads:10 Thanks: 5]

#383047

tienh,

I apologize for not being clearer. I sense that we are talking about two different things now. I have created a new module position, and I’d like it to be styled like the main body area — across all browsers. I called this new module position content-bottom, and it is place below the main body area.

Does your code above do that? I see that it is in the ie-rounded.php file. Please help me to understand.

Thank you for your help and patience.

Best regards,
Bill

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#383208

yes, mate

for example with main content, you can see the rounded corner for example in the Firefox, Chrome. because the template use the CSS3 to make this, you can find the code in the templates/ja_social/css/css3.css

.ja-content-main {
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
box-shadow: 0 1px 0 rgba(0,0,0,.4);
-moz-box-shadow: 0 1px 0 rgba(0,0,0,.4);
-webkit-box-shadow: 0 1px 0 rgba(0,0,0,.4);
}

but with IE8,7,6..etc do not support the CSS3 => the rounded box could not show, so that in the JA Social Template use a plugin javascript to make the rounded box and you must to add a rule like as code which i posted in the thread #5

=> Summery: to make a rounded box:
1) you will defined a class like as the “ja-content-main” class
2) you will add rule for the JS code into the ie-rounded.php file

1 user says Thank You to Saguaros for this useful post

1. swansonwc

[swansonwc Friend swansonwcJoin date: March 2009Posts: 19Downloads:0Uploads:10 Thanks: 5]

#383266

Got it. Thank you.

Best regards,
Bill

[Author]

Posts