Joomla Templates Club 406,261 posts

[oboect Friend oboectJoin date: December 2012Posts: 27Downloads:0Uploads:5 Thanks: 9 Thanked: 6 times in 1 posts]

#189356

Hello there,

This is my first Joomla 3.0 project and I am stuck at the beginning. I am trying to change the CSS file to achieve a customized look, but so far, no luck.

I am using the modern template and I have tried changing this file:

/templates/ja_onepage/css/themes/modern/template.css

But nithing happend.

See the picture

I want to remove part of the space on top of the logo in the Hero Unit.
Can anyone point me to this solution?

Thank you very much.

---

Attachments:

1. 

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

#500650

So that I can try to best assist you, please provide the url of the site you’re working on,
as well as set your site to “Development Mode” within your Template Manager–General settings

[oboect Friend oboectJoin date: December 2012Posts: 27Downloads:0Uploads:5 Thanks: 9 Thanked: 6 times in 1 posts]

#500652

Hi Tom and thanks for your quick reply,

The site is not up yet as I am just starting now. Is it strictly necessary to put it up for you to help me? If so, I can put it somewhere temporally.

Development Mode was already activated.

Was I changing the correct file? (/templates/ja_onepage/css/themes/modern/template.css)

Many thanks

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

#500653

<em>@oboect 382823 wrote:</em><blockquote>
I want to remove part of the space on top of the logo in the Hero Unit.
</blockquote>
I’m not sure what you mean by “in the Hero Unit”

[oboect Friend oboectJoin date: December 2012Posts: 27Downloads:0Uploads:5 Thanks: 9 Thanked: 6 times in 1 posts]

#500654

Hi Tom,

As you can see from the picture in my first post, I have placed a logo on the module called Hero Unit. Apparently there is a css style that affects that module and has a padding or margin that gives a lot of space on the top of the picture. I want to reduce that space.

Also, I want to change the style on the “INTRODUCING” title. Now is orange, I want it yellow like the color on the logo, but I cannot find the css file that affects to that.

Hope this helps explaining my self.

Thank you very much.

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

#500655

This is why it is helpful to be able to access your site online – as I can then check and provide more exact recommendations for you. You can always throw it up (temporarily) and send me the info in a private message

[oboect Friend oboectJoin date: December 2012Posts: 27Downloads:0Uploads:5 Thanks: 9 Thanked: 6 times in 1 posts]

#500657

Hi Tom,

Is going up to a temporal site. I will send you the details in a few minutes.

Thanks

[oboect Friend oboectJoin date: December 2012Posts: 27Downloads:0Uploads:5 Thanks: 9 Thanked: 6 times in 1 posts]

#500658

You have got a PM with the details.

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

#500660

Okay, first of all . . . .

For the “Introduction” graphic, here is how you can change the background color and font color . . .

Within file path –> /t3-assets/dev/modern/templates.ja_onepage.less.themes.modern.template.less.css

at line 78, you will see the following:


.onepage .section-title h2 span {
background: none repeat scroll 0 0 #E54E19
display: inline-block;
padding: 10px 20px;
}

Change the background color code to whatever color code you want.

For the font-color (same CSS file as above)

at line 72, you will see the following:


.onepage .section-title h2 {
color: #FFFFFF
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
}

Modify the “color” property to whatever color you like for the font.

For assistance with finding color (hex) codes, check out THESE RESOURCES

1 user says Thank You to TomC for this useful post

1. oboect

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

#500662

For the logo, here is the CSS file that controls the styling . . .

/t3-assets/dev/modern/templates.ja_onepage.less.themes.modern.template.less.css

at line 35:


.logo h1, .logo h1 a {
margin-top: 10px;
}

Here is where you can modify the margin value … or add additional values (even negative values) for margin and/or padding.

Make sense?

You may also need to adjust the properties for your actual logo – depending on how you want it all to look.
That CSS file is at line 39:


.logo-image a {
background-image: url("../../../templates/ja_onepage/images/themes/modern/logo.png");
height: 23px;
width: 94px;
}

1 user says Thank You to TomC for this useful post

1. oboect

[oboect Friend oboectJoin date: December 2012Posts: 27Downloads:0Uploads:5 Thanks: 9 Thanked: 6 times in 1 posts]

#500743

Hi Tom,

I understand now, why I got you confused! When I meant the logo, I was talking of the image I placed on the Hero Unit Module, not the actual logo. But I got everything I needed now. So, for future people looking for what I was looking for they can change the css style in:

/t3-assets/dev/

Now I can play with all the code and that one affects my site.

Thank you very much for your help Tom.

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

#500768

Glad to be of assistance …. All the best with your continuing site development !!!

😎

[Author]

Posts