Joomla Templates Club 406,261 posts

[avielchen Friend avielchenJoin date: December 2011Posts: 16Downloads:0Uploads:0 Thanks: 3]

#192928

I would like to use the module of the boxes on top of my page without the stars. There are nice modules on the bottom in the demo page that has a beautiful design like the one used under the logo, how do I get that into the module that would go into user1 position?
i.e. in the demo there is a module in user6 postion – “About Our Hotel”, how do I get that module up to user1 position? If I just switch the position in the backend, the design is changed into the regular original user1 postion (which in the demo was called “Easy, quick and instant update”!

Thank you in advance!

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515252

So, if I am understanding you correctly, you want to replace the stars with that fancy design – correct?

It may simply be an issue of modifying the background image CSS for #ja-topsl .module h3 – which is ja_droid/images/h3-bg2.png – with the background image that is used for the other module – which is /ja_droid/images/h3-bg.png

Do you know how to locate the appropriate CSS rules to make these modifications?

1 user says Thank You to TomC for this useful post

1. avielchen

[avielchen Friend avielchenJoin date: December 2011Posts: 16Downloads:0Uploads:0 Thanks: 3]

#515254

Wow cool! How did you figure that out?
So YES this is exactly what I wanted to do.
How does this work that a module in position user6 gets h3-bg and when that same module is placed in user1 it gets h3-bg2???
As for your question: Do you know how to locate the appropriate CSS rules to make these modifications?
The answer is no! Can you tell me how?
Does this also mean that I will never have the h3-bg2 available once I change it?
thanks for your help !

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515255

I will show you the exact file paths to work with, but I will need a couple of things done first . . .

1. The url of the site you’re working on

2. Set “Optimize CSS” to “No” within your Template Manager–General settings.

When you have done the above, let me know.

[avielchen Friend avielchenJoin date: December 2011Posts: 16Downloads:0Uploads:0 Thanks: 3]

#515257

Is this going to be very complicated because I am not a programmer and its not the end of the world if I have the stars there… How long do you think this will take me to do as a novice?

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515259

<em>@avielchen 401744 wrote:</em><blockquote>Is this going to be very complicated because I am not a programmer and its not the end of the world if I have the stars there… How long do you think this will take me to do as a novice?</blockquote>

It’s actually very easy . . . but I do need those things I indicated above done before I can assist you further.

[avielchen Friend avielchenJoin date: December 2011Posts: 16Downloads:0Uploads:0 Thanks: 3]

#515261

OK
Where do I turn the css off?

[avielchen Friend avielchenJoin date: December 2011Posts: 16Downloads:0Uploads:0 Thanks: 3]

#515262

http://ahavashatorah.com/
CSS = OFF

[avielchen Friend avielchenJoin date: December 2011Posts: 16Downloads:0Uploads:0 Thanks: 3]

#515264

Any Luck???

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515266

<em>@avielchen 401753 wrote:</em><blockquote>Any Luck???</blockquote>

Your site appears to be password protected. I will need temporary access if I am to assist you further.
You can send me temp access info via PM if you like.

[avielchen Friend avielchenJoin date: December 2011Posts: 16Downloads:0Uploads:0 Thanks: 3]

#515267

I’m going to stick with the stars thanks anyway

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515268

<em>@avielchen 401756 wrote:</em><blockquote>I’m going to stick with the stars thanks anyway</blockquote>

It’s really not a difficult process at all . . . and learning how to do things such as this will only serve to help you as you continue to develop your site. CSS modification is one of the most basic things you should learn and understand about when working with contemporary website design/development – and you do not need to be a “programmer” to grasp the basic concepts.

It’s up to you . . . but I’m certainly happy and willing to, cooperatively, assist you with your original request.

[avielchen Friend avielchenJoin date: December 2011Posts: 16Downloads:0Uploads:0 Thanks: 3]

#515269

I am very eager to learn its just that for obvious reasons i cant give you access to my website

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#515272

Well, I will say that you can rest assured that we never divulge any private site access info provided to us.

However, you should be able to find the appropriate CSS to modify with the following instructions . . .

STEP ONE:
Within file path –> /templates/ja_droid/css/template.css
at line 378, you will see the following:


div.ja-moduletable h3, div.moduletable h3 {
background: url("../images/h3-bg.png") no-repeat scroll center bottom rgba(0, 0, 0, 0);
color: #555555
font-size: 120%;
font-weight: normal;
padding: 10px 0 25px !important;
text-align: center;
text-transform: uppercase;
}

Note the “background” property and image file path for the “fancy” design.

STEP TWO:
Within the same file path –> /templates/ja_droid/css/template.css
at line 605, you will see the following:


#ja-topsl .module h3 {
background: url("../images/h3-bg2.png") no-repeat scroll center bottom rgba(0, 0, 0, 0);
border: 0 none;
color: #273457
font-size: 180%;
padding: 0 0 20px !important;
text-transform: none;
}

STEP THREE:
Replace the background image within the above CSS (line 605) with the background image from the CSS rule within line 378 – as follows:


#ja-topsl .module h3 {
background: url("../images/h3-bg.png") no-repeat scroll center bottom rgba(0, 0, 0, 0);
border: 0 none;
color: #273457
font-size: 180%;
padding: 0 0 20px !important;
text-transform: none;
}

SAVE CHANGES — CLEAR CACHE — REFRESH PAGE

Hope That Helps

1 user says Thank You to TomC for this useful post

1. avielchen

[avielchen Friend avielchenJoin date: December 2011Posts: 16Downloads:0Uploads:0 Thanks: 3]

#515275

Oh I didn’t know you are a Joomlart staff member… Thanks a lot for the info.
Replacing code I have done before to css file, like resizing logo, etc. But I thought there was more to it.
🙂

[Author]

Posts