?
Solved

Make Articles w White background; not translucent

Posted on 2014-01-03
11
Medium Priority
?
272 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
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!

 
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 1500 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

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!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month10 days, 14 hours left to enroll

770 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