Content Background Change

[Kerem ERDEM]

Hello friends

I want to change content background. I don't know name, I guess "content". I uploaded my site screenshot to understand. In image, you can see whole page. I want to change whole content area (white area). What is that area's tag? I tried #rt-maintop, #rt-maintop .component-contents, body etc, I can't change color.

[Goran Mrganic]

Try #rt-main

[Luke Douglas]

What browser are you using to view your development website?  A URL would also be helpful.

Luke

[Kerem ERDEM]

25 Nisan 2015 Cumartesi 02:10:52 UTC+3 tarihinde Goran Mrganic yazdı:

Try #rt-main

I use that tag and there is no effect. 

[Kerem ERDEM]

25 Nisan 2015 Cumartesi 02:56:02 UTC+3 tarihinde Luke Douglas yazdı:

I use Google Chrome. My site: http://www.penguin-swimming.com/site/ 

[Serge Billon]

hello.

you have rows and in each row a container to align center
so #rt-slideshow .rt-container for the row slideshow assign a bg color to this div.

you have to find each rt container in each row and make a rule.

for all your containers you can add in your custom.css :

.rt-container {

    background-color: red !important;

}

(for red color for exemple)

hope it helps

Serge

--
--
You received this message because you are subscribed to the Google
Groups "Gantry Framework for Joomla Users" group.
To post to this group, send email to
gantry-framework...@googlegroups.com
To unsubscribe from this group, send email to
gantry-framework-for-j...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/gantry-framework-for-joomla-users?hl=en
 
Gantry Framework Homepage: http://www.gantry-framework.org

---
You received this message because you are subscribed to the Google Groups "Gantry Framework for Joomla Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to gantry-framework-for-j...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Web54 / Création de sites / formations se...@web54.fr 03-83-56-65-20 / 06 87 42 95 30 http://www.web54.fr

[Luke Douglas]

Kerem,

You said that you wanted to put something in the background on the content area. Now whether this is simply a single color, a color gradient or some type of image, you didn't specify.  If you look at http://thegatheringplaceinheadland.com/, you will see a graphic under the content text.  This is in the 'rt-mainbody' area.

Let's look at your page.  As you use Chrome, it has an 'inspect element' which you can right-click the content area and select 'inspect element' to view the underlying code.  If you click and expand on the '<div id="rt-transition" class="rt-visible">' code, you will see a '<div id="rt-mainbody">' section.  This is the main content area that you wanted some type of background.

If you want a single color, you can add this to your 'regina-custom.css' file:

#rt-mainbody {background-color: #333333;}

If you want a gradient color, you can use this code:

#rt-mainbody {
  background-color: #505050;
  background-image: -moz-linear-gradient(center bottom , #191919 0%, #505050 100%);
  background-repeat: repeat-x;
}

If you want an image to be displayed, you can use code like this:

Fixed image:

#rt-mainbody {
  background: url("/images/MYBACKGROUNDIMAGE.JPG") no-repeat scroll center top rgba(0, 0, 0, 0);
}

Responsive image (fills area):

#rt-mainbody {
  background: url("/images/MYBACKGROUNDIMAGE.JPG") no-repeat scroll center top rgba(0, 0, 0, 0);
  background-size: 100% 100%;
}

I would recommend that for diagnosing problems on your website that you install Firefox and then install the Firebug add-on.  I find Firebug a more intuitive diagnostic program.

If you have any further questions, comment back here.

Luke

[Goran Mrganic]

Ok, took a look at that website. Inside your regina-custom.css file, add or edit these:

#rt-breadcrumbs .rt-container {background: #______;}

#rt-slideshow .rt-container {background: #______;}

#rt-showcase .rt-container, #rt-feature .rt-container, #rt-utility .rt-container, #rt-maintop .rt-container, #rt-mainbody-surround .rt-container, #rt-mainbottom .rt-container, #rt-extension .rt-container, #rt-bottom .rt-container {background-color: #______;}

#rt-mainbody {background: #______; color:#______}


These relate to everything you have a white background to. Just change the #______ with the color values you want. For example, your menu has #1A1A1A value.

[Luke Douglas]

​Goran,

He indicated that he only wanted a background for the content area.  What you suggested pretty much covers the entire page.

Luke
​

[Goran Mrganic]

Well, what's content in his case? The arrow in the screenshot points to the entire white area, which is what my reply covers - not the entire page. It covers breadcrumbs, that slider and article part of the page, but it leaves out menu, page background and footer ;)

Besides, I guess he can distinct what those lines refer to.

1st is for breadcrumbs, where he has language selectors.
2nd is for the area with an image that says PENGUIN SWIMMING
3rd is for everything under 2nd, excluding the article,
and 4th is for the article.

He can now pick whichever he wants to change ;)

[Kerem ERDEM]

Thanks all of you. I can fix this problem with your help.

Codes;

#rt-breadcrumbs .rt-container, #rt-slideshow .rt-container, #rt-mainbody, #rt-showcase .rt-container, #rt-feature .rt-container, #rt-utility .rt-container, #rt-maintop .rt-container, #rt-mainbody-surround .rt-container, #rt-mainbottom .rt-container, #rt-extension .rt-container, #rt-bottom .rt-container {background-color: #48bced ;}

24 Nisan 2015 Cuma 10:17:28 UTC+3 tarihinde Kerem ERDEM yazdı: