Joomla Templates Club 406,261 posts

[fkatzenb Friend fkatzenbJoin date: January 2013Posts: 5Downloads:3Uploads:0]

#184601

This is driving me mad! I cannot seem to find the CSS that allows me to change the background image URL instead of overwriting the file. I also want to make it left justified instead of right.

Thanks,
Frank

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#482130

Try using FireBug to detect where image is

[fkatzenb Friend fkatzenbJoin date: January 2013Posts: 5Downloads:3Uploads:0]

#482155

<em>@Blaine 358275 wrote:</em><blockquote>Try using FireBug to detect where image is</blockquote>

Been there, done that…

Firebug says the following in template.min.css…

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

However template.min.css and template.css do not contain that. This is everything related to

.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;
}

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#482199

I need a link to the site please

[fkatzenb Friend fkatzenbJoin date: January 2013Posts: 5Downloads:3Uploads:0]

#482202

<em>@Blaine 358393 wrote:</em><blockquote>I need a link to the site please</blockquote>

I just sent it to you in a PM. Thank you.

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#482432

In your min.css file I found the link to hero unit as follows:

p{margin-bottom:0}.hero-unit{padding:60px;margin-bottom:30px;font-size:18px;font-weight:200;line-height:30px;color:inherit;background-color:#eee;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.hero-unit
There are actually 24 calls to the word “hero” in the file that I see.
Open the file, press CNTRL button and also the “F” key and a pop up comes up. Type in the word hero and it should highlitght all calls to it.
Change the code:

background-position: right top;
TO:

background-position: left top;
That does however leave a big black area to the right now.
Other than that you really should download the image from the cPanel of your site, alter it and re-upload it overwritting the file (or rename the old one if you wish to preserve it and name the new one the old ones name.

[fkatzenb Friend fkatzenbJoin date: January 2013Posts: 5Downloads:3Uploads:0]

#482500

<em>@Blaine 358736 wrote:</em><blockquote>In your min.css file I found the link to hero unit as follows:

p{margin-bottom:0}.hero-unit{padding:60px;margin-bottom:30px;font-size:18px;font-weight:200;line-height:30px;color:inherit;background-color:#eee;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.hero-unit
There are actually 24 calls to the word “hero” in the file that I see.
Open the file, press CNTRL button and also the “F” key and a pop up comes up. Type in the word hero and it should highlitght all calls to it.
Change the code:

background-position: right top;
TO:

background-position: left top;
That does however leave a big black area to the right now.
Other than that you really should download the image from the cPanel of your site, alter it and re-upload it overwritting the file (or rename the old one if you wish to preserve it and name the new one the old ones name.</blockquote>

I think I need to take a step back and understand something as this is my first JoomlArt template. On other templates, I make changes to CSS by going to the Template Manager and selecting templates to find all of the stylesheets.

There are normal and minified versions. I am assuming that it takes all of the minified files and uses those. However why would both be listed? Should I be editing the normal file and then manually minifying it for the minified css? Or is that was LESS is for? I have never heard of it.

Thanks,
Frank

[Blaine Friend BlaineJoin date: August 2007Posts: 1443Downloads:0Uploads:25 Thanks: 98 Thanked: 177 times in 154 posts]

#482522

Ninja Lead explains it best here.
Searching the forum is always best.
I can’t explain the logic behind the templates as I have nothing to do with development. Please read the above listed thread and get back to me if you have more difficulties.
If solved, please mark as such.
Thanks!

1 user says Thank You to Blaine for this useful post

1. JA Developer

[solosan Friend solosanJoin date: November 2011Posts: 27Downloads:116Uploads:13 Thanks: 5 Thanked: 1 times in 1 posts]

#544062

hi fkatzenb,
i came across the same problem a while ago. while i believe that the instructions given helped, i just want to share what i did which is a little different. now, am very careful not to edit my template files directly especially when the custom.css has been provided.

i discovered that to use a background image in the default, you only have to create a default folder in the theme’s folder of your template and put your images there. by doing that you only have to change the theme’s folder (to default) but still maintain the image path (url(“../images/themes/default/header_bg.jpg”)) since it seems not to be loading any other defined path e.g (url(“images/yourtemplate/imagefolder/image”)).

i hope this helps in addition to what has been shared.

---

Attachments:

1. 

1 user says Thank You to solosan for this useful post

1. JA Developer

[Author]

Posts