Joomla Templates Club 406,261 posts

[lectrosonics Friend lectrosonicsJoin date: October 2010Posts: 6Downloads:17Uploads:0]

#933432

I am trying to set opacity for the image that shows up in the JA Masthead portion of the template. Some of the designs in my portfolio are too distracting with the text so I wanted to screen back the background images in JA Masthead that are auto generated by the images in the articles. Everything I have tried seems to not work or it screens the text and everything and not just the background image.

Is there a CSS style I can do this and if not, how do I turn the background image off in the .js file.

Thanks

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#933677

Hi there

Could you please share your website url and also post a screenshot showing in details which type of customization you need ?

You can use a custom.css file to customize background image and set also new opacity value on it

[lectrosonics Friend lectrosonicsJoin date: October 2010Posts: 6Downloads:17Uploads:0]

#933788

I tried the customized CSS but I couldn’t get it to work on just the image. I tried:

.jamasthead .img {
opacity: 0.2;
}

and other combinations of that trying to highlight the image behind masthead title and color mask but it turns the test and everything to that opacity.

Here is an example page:
http://www.phantomwolfcreative.com/projects/12-logo-and-branding/103-chrome-salon-logo-stationery-system

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#933802

If i correctly understood what you want to obtain then i think you should customize this snippet css code

.jamasthead.blend-bg

so adding an opacity to it in custom.css file

.jamasthead.blend-bg {
opacity: 0.2;
}

---

Attachments:

1. 

[lectrosonics Friend lectrosonicsJoin date: October 2010Posts: 6Downloads:17Uploads:0]

#933821

Yes I tried that but if you look it brings down the opacity for that entire jamasthead block and I just want the graphic in the background that it is pulling from the article to be a lower opacity and the words and share icons to not be affected. This the problem I kept running into

[lectrosonics Friend lectrosonicsJoin date: October 2010Posts: 6Downloads:17Uploads:0]

#933823

Yes I tried that but if you look it brings down the opacity for that entire jamasthead block and I just want the graphic in the background that it is pulling from the article to be a lower opacity and the words and share icons to not be affected. This the problem I kept running into

Here is an example page:
http://www.phantomwolfcreative.com/projects/12-logo-and-branding/103-chrome-salon-logo-stationery-system

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#934460

Hi

I think that what you are asking is impossible with a css customization. you should find another solution working on image directly.

[lectrosonics Friend lectrosonicsJoin date: October 2010Posts: 6Downloads:17Uploads:0]

#934709

Well how about if I don’t want image to show up at all on the left side (JA Masthead) when it goes to the projects on the Isotope layout? How do I do that?

[pavit Moderator pavitJoin date: September 2007Posts: 15749Downloads:199Uploads:2274 Thanks: 417 Thanked: 4028 times in 3778 posts]

#934739

lectrosonics wrote:

How do I do that?

Try in this way

Open this file /templates/ja_mono/html/layouts/joomla/content/masthead.php and change around line 22

FROM :

<div class="jamasthead blend-bg" style="background-image:url(<?php echo $imageBg ?>);">

TO :

<div class="jamasthead blend-bg">

---

Attachments:

1. 

[Author]

Posts