Joomla Templates Club 406,261 posts

[arkanjie Friend arkanjieJoin date: July 2011Posts: 23Downloads:0Uploads:0 Thanks: 13 Thanked: 1 times in 1 posts]

#184327

Hi there,

I’m testing with this new awesome template and the only thing I can’t find is the way to change the main background image.

I know is located at url (“../../../images/themes/metro/header_bg.gif”) and it’s loaded by template.min.css

I modified the ccs file to call a jpg image (“../../../images/themes/metro/header_bg.jpg”) but it’s not working. It showing already the same .gif

Any ideas?

Cheers

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#481104

I’m not quite sure what modifications you have done, you can try as my suggestion again

<blockquote>templates/ja_onepage/css/themes/metro/template.css</blockquote>
and change

.hero-unit {
background-image: url('../../../images/themes/metro/header_bg.gif');
background-repeat: no-repeat;
background-position: right top;
}

<blockquote>templates/ja_onepage/css/themes/metro/template.min.css</blockquote>

.hero-unit{background-image:url('../../../images/themes/metro/header_bg.gif');background-repeat:no-repeat;background-position:right top}

image that needs to be changed
<blockquote>templates/ja_onepage/images/themes/metro/header_bg.gif</blockquote>

Let me know if it helps

[arckoo Friend arckooJoin date: May 2011Posts: 112Downloads:0Uploads:8 Thanks: 50 Thanked: 4 times in 1 posts]

#482104

In menu manager >> Main Menu, I disabled “Styles”, since I’m working with the default template. How do I change the black rectangle (where it says: Simplicity Isn’t Simple.) to an image of my own?

I know how to replace the image in the different styles, just not in the default template 😉

Thanks!

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#482304

You can change it from text to image on this way
<blockquote>Admin ->Extensions->Module Manager->Edit Hero Unit(custom html module) and change text to image</blockquote>
and the css for this module is
<blockquote>templates/ja_onepage/css/template.css</blockquote>

.hero-unit {
margin: 59px 0 0;
padding: 0;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.hero-unit .container {
padding: 140px 0 30px;
}
.hero-unit .hero-unit {
padding: 0;
margin: 0;
}
.hero-unit h1 {
font-weight: bold;
margin-bottom: 30px;
}
.hero-unit p {
font-size: 24px;
margin-bottom: 30px;
padding: 0 150px;
}
.hero-unit p.btn_unit {
margin-bottom: 0;
}
.hero-unit .btn {
border: 0;
color: #fff
font-weight: bold;
padding: 15px 40px;
text-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.hero-unit .btn-primary {
background: #f7682c
margin-bottom: 40px;
}
.hero-unit .btn-primary:hover {
background: #e74b09
color: #fff
text-shadow: none;
}
.hero-unit a.arrow-down {
background: url('../images/arrow-down.png') no-repeat left top;
display: inline-block;
height: 40px;
font-weight: bold;
text-indent: -999em;
width: 40px;
}
.hero-unit a.arrow-down:hover {
background-position: left bottom;
}

1 user says Thank You to Ninja Lead for this useful post

1. arckoo

[arckoo Friend arckooJoin date: May 2011Posts: 112Downloads:0Uploads:8 Thanks: 50 Thanked: 4 times in 1 posts]

#483352

Thanks Ninja Lead… your answer did help but unfortunately not enough. I do get the image where I want it to, but it doesn’t show as a background. Instead it moves the orange button down and positions itself above this button.

What I would like is that my image becomes the background instead of the black rectangle it is now. I’ve attachted a photoshopped image of what I mean. Hope you can help!

---

Attachments:

1. 

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#483506

Try this :

Open templates/ja_onepage/less/style.less file
from

.hero-unit .container {
padding: 140px 0 30px;
}

.section1 .hero-unit {
background: @section1BackgroundColor;
}

/* change color button */
.hero-unit .btn-primary {
background: @orange;
margin-bottom: @BaseLineHeight * 2;
}

.hero-unit .btn-primary:hover {
background: darken @orange, 10%);
color: @white;
text-shadow: none;
}


change to

.hero-unit .container {
padding: 140px 0 30px;
background: red;<- add other background your image here
}
.section1 .hero-unit {
background: none;
}

/* change color button */
.hero-unit .btn-primary {
background: none;
margin-bottom: @BaseLineHeight * 2;
}

.hero-unit .btn-primary:hover {
background: none;
color: @white;
text-shadow: none;
}


1 user says Thank You to Ninja Lead for this useful post

1. arckoo

[arckoo Friend arckooJoin date: May 2011Posts: 112Downloads:0Uploads:8 Thanks: 50 Thanked: 4 times in 1 posts]

#484227

Thank you Ninja Lead… you are a great help! Changing the style.less file did exactly what I wanted.

I was wondering if you could help me with one last thing though:
How do I make sure the image streches all the way from the left to the right side of the screen and how do I make sure the image is as big as it is in the modern-style of the template http://joomla25-templates.joomlart.com/ja_onepage/2012-12-25-09-24-24/modern-style.html ?

Btw: I would also like to get rid of the text:

“Simplicity Isn’t Simple.
Design is a word that’s come to mean so much that it’s also word that has come to mean nothing.”

without it effecting the size of the image.

Arckoo

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#484392

You can use 2 option to work on this

Open templates/ja_onepage/less/style.less file

Option 1: Use background image cover
from

.hero-unit {
margin: 59px 0 0;
padding: 0;
text-align: center;
.border-radius(0px);
}
change to

.hero-unit {
margin: 59px 0 0;
padding: 0;
text-align: center;
.border-radius(0px);
background: url('../images/your_background.png') no-repeat left top;
background-size: cover;
}
With path image: templates/ja_onepage/images/your_background.png


Option 2: User background image loop

.hero-unit {
margin: 59px 0 0;
padding: 0;
text-align: center;
.border-radius(0px);
}
change to

.hero-unit {
margin: 59px 0 0;
padding: 0;
text-align: center;
.border-radius(0px);
background: url('../images/your_background.png') repeat left top;
}
With path image: templates/ja_onepage/images/your_background.png


1 user says Thank You to Ninja Lead for this useful post

1. arckoo

[Author]

Posts