Jump to content


Photo
Resolved

Remove Container from one Page only



This topic has been archived. This means that you cannot reply to this topic.
29 replies to this topic

#1 rkazantsev

rkazantsev

    Advanced Member

  • Members
  • PipPipPip
  • 95 posts

Posted 20 August 2012 - 07:02 PM

Hello I have created a slider within a page (not a plugin). I want to remove the container that comes with the page, but only for this page. See image at link below http://72.26.98.200/...2012/08/Box.png

#2 James B

James B

    Advocate

  • Members

  • 5126 posts

Posted 20 August 2012 - 09:24 PM

Hi Rkazantsev, I've checked your link in firebug for you. It's not showing that the image is set up as a slider, but as a post within the page content area. Is this correct? You can removed the shadow/border and align the image with the left hand of the page with CSS, but the white background cannot be removed as it is saved within the picture. Is this what you mean't by remove the container? Please let me know and we can advise further on how to achieve the look you're after :) If you're looking to remove the white background from the image, you'll have to save the image as a transparent PNG using a photo editor like Photoshop.

#3 rkazantsev

rkazantsev

    Advanced Member

  • Members
  • PipPipPip
  • 95 posts

Posted 20 August 2012 - 10:17 PM

Hi Jamie I used this css code in custom css to remove the box or container.( background-color: transparent!important; ) Which is good but it removes for all pages, I only want to remove the container for one page. Also after making the background transparent I still need to move my slider to the left and all the way up. For some reason can find away to do this. Ruben

#4 batman

batman

    Bat Learning

  • Members

  • 2218 posts

Posted 20 August 2012 - 10:21 PM

Hi jamie You can try something like .page-id-25 and then your code

#5 rkazantsev

rkazantsev

    Advanced Member

  • Members
  • PipPipPip
  • 95 posts

Posted 21 August 2012 - 04:11 AM

When trying that I get a LESS compile error and nothing changes, I tried page_id=25, ?page_id=25 and .page-id-25 with background-color: transparent!important; after it. Also any help on moving the slider to the left and up after I remove the container?

#6 batman

batman

    Bat Learning

  • Members

  • 2218 posts

Posted 21 August 2012 - 09:32 AM

Only an example. the format is
 .page-id-25 .tbubble-pad {background-color: transparent !important}
I don??t find where you can insert {background-color: transparent !important} in your site with the firebug to remove the box.
You see the space among transparent and !important too.

#7 batman

batman

    Bat Learning

  • Members

  • 2218 posts

Posted 21 August 2012 - 09:43 AM

Hi
You can try
 #main {left: -30px;}
I??m not sure
:)

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17966 posts

Posted 21 August 2012 - 11:08 AM

Hi,

This is not a PageLines issue, this is custom code. Therefore, we are unable to provide assistance.

However, from my quick look, the issue you have is the CSS. You currently have this:

 #gallery {
	-moz-box-shadow: 0 0 3px #AAAAAA;
	-webkit-box-shadow: 0 0 3px #AAA;
	box-shadow: 0 0 3px #AAA;
	-moz-border-radius-bottomleft: 4px;
	-webkit-border-bottom-left-radius: 4px;
	border-bottom-left-radius: 4px;
	-moz-border-radius-bottomright: 4px;
	-webkit-border-bottom-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border: 1px solid white;
	background: url(http://72.26.98.200/wp-content/uploads/2012/08/panel1040.png) repeat-x bottom center white;
	width: 1020px;
	overflow: hidden;
	}

Disabling the width in Chromes web dev tool, positioned your gallery correctly. Therefore, I recommend you review your code or ask the person who provided this functionality for assistance.

Also, why not use the Carousel section ?

#9 rkazantsev

rkazantsev

    Advanced Member

  • Members
  • PipPipPip
  • 95 posts

Posted 21 August 2012 - 03:56 PM

batman #main {left: -30px;} worked like a charm, I tweaked it to #main {left: -40px;} and its perfect. Would you know how i can raise up? But transparency still doesnt work :( its all or nothing, and .page id 25 should work .page-id-25 .tbubble-pad {background-color: transparent !important}

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 21 August 2012 - 04:04 PM

Missing a semi-colon:

 {background-color: transparent !important;}


#11 rkazantsev

rkazantsev

    Advanced Member

  • Members
  • PipPipPip
  • 95 posts

Posted 21 August 2012 - 05:01 PM

Thanks Danny, I tried removing the width: 1020px; from css, it does work but cut the image size to approximately 960

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 21 August 2012 - 05:04 PM

If you need it to be a certain width, you can change the width itself.

#13 rkazantsev

rkazantsev

    Advanced Member

  • Members
  • PipPipPip
  • 95 posts

Posted 21 August 2012 - 05:16 PM

Ok got it lifted with the following custom css #main {left: -50px;top: -180px;} But still have the container, Also thanks Catrina tried with smi-colon but no luck

#14 rkazantsev

rkazantsev

    Advanced Member

  • Members
  • PipPipPip
  • 95 posts

Posted 21 August 2012 - 05:20 PM

I think if I can just change the size instead of making it transparent then it will be fine, (i.e.the container will be smaller or behind the image) But unable to do it via firebug

#15 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 21 August 2012 - 05:31 PM

You'll need to experiment with it to get it to where you want. I believe it's an issue with the selectors you may be using. What have you tried so far?

#16 rkazantsev

rkazantsev

    Advanced Member

  • Members
  • PipPipPip
  • 95 posts

Posted 21 August 2012 - 05:56 PM

@Catrina Unfortunately haven't been able to find the code that controls the size of the container. I tried .page-id-25 .content .box { width: 280px; min-width: 280px; } without success

#17 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 21 August 2012 - 06:29 PM

Try:

 .page-id-25 .content .box {
	width: 280px !important;
	min-width: 280px !important;
	}


#18 rkazantsev

rkazantsev

    Advanced Member

  • Members
  • PipPipPip
  • 95 posts

Posted 21 August 2012 - 06:34 PM

Same no change :(

#19 batman

batman

    Bat Learning

  • Members

  • 2218 posts

Posted 21 August 2012 - 11:42 PM

Hi rkazantsev
For transparency you can try
 .page-id-25 .hentry-pad {background: transparent;}
I??m not sure if it you need.

#20 rkazantsev

rkazantsev

    Advanced Member

  • Members
  • PipPipPip
  • 95 posts

Posted 22 August 2012 - 02:56 AM

@batman No still not doing it, this is starting to drive me crazy :s seem simple, find where the sizing is located for the container change it to be smaller than my slider and its done... But this is one thing I am have trouble locating even in firebug :(