Recent
Categories
View Replies (20)

Background Image/Gray Area

0
Votes
Undo
  1. mclaugh01
    mclaugh01
  3. Free Templates / Extensions
  4. Thursday, 17 May 2012
  5.  Subscribe via email
As you can see the bottom/left side of the screen is gray. I've tried adjusting the size of the background image but it doesn't change the way it's viewed. My site it not live yet so I can't provide a URL. I have determined that this part of the css is what controls the color/image that is currently displayed as gray but I need to find a way to make the current background image the overall default so that it fits the entire screen.

body {
background: #130e0a url(../images/bg.jpg) 50% 0;
width: 100%;
font-family: Helvetica,Arial,FreeSans,sans-serif;
font-size: 13px;
font-weight:normal;
color: #3a3a3a;
margin:0 !important;
padding:0 !important;

If anyone has any thoughts on how to change this or if you need me to provide specific HTML from the template.css document please let me know. I'm new to Joomla and HTML so I'm really unsure what to do.

Another option would be to figure out a way to center the current background so the same amount of gray shows on either side and at the bottom but I am not sure how to do this either.

Thank you!
Responses (20)
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi mclaugh01

Would you have a URL to your site so we can examine this issue further?

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 1
mclaugh01
mclaugh01
Accepted Answer Pending Moderation
0
Votes
Undo
No, as I said before my site it not live yet. I did try changing the bg.jpg background but it only shows up on the left/bottom part of the screen. If I could get it to look uniform so the same amount of "gray" shows everywhere that would be fine too. It's just that the way it looks right now seems unfinished.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 2
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Its difficult to say why your background image is appearing to the right of the screen without access to the site. May I suggest dropping a message here once your site is live and we will take a look for you.

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 3
mclaugh01
mclaugh01
Accepted Answer Pending Moderation
0
Votes
Undo
Yeah, finally my site is somewhat live. Here's the link. If you can help me figure out why there is grey area to the left and how to fix it I would be greatful. Thank you!

http://www.maumeevalleypresby.org/
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 4
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Thank you.

Try adding the following to the Custom CSS field within your templates parameters...

[code type=css]#body_bg {
background: url("../images/style1/header.jpg";) no-repeat scroll 50% 0 transparent;
}[/code]
Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 5
mclaugh01
mclaugh01
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for getting back to me so quickly. I did what you suggested and it helped center my webpage. It doesn't look like I can extend my background to fit. Is there any way for me to change the color of the grey background so that it's more consistent with the colors in my site?

Thanks for all of your help with this.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 6
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Try also adding the following...

[code type=css]body {
background-image: none;
background-color: #FFFFFF;
}

#top {
margin-left: 14px;
width: 944px;
}[/code]
.. where #FFFFFF is your new background colour (edit to taste).

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 7
mclaugh01
mclaugh01
Accepted Answer Pending Moderation
0
Votes
Undo
You rock, thank you!

Would you happen to know how I can get my left navagation module to line up with the "home" button at the top like it does on the right under "forms & documents," rigt now it looks like it is exceeding the spacing of the top navigation bar. Right now it doesn't look like it's all centered.

Also, would you happen to know how I can remove some of the space above each of the articles on the homepage so the articles are a little closer together?
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 8
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Try adding the following to center your menu items and reduce the gap between your articles...

[code type=css]#hornav {padding: 5px 0 0 16px;}
.leading-0, .leading-1, .leading-2, .leading-3, .leading-4 {margin-botoom:20px;}[/code]
Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 9
mclaugh01
mclaugh01
Accepted Answer Pending Moderation
0
Votes
Undo
It looks like the padding wasn't changed for the article but the centering on the navigation bar worked wonderfuly.

You are truly amazing, I can't thank you enough for all of your help. I have already spent hours trying to figure some of these things out and you fixed them in seconds. Thank you so much.

Are you able to assist me with the last part of my question that I posted yesterday regarding the spacing of the background of the module behind the left menu bar. The beige color is exceeding the green color so it's not lining up with the top navigation bar.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 10
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi

Try adding the following in place of the previous #top CSS..

[code type=css]#top {
margin-left: 0;
width: 960px;
}[/code]
Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 11
mclaugh01
mclaugh01
Accepted Answer Pending Moderation
0
Votes
Undo
That didn't seem to do anything. I can still see the tan border on the left side exceeding the top navigation menu. I also noticed that in the naviation menu the buttons on each end (i.e. home and forms & documents) don't seem to be centered. Any thoughts on how to fix these issues?
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 12
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
The above CSS doesnt appear to be set on your site. Ensure you have added it correctly.

Alternatively you can send temp administration access to your Joomla installation to info@joomla51.com and we will set the CSS for you.

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 13
mclaugh01
mclaugh01
Accepted Answer Pending Moderation
0
Votes
Undo
Thanks for getting back to me so quickly. Where should it go in the CSS, I added it to the template.css

This is what I currently have in template.css
#top {border:0; padding:0px 0px 0px 0px ; margin-left: 0; width: 960px; height:60px; float:left; margin-bottom:0px; z-index:999999; position:relative; background: url("../images/hornav.png";) no-repeat scroll 50% 0% transparent;}
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 14
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Add all CSS to the Custom CSS field within your templates parameters. Ensure you are using the latest version of the template. If this field is not available it means that you are not.

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 15
mclaugh01
mclaugh01
Accepted Answer Pending Moderation
0
Votes
Undo
I hate to bug you again but I am not sure where you are asking me to add it. I'm somewhat new to all of this so the more info you can give me the better. I am attaching a picture of the different templates I can access in hopes that it will help. Thanks again for everything.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 16
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
You appear to be using an old version of the template.

You can upgrade your template to the latest version (http://www.joomla51.com/templates/j51-oxygen) however this will mean losing your changes to the template.

Alternatively you can send temporary administration access to your Joomla installation to info@joomla51.com and we will add the CSS to your current version of the template.

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 17
mclaugh01
mclaugh01
Accepted Answer Pending Moderation
0
Votes
Undo
For now I will just send you access to make the changes until I can find the time it will take to rework the site after I upgrade the template. Thanks again for your help with this.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 18
ciaran
ciaran
Love Fool Sherlock Holmes The Voice
Notable Answerer Notable Answerer
Accepted Answer Pending Moderation
0
Votes
Undo
Hi Sara

Thank you for the access.

The CSS has been added to your site.

Ciarán
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 19
mclaugh01
mclaugh01
Accepted Answer Pending Moderation
0
Votes
Undo
Ciarán, thank you for working on this for me. I very much appreciate all you have done to make our site look so good.
  1. more than a month ago
  2. Free Templates / Extensions
  3. # 20
  • Page :
  • 1


There are no replies made for this post yet.
Be one of the first to reply to this post!

Site Links

Recommended

Join Our Newsletter

* indicates required
We respect your privacy and do not tolerate spam and will never sell, rent, lease or give away your information (name, email, number, etc.) to any third party. Nor will we send you unsolicited email.
Joomla51 - Mullaghmore, Co. Sligo, Ireland
Joomla51.com is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by
Open Source Matters the trademark holder in the United States and other countries.

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok