Joomla Templates Club 406,261 posts

[carlos andres cruz Friend carlos andres cruzJoin date: November 2012Posts: 11Downloads:0Uploads:8 Thanks: 7]

#191163

Excuse me,

How Can I change the background image on “Home features” and how can I change the transparency of that container.

And, Is possible to have a custom css for not change the original template files. How I do that?

ThankYou!

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

#508053

In answer to your first question, I can try to best assist you if you could provide the url of the site you’re working on, as well as temporarily set your site to “Development Mode” within your Template Manager–General settings.

As for your second question, it is absolutely possible to set up custom css files as template/layout overrides.
Perhaps THIS TUTORIAL may be of further assistance to you in this regard.

😎

1 user says Thank You to TomC for this useful post

1. carlos andres cruz

[carlos andres cruz Friend carlos andres cruzJoin date: November 2012Posts: 11Downloads:0Uploads:8 Thanks: 7]

#508057

My site is: http://lacazaco.wwwsr8.supercp.com/
As you see, I’d used a Custom HTML next to main slide, and I used a black background to read better the text. I would like change the transparence value of this container.
ThankYou

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

#508060

Can you do me a favor and temporarily set your site to “Development Mode” within your Template Manager — General settings?

Also, how do you want to modify the transparency ?

[carlos andres cruz Friend carlos andres cruzJoin date: November 2012Posts: 11Downloads:0Uploads:8 Thanks: 7]

#508098

My site is now on development mode.
As you can see, the text on the right looks ugly. I was thinking let the mask background a bit darker in order to don’t use that solid black color in the text. I think do a box with margins or padding with solid color and let the other transparency without modifications, but I dont know how to do that.
Other solution is change the backgorund image to black, but I don’t know how to.
Can you give me a hand.

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

#508105

Well, with regard to the display of the text/content, here is something you can try . . .

Within file path –> /t3-assets/dev/lacaza/templates.ja_muzic.less.modules.less.css
at line 1129, add some padding properties to the CSS rule, for example:


.t3-module .custom p {
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
text-align: left;
}

You can, of course, play around with the padding pixel value until you arrive at the result you’re most happy with. You can also modify the font-color to brighter text color – such as a pure white (i.e. #FFFFFF)

As for the container opacity issue, this appears to be controlled by the following CSS rule”

file path –> /t3-assets/dev/lacaza/templates.ja_muzic.less.style.less.css
at line 126:


.home-feature > .container {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
padding: 36px;
}

The opacity value is within the rgba(0, 0, 0, 0.5);

Play around with the values until you arrive at a result you’re most happy with.

A GREAT way to test things out before you commit them to your site is to use the FIREBUG online web inspection/development tool. This is what I used to test things out to provide my suggestions to you.

Hope That Helps.

😎

[carlos andres cruz Friend carlos andres cruzJoin date: November 2012Posts: 11Downloads:0Uploads:8 Thanks: 7]

#508300

Thank You Tom,

I’m going to replace the original image in the template folder. I got very confused about overriding, but no problem, I promised myself study it.
With your recomendations my home page looks better.

A final question I disabled the development mode and the changes were reverted. I need keep the development mode enabled? Sorry if the question is stupid that is new for me.

[phong nam Friend phong namJoin date: May 2015Posts: 3779Downloads:1Uploads:587 Thanks: 499 Thanked: 974 times in 888 posts]

#508452

Hi Carlos,

You can replace the background image and transparent effect on Home feature page by opening templatesja_muziclessstyle.less file, find (225-234th)lines:

.home-feature {
background: @Black url("@{T3ImagePath}/home-bg.jpg") no-repeat bottom center;
background-size: cover;
padding: @T3globalPadding * 2 0;

> .container {
background: rgba(0,0,0,0.5);
padding: @T3globalPadding * 2;
}
}

Change home-bg.jpg with your own image, make sure that you put the image into templates/ja_muzic/images/ folder on server. And you can change the background of .container (transparent) to color or remove that css line.

Note: Make sure you still enable the Development Mode so that the added css styles in .less files will be automatically compiled to corresponding .css files.

1 user says Thank You to phong nam for this useful post

1. carlos andres cruz

[Author]

Posts