Solved

Make Articles w White background; not translucent

Posted on 2014-01-03
11
271 Views
Last Modified: 2014-02-04
I have a Joomla 3 website at aznogi.com.  I want to put a background through the bootsrap.css.  I have commented it out for now because the articles are transparent and it looks bad.  Do you know a simple way to make your articles or center of the website a color like white?  The desired effect is to have the center white and only the sides showing the logo.  Thanks for your help in advance.
0
Comment
Question by:j0s3ph
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 18

Expert Comment

by:Steven Harris
ID: 39755160
Do you have any type of relevant code you can share for the HTMl and CSS portions?
0
 

Author Comment

by:j0s3ph
ID: 39755301
Should I attach the bootstrap.css, template.css, both?  Sorry, CSS is something I will need to get a bit better at.  I'd like the center of the website to be white, not translucent.  Thanks for the quick reply.
0
 

Author Comment

by:j0s3ph
ID: 39755316
OMG, I meant to say Transparent, not Translucent.  Sorry, lol
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 18

Expert Comment

by:Steven Harris
ID: 39755337
We would need to see the HTML snippet for whatever you are working on and the applicable .css file that the HTML points to.

As an example

If the HTML is:

<div id="cont1">
     <div id="cont2">
          Your text here...
     </div>
</div>

Open in new window


and the .css is:

#cont1 {
     background-image:url('images/bg.jpg');
}

#cont2 {
     background-color:rgba(255,0,0,1);
}

Open in new window


the rgba(255,0,0,1) part is saying that the inner container "center of the website" [opacity setting] is translucent.
0
 
LVL 18

Expert Comment

by:Steven Harris
ID: 39755347
OMG, I meant to say Transparent, not Translucent.

Semantics...  No worries, I understand what you meant.
0
 

Author Comment

by:j0s3ph
ID: 39755457
This is the code I commented out for the background image (below).  When I apply it, the articles are transparent and it looks busy.  I was hoping to edit one of the css files so the center of the website would be white.  This way the background only showed on the sides.
}
body {
  margin: 0;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 18px;
  color: #a2a2a2;
  background-color: #ffffff;
  #background-image: url(../images/background/StrongHeart-FullRes.png);
}
0
 

Author Comment

by:j0s3ph
ID: 39755458
That is from the bootstrap.css
0
 
LVL 18

Expert Comment

by:Steven Harris
ID: 39756003
Without seeing the html, it is hard to tell which direction we need to go.  Is the site published so you can share a link, or possibly upload the html file?
0
 

Author Comment

by:j0s3ph
ID: 39756936
Yes, the website is published at aznogi.com.  Sorry I didn't get the info you were looking for.  I am not sure what file to check.  I am heavier on the Brazilian Jiu Jitsu than the website ;)  If you can't see the info let me know and I'll track down the file you need to analyze.
0
 
LVL 18

Accepted Solution

by:
Steven Harris earned 500 total points
ID: 39757503
Ok, so I see some issues going on here (I know this is a work in progress) but instead of leaving you hanging, I think we should expand the discussion to more than the inner-wrapper opacity.  Let's start with some of the basics:

1)  Have you made any modifications (besides text) to the template?  Either HTML or CSS Files.
2)  What were the changes?
3)  Do you have the original template available as zip file?

What brings me to this:

The first place I checked was the HTML which always has some type of "Outter and Inner" wrappers.  Once I found the wrappers and their class/ID, I went to the CSS pages.  While I can find the "Outter" wrapper, the styling for the "Inner" wrapper appears to be missing altogether.
0
 

Author Comment

by:j0s3ph
ID: 39775115
I went on vacation so sorry for the long delay!  
1.  No edits to the HTML or CSS files (other than a commented out background image)
2.  No changes to anything other than the Bootstrap.css for the background image.
3.  I do have the original template as a zip.  I think I am just not allowed to attach the source folder.  Should I email this to you? Do you want specific folders or the whole thing?
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question