Jump to content
Sign in to follow this  
hireconrad

Remove Padding from Boxes + Adding Gradient Mouse Over

Recommended Posts

hireconrad

1) what css can i add to pagelines customize plugin to remove padding in boxes? Ive been trying to figure this out using firebug but i can't seem figure out which class or id i need to specify. 2) Also, the iblogpro5 theme i am using has a gradient applied to boxes and pages/posts. Is it possible to make my whole box a link and have it apply a semi-transparent gradient appear over the entire box when hovering over it with a mouse? 3) I understand the difference between classes and id's, however when i look at my site with firebug, i have div with the following code:

there is a class "box-media-pad" but what is the "blocks" part doing? I can't find a class or id of "blocks"

Share this post


Link to post
Share on other sites
catrina

What CSS have you tried so far so that I can test it or find a better solution? As for the box hover effect, this is going to take more than CSS to achieve. This effect would be easier to accomplish if the you add an images to the boxes and give them the ability to change on hover (rather than making the DIV layer itself change on hover).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
theTimHunter

try maybe

 .box-media-pad {padding: 0px!Important;}

See if that works.

Share this post


Link to post
Share on other sites
hireconrad

The problem I'm having is isolating the boxes from all the other classes that have padding applied. This is the css for the padding: .hentry-pad, .scolumn .widget-pad, #page #boxes .box-media-pad, .post-footer-pad, .wp-comments-pad, .morefoot-col-pad { background: url("images/box-bg.png") repeat-x scroll left bottom rgb(255, 255, 255); border: 1px solid rgb(255, 255, 255); padding: 20px; text-shadow: 0 1px 0 rgb(255, 255, 255); } what class or id do I put into the pagelines customize plugin to remove only the padding for the boxes? Is there a way of specifying which boxes have removed padding (i.e. if i want some boxes to have padding on other pages, while on this page i want no padding)?

Share this post


Link to post
Share on other sites
hireconrad

.box-media-pad {padding: 0px!Important;} worked to remove most of the padding, but as you can see there is still some white space below the image. what does the "!Important" do at the end of a css? how can i make this apply only to certain pages or box categories?

Share this post


Link to post
Share on other sites
theTimHunter

it looks like there is a min height of 201 px set and it appears as though your image is not that tall. i think that is where the space is coming from. There is actually a 0px padding, but the image is less than 200 px (or so). Try to adjust your test image accordingly and see if that works.

Share this post


Link to post
Share on other sites
theTimHunter

for certain pages, navigate to that page, then right-click and choose page source. near the top of the doc it will give you a page id tag, use that tag when you want to apply css to certain elements on a specific page. and !Important just increases the priority of the styling.

Share this post


Link to post
Share on other sites
catrina

To view the page source, you can also use Firebug: http://getfirebug.com To learn how to use Firebug for CSS customizations, please see this documentation: http://www.pagelines.com/wiki/Custom_CSS


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
theTimHunter

@catrina, sorry if my explanations aren't clear :. i will be more diligent moving forward. i love pagelines and this forum.

Share this post


Link to post
Share on other sites
hireconrad

I have edited the test box image and there still is space below the image. The Test image in the middle box has dimension of 300px x 200px, while the one on the left (newer) is 300px x 210px @Catrina, thanks for the links to firebug, but as mentioned i am already using it, and i think i have a good handle on how to use it.

Share this post


Link to post
Share on other sites
theTimHunter

if you navigate to the page with the boxes, then click edit page. in the meta settings (below content area), click on boxes. The second section should give you the option of choosing max image size in pixels. what is yours currently set to?

Share this post


Link to post
Share on other sites
hireconrad

i am not (at this point) using any html in the boxes. I inserted an image into the box using the pagelines Box Setup Options.

Share this post


Link to post
Share on other sites
hireconrad

@tmhunter521 i have nothing in the field for max pixel size. I think pagelines is looking at the size of the image added and adding 1px to the max image size.

Share this post


Link to post
Share on other sites
catrina

Ah, I thought you were trying to get the gradient mouse over to work. In order for it to work, you'd need to add the image to the box content area with HTML instead and code can be used to create a hover effect. Are you still trying to make the image change on hover?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
hireconrad

i found the following spot in the css that was adding some (but not all the margin below the image): .top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic { margin-bottom: 5px; text-align: center; }

Share this post


Link to post
Share on other sites
hireconrad

@Catrina, i am, however i am trying to figure out first why the box was leaving room below the image before figuring out the gradient mouse over.

Share this post


Link to post
Share on other sites
theTimHunter

@hireconrad, in the same meta settings, you should be able to choose, image only. it's fun to watch you experiment in real time. i look forward to seeing the finished product!

Share this post


Link to post
Share on other sites
hireconrad

@tmhunter521, i have setup "image only" on the front page, however if i do that, then if i remove the image from the pagelines box setup and type in HTML, nothing shows up. A good example of this is on my listings page: the 1st row of boxes has "image only" (and as you can see the one on the farthest right is empty). the 2nd row is unspecified (and the furthest right box has an image (html i added) http://hireconrad.com/hireconrad/listings/

Share this post


Link to post
Share on other sites
batman

You can try add in PageLines > Site Options > Custom Code > CSS Rules

.fboxtitle h3 { display: none;}

I don??t see space below image


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
hireconrad

@batman, i added the css code you suggested and it has no effect on the space below the image. Ive tried using all the following browsers (they all show the space below the image): Safari, IE9, Firefox, Chrome. All the newest versions. space.png

Share this post


Link to post
Share on other sites
Danny

Hi, I am lost with the amount of replies in this topic. What is the actual issue now and what are you trying to achieve?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
hireconrad

the issue has seemed to resolve itself once i changed the image to change over mouse hover.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×