29 replies to this topic

[rkazantsev]

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

[James B]

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.

[rkazantsev]

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

[batman]

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

[rkazantsev]

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?

[batman]

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.

[batman]

Hi
You can try

 #main {left: -30px;}

I??m not sure

[Danny]

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 ?

[rkazantsev]

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}

[catrina]

Missing a semi-colon:

 {background-color: transparent !important;}

[rkazantsev]

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

[catrina]

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

[rkazantsev]

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

[rkazantsev]

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

[catrina]

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?

[rkazantsev]

@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

[catrina]

Try:

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

[rkazantsev]

Same no change

[batman]

Hi rkazantsev
For transparency you can try

 .page-id-25 .hentry-pad {background: transparent;}

I??m not sure if it you need.

[rkazantsev]

@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