Change background but leave content in white

Hello,
unfortunately my Homepage is running on 2.5 (started with joomla 1 and was migrated through all later Versions) and has some security issues, my Provider told me so.
Now I have to start new from the scratch with Joomla 3.4. I used the old template "Financial Business" for years and now I´m looking for a similar one. My page now: http://www.grizzly-adams.de/

I´m playing around with the "news2"-Template in Chrome to make it a little similar to my old page. I was able to Change the Background Color, but some modules did Change Color too because they have no bg/transparency. What I want is sth like this: http://www.grizzly-adams.de/news2wish.jpg
Would it be possible to set all Content between the marked lines to White, but the Background to a solid Color or better, to the same backgroundimage like on my old site? Maybe an aditionally div around the complete Content? And how to do this, or better where?
I haven´t really started with anything yet, I´m still looking for the best template to have the most similar look like I had for Ages. There are not many templates that come close to my old one, unfortunately. Lots of nice templates, but I need more space for News.

Thanks in Advance

I'm pretty sure I have explained this solution some time ago on this subforum, so please search for it. If you will not find the solution please write back and give me your site's url.

Ah, I found it in the 2.5-Board

Please let me know if you would have any problems with it.

Slowly I´m coming Close to that what I want.
Here´s my trial site: testserver.grizzly-adams.de

Now I´m stuck with the Header Image on different devices..
I´ve created a picture for every size that I found in layouts section of the template. That means header_1410.png for normal display, header_1100.png for tablets, header_840.png for small tablets and header_640.png for mobile. And svg´s with similar names.
The news2-Logo (when you scroll down, the one left to the menu) has been edited quick, only for testing.
For normal displays I found a solution for my override.css:

.svg #gkLogo.cssLogo {
background-image: url("../images/header_1410.png") ;
height: 160px;
width: 1410px;
margin:0px!important; }

How do I have to set the css for the different sizes for different devices? For PC and other large displays it looks okay now. Tablet and mobile lost the responsiveness because they use the big header image, but try to resize it. My content is stuck on the left. I tried severall things in css with "this media Thing" but failed every time. Never used it before, and hours of Trial and error are a Little frustrating, especially when it´s only error

In the box "Die letzten Spielberichte" I would like to see the Publishing date before the Headings too. No idea where to do this. Is it possible? And my "read more"-link in mainbody Looks a Little weird, there´s a line-height-problem I think. But I don´t find it :/

And last but not least: I tried all module styles for Image Show 4. Only one was able to Show a Little teaser of the article, but is missing a "read more"-Link. It`s the style "gk_Publisher" and I haven´t found out how to put it there manually.
I love the way to Show my article related photos, but the range of suitable styles for the slideshow is a Little small, especially when you want to have a Little bit more text. The older Versions of Image Show were better for those Needs.

That was all for today
Thanks for your support

You need to controll css elements basing on screen size. First thing - you should never set width and height fixed. Width should always be 100% to allow element to fill available space. Then you can use css media queries to define different settings this way:

Code: Select all

@media (max-width: 800px){
.someSelector {color: red;}
}
@media (max-width: 640px){
.someSelector {color: blue;}
}


will set red color for screen sizes between 641 and 800px, and blue for those below 640px.

I had to set at least the width fix to 160px, because with 100% it only Shows a maybe 75px high part of my Header. I don´t know how to make it better.
Now I have the following css:

Code: Select all

/* logo fullscreen */
#gkLogo.cssLogo {
    background-image: url("../images/header_1410.png")!important;
    max-width: 1410px;
    max-height: 160px;
    background-size: 1410px;
    height: 160px !important;
    width: 100%;
    margin: 0px;
}
/* logo 1100px tablet */
@media (max-width: 1100px){
#gkLogo.cssLogo {
    background-image: url("../images/header_1110.png")!important;
    max-width: 1110px;
    max-height: 160px;
    background-size: 1110px;
    height: 160px !important;
    width: 100%;
    margin: 0px;
}

}

/* logo 840px small tablet */
@media (max-width: 840px){
#gkLogo.cssLogo {
    background-image: url("../images/header_840.png")!important;
    max-width: 840px;
    max-height: 160px;
    background-size: 840px;
    height: 160px !important;
    width: 100%;
    margin: 0px;
}
}
/* logo 640px mobile landscape */
@media (max-width: 640px){
#gkLogo.cssLogo {
    background-image: url("../images/header_640.png")!important;
    max-width: 640px;
    max-height: 160px;
    background-size: 640px;
    height: 160px !important;
    width: 100%;
    margin: 0px;
}
}
/* logo 320px 100px mobile upright */
@media (max-width: 320px){
#gkLogo.cssLogo {
    background-image: url("../images/header_320.png")!important;
    max-width: 320px;
    max-height: 100px;
    background-size: 320px;
    height: 100px !important;
    width: 100%;
    margin: 0px;
}
}


It seems that it won´t use the right Images, because I made them for having the text always centered. Now it seems that there is always cutted sth from the right so it fits to the Screen. I wanted that the best Fitting Image is Chosen, and if it´s necessary it should be comprimized to the Screens size, not cutted off. I think, my css is wrong, but in one week try and error I still haven´t found the right one. Too complicated for me I think.
How should the css look like when i want to have
a) a big Header for Fullscreen tv or Monitor
b) a certain Image for different smaller Screens, shrinked on both sides to fit, not beind simply cut off on the right side?

If you don't want to have image cut off, the easiest idea is to use normal html img tag and classes to show / hide correct image.

When I put the Header in as an Image (in template Features) I have two of them. Like in the Picture. When I delete the obvious wrong css-code from my override.css and put in my head Image as css (again in Features), I have no Header anymore. Like now on my site. So this all doesn´t help me.
By now I´m not interested in different headers for different devices anymore, now I only need a functional code to see my own head Image in full-size over the complete width of the site, but responsive when the page is resized. This shouldn´t be too difficult, but sth in this template makes it difficult.

You are trying to use logo for placing a banner. Logically - you should not do it this way, but if you must, the only thing is to increase logo's height:

Code: Select all

gkLogo.cssLogo, #gkLogoSmall.cssLogo {
    height: 90px;
}


Now please adjust the value to your liking.

I did this several times, and it works of course, but when i resize the window the content goes down a lot and there is a big gap between header and content. that´s what I meant in my other thread (that had to be a response ro this thread, I didn´t want to start a new one)

Ok, now I see... The only idea that I have is to add a custom module position, just before #gkTopBar element and place image (image tag, not css background) there.
Sadly with css you can't use background image and have height to be adjusted automatically.

https://www.gavick.com/documentation/jo ... e-position