Jump to content
Sign in to follow this  
robdesigner

box image on top, left allign

Recommended Posts

batman

Hi robdesigner

Please you can try 

 

.fboxgraphic.pl-imageframe {text-align: center;}

or

.top_thumbs .fboxgraphic  {text-align: center;}


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites
Rob

Hi,

 

The CSS on your site includes:

.top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic {
    margin-bottom: 5px;
    text-align: center;
}

To align the image to the left, try:

.top_thumbs .fboxgraphic, .only_thumbs .fboxgraphic {
    margin-bottom: 5px;
    text-align: left;
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
robdesigner

nope, no good. Any other ideas.

Share this post


Link to post
Share on other sites
Rob

Which was no good?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
robdesigner

both lines, tried one after the other.

Share this post


Link to post
Share on other sites
Rob

Well, first, remove your code.

Next, copy the second group in my recommendation and paste it on its own line to Dashboard > PageLines > Site Options > Custom Code.

 

Also, you should use Chrome's Inspection Tools or Firebug for Firefox.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
robdesigner

yes we did, still no joy.

Share this post


Link to post
Share on other sites
robdesigner

just got it working, I didn't see your first post, only the other members first recommendations, all working ok thanks to your code. Can you confirm how we can add a bottom padding to the boxes on this page. At what point do we have the page ID code, at the very start? Would the padding be {padding-bottom: 20px}

Share this post


Link to post
Share on other sites
Rob

You prefix your CSS code with .page-id-124 and simply add padding-bottom: 20px; but it must be in the proper element. 

 

The question becomes, do you want to do it to the box, or add it to the excerpt, which is probably much easier, and yields the same effect?


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
robdesigner

Well we want to adding bottom padding to the text, so would it be:

 

.page-id-124 .fboxes (padding-bottom: 20px;)

Share this post


Link to post
Share on other sites
Rob

The code for the entire row is:

.grid-element, .media_overview {
    margin-bottom: 12px;
}

To add 20px at the bottom on that page only, try:

.page-id-124 .grid-element, .media_overview {
    margin-bottom: 32px;
}

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob

I strongly urge you go get Firebug at www.getfirebug.com


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
robdesigner

We do use firebug...  we cant see where you got .media overview from?

Share this post


Link to post
Share on other sites
Rob

See the image below.  There is a line, where the left-most red arrow is. That line should be checked as it relates to the levels of code affecting each element you're inspecting. The left-most arrow points to a little grey arrow, which lets you slide through the line in question.  The next 2 arrows point to different layers of the same element. 

[attachment=1181:6-29-2013 12-11-09 PM.jpg]

You can then see the one I used, and in the code box, the code it uses. 

 

The right-most arrow points to the corresponding arrow, letting you slide through the layers going to the right.


Former PageLines Moderator, Food Expert and Raconteur

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  

×