Solved

Make Articles w White background; not translucent

Posted on 2014-01-03
11
270 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 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

732 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