Jump to content

Archived

This topic is now archived and is closed to further replies.

outtareach

Main container div background

Recommended Posts

outtareach    3
outtareach

I see that dms has sections and for me Im trying to create a solid box around the main container div  one solid color background with another few divs on top with other colors.  How would this be done in pagelines?  Basically a backgroun

d texture with the main div on top in another color.  With the sections everything is separated so how would I make something that is completely behind everything?  Like this image hereminimal.jpg

Share this post


Link to post
Share on other sites
Rob    547
Rob

Each of the three basic sections of a DMS page has an edit option.  Each editing area for these has a background image option as well as a custom CSS class field.  You could upload a background image and tile it, or, you can add a color by CSS (which is the most economical on page load time). 

 

Then, in your content area, you can also set a custom class.  You can apply a gradient to the class so that you can recreate the white rectangle part of that image, and give it some transparency using this site http://www.colorzilla.com/gradient-editor/

 

The rest of it is simply the implementation of an image in the content area.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

Thanks, I realized that if I just go into "color/style" and set the background image then go into the sections and set the specific background image that I want on top there it works.  I see that what you are talking about Egg but what if I wanted a white div around the content?  Since the div doesnt stretch around the who area would I repeat and Image?

Share this post


Link to post
Share on other sites
Rob    547
Rob

Wrap the content in a div containing a unique class.  Add padding, and white background for that one class.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

I am trying to put a pure color in the background for the page like normal wordpress themes.  I know I asked this but I cannot seem to figure out how to just make one color for the content divs and a background.  Basically a main white color for the site and a background.  In regular wordpress themes this is easy because there is one container but here there are sections and they split so how would I just make one white box around all my content? 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
Hi,
 
Can you provide a link to your site, so we can see what you have at the moment and also, the image you posted in your first post, is that what you're trying to achieve ?
 
As I am slightly confused, as you say you want something similar to that image, but then in your post above, you want a site and background to white ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

this is what Im trying to do, put a color or one image in the container while I still have a background image.

 

white.jpg

Share this post


Link to post
Share on other sites
Jake    74
Jake

Hi outtareach - So just to try to clarify, you are looking to have the center content background white and the overall site background that grey image?


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

yes like in the pick or have the white go from to to footer but regardless Im trying to get this accomplished like you see with basic twenty twelve theme.  just a solid color/pattern image behind the main content and another background image on the main background.  Most themes have a main container div around the entire content making this easy with regular themes but I cannot figure it out here.

Share this post


Link to post
Share on other sites
Jake    74
Jake

OK gotcha. So first thing I recommend is using the "boxed display" setting in the DMS Global Options - Layout & Nav. After that, go to Global Options - Color & Style and choose white as the Content Base Color and then upload your image/set repeat attributes under the Background Image settings. I think that should do the trick for you but let us know if that's not the case.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

thanks a lot as that works but how do I keep the header without the background like in the image above?

Share this post


Link to post
Share on other sites
Rob    547
Rob

You could use CSS to make the header background color transparent.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

I put this in there but it didnt work.

 

background-color:transparent;

 

just still displays white.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

This is because you're using Box Mode and the box wrap class has a background color assigned to it. Therefore, you can not make the header area transparent as the background color for your boxed-wrap is going from higher up the DOM.

 

Therefore, what you're going to need to do is override the boxed-wrap background color #FFF with transparent then apply a background #FFF to your page class.

This will give you a transparent header and a white content area.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
outtareach    3
outtareach

that seemed to work, thanks for the input.

Share this post


Link to post
Share on other sites
Rob    547
Rob

Great!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

  • Similar Content

    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • Samuel Costa - UDF
      By Samuel Costa - UDF+
      Hi. I made this site: www.arvoredacidadania.org.br. In the part Quem Somos and Serviços I used different configurations (1 container and 2 texts side by side; 2 containers: each one with text; or just two texts side by side).
      The problem is the height. I tried CSS, etc, but when i change the width, change the height also.
      Any ideas?
      This picture is the example how i need to do.
      I need both textboxs with the same height.
      Regards.

    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • micstepl
      By micstepl+
      How does the SPORTCODE CONTAINER work ... to nest sections inside (within content area)
    • micstepl
      By micstepl+
      the grid function is gone within post!
      all workarounds within PL5 are not possible!!!
      cloning of containers from outsinde > to inside a post/page content do not work container-work within post/page content does not work (same as used outside) DMS bootstrap grid has gone
×